画像のアップロード&アイキャッチ画像を

しっかり理解しよう！

山口 有由希

2012年9月16日日曜日

自己紹介

2012年9月16日日曜日

山口 有由希福岡県在住、長崎県出身

フロッグマンオフィス所属福岡県でWebデザイナー

や ま ぐ ち ゆ う き

2012年9月16日日曜日

Fireworksマニアhttp://fw.v-col

ors.com

2012年9月16日日曜日

今回のねらい

2012年9月16日日曜日

WordPressの画像の扱い方をマスターすれば、難しいコードを書かなくてもアイデア次第で

いろんなことができます。

2012年9月16日日曜日

全部WordPressで運営中

2012年9月16日日曜日

画像の扱い方で困ることがないようにしっかり押さえておきましょう！

2012年9月16日日曜日

本日の流れ

2012年9月16日日曜日

✦ ファイルアップローダーからアップした画像の保存先の確認と設定

✦ 初期設定されているサイズ(thumbnail,medium,large)の設定を変更する

✦ アイキャッチ画像を使えるように設定する

✦ いろいろなところにアイキャッチ画像を使う

✦ テーマ内や投稿／ページ内に画像を使用するときのパスの指定方法のポイント

2012年9月16日日曜日

WordPressでの画像アップロードの基本のき

2012年9月16日日曜日

WordPressでは、ファイルアップローダーから画像をアップすると

thumbnail、medium、large、fullの4種類の画像サイズが

自動的に生成され、保存されます。

2012年9月16日日曜日

どこにアップされているの？

2012年9月16日日曜日

WordPressのファイルアップローダーからアップした画像の保存場所を確認／設定する

2012年9月16日日曜日

2012年9月16日日曜日

✦ メディア設定の中に設定箇所があります。

管理画面->設定->メディア

2012年9月16日日曜日

thumbnail,medium,largeのサイズ設定はどこでやるの？

2012年9月16日日曜日

2012年9月16日日曜日

初期設定されている画像サイズ(large,medium,thumbnail)の設定をする

2012年9月16日日曜日

管理画面->設定->メディア

✦ メディア設定の中に設定箇所があります。

2012年9月16日日曜日

サムネイルを実寸法にトリミングする？チェックを入れたとき

チェックをはずしたとき

元画像

2012年9月16日日曜日

チェックを入れたとき

チェックをはずしたとき

サイズ優先。指定のサイズぴったりの画像を作成する。そのため、縦横比の異なる画像を指定した場合、上下もしくは左右が切り取られてしまう。

画像維持優先。画像すべてがそのサイズ内におさまるようにリサイズする。縦横比の異なる画像を指定した場合、上下、もしくは左右の長さが指定しているサイズより小さくなる。

2012年9月16日日曜日

2012年9月16日日曜日

サムネイルサイズにしか

選択欄がない

2012年9月16日日曜日

medium,largeサイズのトリミング方法の指定は

できないの？

functions.phpを編集することで実現できます！

2012年9月16日日曜日

functions.phpって？

テーマディレクトリ内にある、関数などを記述することができるPHPファイルです。

ところで

2012年9月16日日曜日

2012年9月16日日曜日

update_option('medium_crop', true);update_option('large_crop', true);

true…サイズ優先false…画像保持優先

2012年9月16日日曜日

update_option('medium_size_h', 100);update_option('medium_size_w', 100);

functions.phpでサイズの設定もできます。このとき、管理画面での設定値よりfunctions.phpで設定した値の方が優先されます。

2012年9月16日日曜日

thumbnail、medium、large以外の画像サイズを作る

2012年9月16日日曜日

2012年9月16日日曜日

新しいサイズを定義する

functions.phpに以下の記述を追加します。

add_image_size('新しいサイズ名', 幅, 高さ,切り抜き方 );

add_image_size('mini', 100, 200, true);

2012年9月16日日曜日

どう使い分ける？

✦ ページや投稿内で貼付けたい画像サイズは、thumbnail,medium,largeで設定しておくと便利。（投稿の際、一覧からサイズを選べるため）

✦ テーマ内に埋め込むもので、一覧に出る必要のないもの（小さいサムネイル用画像など）は別の名称で作っておくと混乱がない（投稿の際の一覧にでない）

2012年9月16日日曜日

アイキャッチ画像を使う

2012年9月16日日曜日

アイキャッチを有効にするfunctions.phpに以下の記述を追加します。

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 投稿のみadd_theme_support( 'post-thumbnails', array( 'page' ) ); // 固定ページのみ

投稿のみ／固定ページのみアイキャッチを使う設定もできます。

add_theme_support('post-thumbnails');

2012年9月16日日曜日

2012年9月16日日曜日

アイキャッチのサイズを指定するfunctions.phpに以下の記述を追加します。

set_post_thumbnail_size(100,100,true);

一緒に切り抜き方も指定できます。

set_post_thumbnail_size(横,縦,切り抜き方);

2012年9月16日日曜日

記事のループ内にアイキャッチ画像を表示させる

2012年9月16日日曜日

メインループ内で使用するループ内に以下の記述を追加します。

the_post_thumbnail(サイズ指定);

the_post_thumbnail();the_post_thumbnail(‘thumbnail’);

サイズ指定を省略すると、先ほど指定したサイズのアイキャッチが表示されます。

2012年9月16日日曜日

サイズ指定に使えますfunctions.phpで以下の文で定義した新しいサイズ名も使えます。

add_image_size('新しいサイズ名', 幅, 高さ,切り抜き方 );

the_post_thumbnail(‘mini’);

2012年9月16日日曜日

注意点

Codexで上記のように記載がありますが、functions.phpで値を設定せずにパラメータなしでアイキャッチを出力するとフルサイズで出力されてしまいます。

2012年9月16日日曜日

アイキャッチのサイズ指定は

セットで書いておきましょう。

add_theme_support('post-thumbnails');

set_post_thumbnail_size(横,縦,切り抜き方);

2012年9月16日日曜日

オリジナルループ内などで使用するループ内に以下の記述を追加します。

echo get_the_post_thumbnail(記事のID,サイズ指定);

サイズ指定を省略すると、先ほど指定したサイズのアイキャッチが表示されます。

2012年9月16日日曜日

使用例<?php $pages = get_pages(array('child_of' => 1)); ?> <ul><?php foreach ($pages as $page): ?><li><?php echo get_the_post_thumbnail($page->ID); ?><h1><?php echo $page->post_title; ?></h1><?php echo $page->post_content; ?></li><?php endforeach; ?></ul>

2012年9月16日日曜日

使用例

2012年9月16日日曜日

アイキャッチ画像をさらにいろいろなところに表示させる

2012年9月16日日曜日

プラグインに組み込む人気記事を表示するプラグイン、Popular Postsにアイキャッチを表示させてみましょう。

http://rmarsh.com/plugins/popular-posts-plugin/2012年9月16日日曜日

出力部分をカスタマイズする設定→Popular Posts→Output→Output template:を編集します

2012年9月16日日曜日

出力部分をカスタマイズする

[php: XXXXXX ;]で囲むとテーマと同じようにPHP構文を書くことができます。

このプラグイン内で使用可能な変数リストがサイドバーに表示されているので、そこからPost_idを取得する変数を選び、セットします。

2012年9月16日日曜日

記述方法以下の記述を追加します。

{php: echo get_the_post_thumbnail({postid},"サイズ指定");}

{php: echo get_the_post_thumbnail({postid},"thumbnail");}

サイズ指定はこれまでと同様、thumbnailやmediumなども指定できます。

2012年9月16日日曜日

関連記事表示にも導入プラグインSimilar Postsを使用して関連記事表示部分にもアイキャッチ画像を表示させることができます。設定方法は人気記事の時と同様です。

http://rmarsh.com/plugins/similar-posts/2012年9月16日日曜日

テーマディレクトリにある画像をテーマ内で使う

2012年9月16日日曜日

bloginfo('template_directory' ); を使おう！ 使用中テーマファイルディレクトリのURLを出力します。以下のように記述します。

<img src="<?php bloginfo('template_ directory); ?>/images/sitetitle.png" />

<img src="http://blog.v-colors.com/wp-content/themes/v-colors/images/sitetitle.png" />

出力結果

2012年9月16日日曜日

テーマディレクトリにある画像を投稿／ページ内で使う

2012年9月16日日曜日

投稿やページにフルパスで書いて困るシチュエーション

✦ サイトのURLが変わることになった！

✦ テスト環境ではhogehoge.com/test/に設置していたが、本番環境ではhogehoge.com/で公開するので絶対パスが変わってしまう

✦ ファイルアップローダーであげた画像は上書きが面倒

2012年9月16日日曜日

functions.phpに仕掛けをしようfunction chgImgPath($text) { $content = str_replace('置き換えたい文字列', '置き換えたいパス',$text);return $content;} add_action('the_content', chgImgPath);

function chgImgPath($text) { $content = str_replace('imagepath',get_bloginfo('template_directory').'/images',$text);return $content;} add_action('the_content', chgImgPath);

2012年9月16日日曜日

投稿／ページでの書き方

<img src="imagepath/hogehoge.png" alt="これはhogehogeです" />

<img src="http://blog.v-colors.com/wp-content/themes/v-colors/images/hogehoge.png" alt="これはhogehogeです" />

出力結果

2012年9月16日日曜日

こんなに便利！

✦ function.php内の置き換えたいパスのURLを変更だけでOK。

✦ 画像の差し替えがあったときは該当ディレクトリの画像をFTPで上書きでOK(ファイルアップローダーであげた画像の上書きは地味に大変）

2012年9月16日日曜日

この方法の注意点

記事中に出てくる指定した文字列をすべて置換します（この場合はimagepath）

そのため置き換える文字列は本文中に出てくることのないような文字列を設定しておいた方がいいでしょう。

2012年9月16日日曜日

まとめ

2012年9月16日日曜日

✦ thumbnail、medium、large以外にもいろんな画像サイズを作れちゃう！

✦ アイキャッチ画像はfunctions.phpでの設定が重要！

✦ テーマ内でも自由に呼び出せるのでアイデア次第で使い方色々

2012年9月16日日曜日

使いこなして

サイト制作に役立ててくださいね!

2012年9月16日日曜日

ご静聴ありがとうございました！

ご指摘／ご質問などお気軽に。

yuki930

2012年9月16日日曜日