WordPress Twenty Fourteenのトップページを抜粋記事表示にしました。プラグインなしでcssやphpファイルにコードを追記するだけの、とても簡単にできるカスタマイズのメモになります。記事が一覧になっていると巡回しやすくアクセスアップにも繋がりますね。
【 環境 】WordPressテーマ : Twenty Fourteen
スポンサーリンク
[adSense]
準備
１．事前に投稿記事にはアイキャッチ画像を設定しておきます。
２．Twenty Fourteenのデフォルトで表示される大きいアイキャッチ画像を非表示にします。
content.php（子テーマ）を編集します。
[php firstline=”13″ highlight=”14″]
<article id= "post-<?php the_ID(); ?> " <?php post_class(); ?>>
<?php twentyfourteen_post_thumbnail(); ?>
<header class= "entry-header ">
[/php]
14行目コードを…
[php firstline=”14″]
<?php //twentyfourteen_post_thumbnail(); ?>
[/php]
上記のように「//」を挿入することでコメントアウトします。
デフォルトのアイキャッチ画像が非表示になったことを確認できればOKです。
詳しくは、簡単！Twenty Fourteenのアイキャッチ画像を非表示にする方法 ｜ WordPress カスタマイズをご参照ください。
テキスト部分を抜粋表示してみよう！
テキストの抜粋表示することからはじめます。
再びcontent.php （子テーマ）を編集します。
[php firstline=”47″]
<?php if ( is_search() ) : ?>
<div>
<?php the_excerpt(); ?>
</div><!– .entry-summary –>
[/php]
47行目は、is_search（検索結果）のページの場合抜粋表示にするコードになっています。
ここに…
is_home：（トップページ）
is_archive：アーカイブ（日付、タグ）
を加えて上記のページをひらくと抜粋表示になるように書き換えます。
[php firstline=”47″]
<?php if ( is_search() || is_home() || is_archive() ) : ?>
<div>
<?php the_excerpt(); ?>
</div><!– .entry-summary –>
[/php]
これで、それぞれのページでテキストの抜粋表示ができます。
詳しくは「WordPress 全文表示の投稿記事を抜粋表示に変更する。1/2 ｜ WPカスタマイズをご参照ください。
アイキャッチ（サムネイル）画像を表示してみよう！
さらにcontent.php（子テーマ）ファイルを編集して、抜粋表示のためのアイキャッチ（サムネイル）画像のコードを挿入します。
[php firstline=”42″]
edit_post_link( __( ‘Edit’, ‘twentyfourteen’ ), ‘<span class="edit-link">’, ‘</span>’ );
?>
</div><!– .entry-meta –>
</header><!– .entry-header –>
[/php]
44行目と45行目の間に…
[php]
<?php if( is_search() || is_home() || is_archive() ) { ?>
<div class="thumb01">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(array(250,167)); ?>
</a>
</div>
<?php } else { ?>
<?php } ?>
[/php]
上記コードを追記します。
検索結果、トップ、アーカイブのページの場合、リンクを張った幅250pxのサムネイルを表示、その他のページの場合は何もしないという内容になっています。
この段階でこちらの画像のようなレイアウトで表示されていれば順調です。テキストをアイキャッチ画像の隣に配置したり、体裁はcss「thumb01」で整えます。
アイキャッチ画像の大きさも変えて設定することもcssで可能です。
cssに追記しよう！
いろいろ自分の好みで配置などを設定します。参考までにテキスト部分をアイキャッチ画像の右に配置するには…
[css]
.thumb01 img {
float: left;
margin:10px 20px 10px 0;
}
[/css]
ひとこと
実は何回かこのブログで記事にしているTwenty Fourteenの抜粋記事表示。はじめのころは時間がなくてプラグインに頼ったりしてましたが、結構あっさりとカスタマイズできることが最近になってやっとわかりました。
content.phpとcssを編集するだけなので、子テーマにする方法さえおさえていれば昔の自分でもできる内容だと思います。プラグインは極力外していきたいので、この方法はベストです。
