投稿にアイコン表示を追加してみた

ご覧の通り、タイトルの脇にアイコンを追加しました。

これは、WordPress2.9から実装されている投稿サムネイル（3.0からの呼称は、アイキャッチ画像）を利用したものです。

現在、Simple Colorsは、WordPressのデフォルトテーマ Twenty Tenの子テーマを使っているので（見れば分かるか・・・）、アイキャッチ画像のサポートは元からなされています。ただし、Twenty Tenは、“詳細表示の場合に”、“幅940px以上の画像が指定された場合”、ヘッダー画像の部分にアイキャッチ画像が表示されるようになっています。

これはこれで、良い機能なのですが、ちょっと使いにくいというか・・・

そんな訳で、2.9時代のネーミング通り投稿サムネイルっぽく利用してみることにしました。

テーマが投稿サムネイルをサポートしている事を指定するコード（CODE 1）は、親テーマのTwenty Tenに記述してあるので、子テーマ側で指定する必要はなし。

CODE 1

add_theme_support( 'post-thumbnails' );

サイズを指定するset_post_thumbnail_sizeをテーマのfunctions.phpに追加・・・と思いきや、functions.phpは、子テーマ→親テーマの順に読み込まれるので、子テーマに記述しても、親テーマの指定で上書されてしまうので使えません。

そこで、子テーマのfunctions.phpが先に読み込まれることを利用し、set_post_thumbnail_sizeを内包するtwentyten_setup関数を子テーマで指定してしまうことにします。

Twenty Tenのfunctions.phpの if ( ! function_exists( 'twentyten_setup' ) ): から
endif; までを子テーマのfucntions.phpにコピーして、set_post_thumbnail_sizeのサイズ部分を書き換えます。

set_post_thumbnail_size(  58, 58, true );

これで、サイズ指定が58px四方になるので、今度はテーマファイルの修正です。

修正するのは、header.php、loop.php、single.phpの３ファイル。（そのうちpage.phpも）
これまでは、Twenty Tenのコードをそのまま使っていたので、テーマのphpファイルは、functions.phpだけだったのですが、異なるコードにするため、これらのファイルをTwenty Tenからコピーしてきます。

header.phpは、アイキャッチ画像部分の分岐をざっくり削除。

CODE 2
■修正前

<?php
 // Check if this is a post or page, if it has a thumbnail, and if it's a big one
 if ( is_singular() &&
 has_post_thumbnail( $post->ID ) &&
 ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
 $image[1] >= HEADER_IMAGE_WIDTH ) :
 // Houston, we have a new header image!
 echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
 else : ?>
 <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
 <?php endif; ?>

■修正後

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

loop.phpとsingle.phpには、投稿サムネイルを表示するコードを追加します。今回は、タイトルの左に表示したかったので、併せてdivなども追加しています。（下記コードはloop.phpのもの）

CODE 3

<?php if ( has_post_thumbnail() ) : ?>
 <div>
 <?php the_post_thumbnail(); ?>
 </div>
 <div>
 <?php endif; ?>
 <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 <div>
 <?php twentyten_posted_on(); ?>
 </div><!-- .entry-meta -->
 <?php if ( has_post_thumbnail() ) : ?>
 </div><!-- .entry-header -->
 <?php endif; ?>

最後に、子テーマのstyle.cssに .post-thumbnail と .entry-header の指定を追加して完了です。

CODE 4

#content .post-thumbnail {
 position: relative;
 margin-top: -58px;
 top: 58px;
 left: -20px;
 width: 58px;
 height: 58px;
}

#content .entry-header {
 margin-left: 45px;
 min-height: 58px;
}