More Related Content
Similar to WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう! (20)
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
- 1. 画像のアップロード&
アイキャッチ画像を
しっかり理解しよう!
山口 有由希
2012年9月16日日曜日
- 3. や ま ぐ ち ゆ う き
山口 有由希
福岡県在住、長崎県出身
フロッグマンオフィス所属
福岡県でWebデザイナー
2012年9月16日日曜日
- 7. 全部
WordPressで
運営中
2012年9月16日日曜日
- 8. 画像の扱い方で困る
ことがないように
しっかり押さえて
おきましょう!
2012年9月16日日曜日
- 10. ✦ ファイルアップローダーからアップした
画像の保存先の確認と設定
✦ 初期設定されているサイズ
(thumbnail,medium,large)の設定を変更する
✦ アイキャッチ画像を使えるように設定する
✦ いろいろなところにアイキャッチ画像を使う
✦ テーマ内や投稿/ページ内に画像を
使用するときのパスの指定方法のポイント
2012年9月16日日曜日
- 13. どこにアップ
されているの?
2012年9月16日日曜日
- 22. チェックを入れたとき
サイズ優先。指定のサイズぴったりの画像
を作成する。そのため、縦横比の異なる画
像を指定した場合、上下もしくは左右が切
り取られてしまう。
チェックをはずしたとき
画像維持優先。画像すべてがそのサイズ内
におさまるようにリサイズする。縦横比の
異なる画像を指定した場合、上下、もしく
は左右の長さが指定しているサイズより小
さくなる。
2012年9月16日日曜日
- 25. medium,largeサイズの
トリミング方法の指定は
できないの?
functions.phpを編集することで
実現できます!
2012年9月16日日曜日
- 26. ところで
functions.phpって?
テーマディレクトリ
内にある、関数などを
記述することができる
PHPファイルです。
2012年9月16日日曜日
- 32. 新しいサイズを定義する
functions.phpに以下の記述を追加します。
add_image_size('新しいサイズ名', 幅, 高さ,切り抜き方 );
add_image_size('mini', 100, 200, true);
2012年9月16日日曜日
- 33. どう使い分ける?
✦ ページや投稿内で貼付けたい画像サイズは、
thumbnail,medium,largeで設定しておくと便利。
(投稿の際、一覧からサイズを選べるため)
✦ テーマ内に埋め込むもので、一覧に出る必要のないも
の(小さいサムネイル用画像など)は別の名称で作っ
ておくと混乱がない(投稿の際の一覧にでない)
2012年9月16日日曜日
- 35. アイキャッチを有効にする
functions.phpに以下の記述を追加します。
add_theme_support('post-thumbnails');
投稿のみ/固定ページのみ
アイキャッチを使う設定もできます。
add_theme_support( 'post-thumbnails', array( 'post' ) ); // 投稿のみ
add_theme_support( 'post-thumbnails', array( 'page' ) ); // 固定ページのみ
2012年9月16日日曜日
- 37. アイキャッチのサイズを指定する
functions.phpに以下の記述を追加します。
set_post_thumbnail_size(横,縦,切り抜き方);
一緒に切り抜き方も指定できます。
set_post_thumbnail_size(100,100,true);
2012年9月16日日曜日
- 39. メインループ内で使用する
ループ内に以下の記述を追加します。
the_post_thumbnail(サイズ指定);
サイズ指定を省略すると、
先ほど指定したサイズのアイキャッチが
表示されます。
the_post_thumbnail();
the_post_thumbnail( thumbnail );
2012年9月16日日曜日
- 40. サイズ指定に使えます
functions.phpで以下の文で定義した
新しいサイズ名も使えます。
add_image_size('新しいサイズ名', 幅, 高さ,切り抜き方 );
the_post_thumbnail( mini );
2012年9月16日日曜日
- 43. オリジナルループ内などで使用する
ループ内に以下の記述を追加します。
echo get_the_post_thumbnail(記事のID,サイズ指定);
サイズ指定を省略すると、先ほど指定したサイ
ズのアイキャッチが表示されます。
2012年9月16日日曜日
- 44. 使用例
<?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日日曜日
- 47. プラグインに組み込む
人気記事を表示するプラグイン、Popular Postsに
アイキャッチを表示させてみましょう。
http://rmarsh.com/plugins/popular-posts-plugin/
2012年9月16日日曜日
- 48. 出力部分をカスタマイズする
設定→Popular Posts→Output→
Output template:を編集します
2012年9月16日日曜日
- 49. 出力部分をカスタマイズする
[php: XXXXXX ;]で囲むとテーマと同じように
PHP構文を書くことができます。
このプラグイン内で使用可能な変数リストがサイド
バーに表示されているので、そこからPost_idを取
得する変数を選び、セットします。
2012年9月16日日曜日
- 50. 記述方法
以下の記述を追加します。
{php: echo get_the_post_thumbnail({postid},"サイズ指定");}
サイズ指定はこれまでと同様、thumbnailや
mediumなども指定できます。
{php: echo get_the_post_thumbnail({postid},"thumbnail");}
2012年9月16日日曜日
- 51. 関連記事表示にも導入
プラグインSimilar Postsを使用して
関連記事表示部分にもアイキャッチ画像を
表示させることができます。
設定方法は人気記事の時と同様です。
http://rmarsh.com/plugins/similar-posts/
2012年9月16日日曜日
- 53. 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日日曜日
- 55. 投稿やページにフ ルパスで書いて
困るシチュエーション
✦ サイトのURLが変わることになった!
✦ テスト環境ではhogehoge.com/test/に設置し
ていたが、本番環境ではhogehoge.com/で公
開するので絶対パスが変わってしまう
✦ ファイルアップローダーであげた画像は上書き
が面倒
2012年9月16日日曜日
- 56. 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日日曜日
- 57. 投稿/ページでの書き方
<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日日曜日
- 58. こんなに便利!
✦ function.php内の置き換えたいパスのURLを
変更だけでOK。
✦ 画像の差し替えがあったときは該当ディレク
トリの画像をFTPで上書きでOK
(ファイルアップローダーであげた画像の上書
きは地味に大変)
2012年9月16日日曜日
- 59. この方法の注意点
記事中に出てくる指定した文字列をすべて置換し
ます(この場合はimagepath)
そのため置き換える文字列は本文中に出てくるこ
とのないような文字列を設定しておいた方がいい
でしょう。
2012年9月16日日曜日
- 62. 使いこなして
サイト制作に役立ててくださいね!
2012年9月16日日曜日
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n