View
6.388
Download
1
Category
Preview:
DESCRIPTION
WordCamp 2012で発表した「画像のアップロード&アイキャッチ画像をしっかり理解しよう！」のスライドです。
Citation preview
画像のアップロード&アイキャッチ画像を
しっかり理解しよう！
山口 有由希
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日日曜日
Recommended