WordPressでサムネイルを活用する

WordPressも3くらいからサムネイルを簡単にテンプレの中に入れれるようになりましたよね。サムネイルを入れる事で記事の内容が分かりやすくなりますし、イメージによる訴求効果もあるのではないかと思ったり思わなかったりします。

公式サイトによると、正確には

「投稿サムネイルとは、バージョン 2.9から導入されたテーマ機能で、ブログ投稿・固定ページ・カスタム投稿タイプのいずれかを描写するために選択された画像のことです。 この画像を表示するかどうかはテーマによります。「マガジン風」テーマで各投稿に画像が含められている場合は特に便利です。 」

という事になっているので、2.9かららしいですw

サムネイル機能を有効にするためには、function.phpに以下の記述をします。

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true);

if ( function_exists( ‘add_theme_support’ ) ) { ~}と記載してあるものもありますが、コレ入れちゃうと現行バージョンだとサイズ指定が無視されて、UPしたサイズのままで表示されてしまうみたいなので、上記2行だけの記載で大丈夫みたいです。

ちなみに、( 150, 150, true)は横150ピクセル・縦150ピクセルで画像をトリミングして表示するという事ですね。

trueがfalseか空白なら、縦横どちらか大きなサイズの方に合わせて縮小して表示されますんで、縦長になったり横長になったりして、表示がバラバラで気持ち悪いので個人的にはtrue推奨です。

で、サムネイルを表示させたいテンプレート(archive.phpとかindex.phpあたりでしょうね)の該当箇所に、

<?php the_post_thumbnail(); ?>

を記載。

ただこれだけw

後は記事を投稿する際にアイキャッチ画像を設定してあげればOKです。

で、先ほどの<?php the_post_thumbnail(); ?>を入れた要素に合わせてcssを追加。このサイトの場合は#section部分にサムネイルを入れ込んだので、

#section img.attachment-post-thumbnail {
margin: 20px 20px 20px 0;
float: left;
border: 1px dotted #bebebe;
padding: 5px;
max-width: 100%;
height: auto;
}

という具合で整形しとります。

投稿日:2012年 04月 24日 | カテゴリー:WordPress関連

« »