投稿にサムネイル画像を追加します。
[markdown]
## アイキャッチ機能とは
GUI管理ツールで変更できるサムネール機能。
自作する場合など、テーマで機能を有効にする必要がある。
> * [画像ファイルの大/中/サムネイルのサイズの設定 – WordPressの使い方](http://www.adminweb.jp/wordpress/media/index8.html)
「ダッシュボード ＞ 設定 ＞ メディア」で、投稿画面で使う画像のサイズを設定できます。
また、生成された画像は、以下で確認できます。
/wp-content/uploads/
* filename-162×100.png
* filename-324×130.png
* filename.png
画像のリサイズの他に、オリジナルファイル名に設定したサイズも付与されます。
## アイキャッチ機能を有効にする
アイキャッチ機能を有効にするには、functions.php に下記を記載します。
> * [関数リファレンス/add theme support – WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#.E6.8A.95.E7.A8.BF.E3.82.B5.E3.83.A0.E3.83.8D.E3.82.A4.E3.83.AB)
“`php:functions.php
add_theme_support( ‘post-thumbnails’ );
“`
必要なテーマファイル内で `the_post_thumbnail();` を追加すると、そこにアイキャッチが表示されます。
“`php:index.php
“`
例えばサムネールがなければ noimage を表示する。
“`php
; ?>/img/noimage.png”><br /> <?php endif; ?><br /> “`</p><p>## 標準で用意されているサムネイルとそのサイズ</p><p>「ダッシュボード ＞ 設定 ＞ メディア」の設定は、このように引っ張れます。</p><p>> * [投稿サムネイル – WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/%E6%8A%95%E7%A8%BF%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB)<br /> > * [テンプレートタグ/the post thumbnail – WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_post_thumbnail)</p><p>“`php<br /> // without parameter -> Thumbnail<br /> the_post_thumbnail();<br /> // サムネイル (デフォルト 150px x 150px ：最大値）<br /> the_post_thumbnail(‘thumbnail’);<br /> // 中サイズ （デフォルト 300px x 300px ：最大値）<br /> the_post_thumbnail(‘medium’);<br /> // 大サイズ （デフォルト 640px x 640px ：最大値）<br /> the_post_thumbnail(‘large’);<br /> // フルサイズ （アップロードした画像の元サイズ）<br /> the_post_thumbnail(‘full’);<br /> “`</p><p>functions.php 内に以下を追記すると、サムネイルの初期値を設定できます。<br /> true オプションを付けると、縦横比にあわせて縮小後、はみ出した部分をクロップしてくれます。</p><p>“`php<br /> set_post_thumbnail_size(324, 200, true);<br /> “`</p><p>medium, large サイズの初期値の定義は分かりませんでした。<br /> ご存じの方いましたら教えてください。</p><p>> * [WordPressテーマのfunctions.phpでは$content_widthを定義するべし | firegoby](http://firegoby.jp/archives/2526)</p><p>## カスタムサイズを追加する</p><p>> * [テンプレートタグ/the post thumbnail – WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_post_thumbnail)</p><p>`the_post_thumbnail(()` にオプションを渡すと、表示されるサイズを指定することができます。</p><p>“`php<br /> the_post_thumbnail( array(100,100) );<br /> “`</p><p>また、functions.php に必要なサイズを `add_image_size()` で定義して利用することができます。</p><p>> * [投稿サムネイル – WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/%E6%8A%95%E7%A8%BF%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB)</p><p>“`php:functions.php<br /> function eyecatch() {<br /> add_theme_support( ‘post-thumbnails’, array(‘post’) );<br /> set_post_thumbnail_size(240, 160, true);<br /> add_image_size(‘index-post-thumbnail’, 70, 70, true);<br /> }<br /> add_action( ‘after_setup_theme’, ‘eyecatch’ );<br /> “`</p><p>追加したサイズは、下記のように呼び出せます。</p><p>“`php:index.php<br /> <?php the_post_thumbnail('index-post-thumbnail'); ?><br /> “`</p><p>## サムネイルにクラスを追加する</p><p>> * [テンプレートタグ/the post thumbnail – WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_post_thumbnail)</p><p>“`php<br /> the_post_thumbnail(‘thumbnail’, array(‘class’ => ‘alignleft’));<br /> “`</p><p>## サムネイル画像を一括で作り直す</p><p>サムネイルを作り直すプラグインがあるようで便利そうです。</p><p>> * [WordPress › Regenerate Thumbnails « WordPress Plugins](https://wordpress.org/plugins/regenerate-thumbnails/)<br /> > * [思ったより簡単！WordPressのサムネイルを別サイズも含め作り直す方法！！ | 株式会社LIG](http://liginc.co.jp/web/wp/plug-in/25595)</p><p>## 補遺</p><p>> * [アイキャッチ画像を表示させる方法 | WordPressカスタム](http://www.wapoo-custom.com/custom_manual/eyecatch_image/)<br /> > * [アイキャッチ画像 | Web Design Leaves](http://www.webdesignleaves.com/wp/wordpress/150/)<br /> > * [WordPressのfunctions.phpに書いておくといいかもしれないコードいろいろ](http://webdesignrecipes.com/wordpress-functions-php-snipets/)</p><p>画像の出し分け</p><p>> * [WordPress アイキャッチ画像のサイズを出し分ける :: backyard.weblog](http://backyard.chocolateboard.net/201112/wordpress-the-post-thumbnail-size)<br /> > * [WordPressのアイキャッチ画像 | Webクリエイターネット](http://www.webcreator-net.com/tips_memo/wordpress/20120412082842.html)<br /> [/markdown]</p></div></article><nav class=)
投稿ナビゲーション
