今回はTwentyTwelveのトップページやカテゴリーページ等記事一覧が表示されるページを抜粋記事にしていくカスタマイズです。
WordPressの初期設定では1ページに表示される記事数が10記事になっていると思います。しかし、10記事をそのままズラズラと並べられると一番下に行くまで非常に時間がかかりますよね。記事一覧の意味がない！そこで活躍するのが抜粋記事というわけです。
このように記事の抜粋ができると本当に記事一覧って感じがします。訪問者も目的の記事を探しやすいはずです。
今回はこのようにトップページやカテゴリーページ、タグページ、アーカイブページで抜粋記事にするカスタマイズをしていきますが、上手く表示させるために抜粋記事の補助機能を持つプラグイン「WP Multibyte Patch」を「有効化」しておいて下さい。
このプラグインは最初からインストールされていると思います。
TwentyTwelveの記事一覧ページを抜粋記事にカスタマイズ
では早速カスタマイズしていきましょう。今回使うのは「content.php」ですので、子テーマに親テーマの「content.php」をコピーして追加しておいて下さい。「content.php」を開いて次の記述を探します。
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
この部分が抜粋記事を表示させるコードです。ここにトップページやカテゴリーページ等の抜粋記事にしたいページを付け足します。先ほどの部分をこのコードに書き換えて下さい。
<?php if ( is_search() || is_home() || is_archive() ) : // Only display Excerpts for Search ?>
ちょっと右に長くなってますのでスクロールしてコピーして下さい。これは条件分岐と言ってもしトップページなら～、アーカイブページなら～という指定ができます。この記述で各記事一覧ページが抜粋記事になっているはずです。簡単でしたね。しかし、これで満足してはいけませんよ。私はこの時点で気に入らない点が２つありました。
残された２つの課題
記事一覧を抜粋記事にするのは簡単でしたが、さらに２つの不満がでました。具体的には次の2点です。
- 「続きを読む」という表示が欲しい
- 記事一覧ページで設定したアイキャッチ画像が表示されてない
1番目の説明ですが、抜粋記事にしたら「続きを読む」という表示になると思っていたのですが、実際はこのようになってます。
[…]←なんだコレ？クリックもできないし。という訳でこれも改良する事にしました。
2番目に関しては抜粋記事にアイキャッチ画像が表示されてませんでしたので、これも改良する事にしました。結果的にはこの2つともクリアしてこのように表示する事ができました。
抜粋記事の左に小さなサイズ（サムネイルサイズ）のアイキャッチ画像を表示させて、きちんと「続きを読む」も表示させることもできました。この2点のカスタマイズについても記事にしますので順番に読んでみて下さいね。
コメント
お見事です、綺麗に直りました。ありがとうございました。
機械音痴の私でも、しげぞうさんのサイトのおかげで拙いながらもブログが運営できるようになりました。大変感謝しております。
初心者様
CSSで以下コード追加してみて下さい。
.site-content article { border: none; margin-bottom: 0 !important; }追加して余白がなくなると思います。多分大丈夫とは思うのですが、一応他の個別ページとか別の部分に影響していないかも確認してみて下さい。
お返事どうもありがとうございます。
こちらになります。
お時間ありましたら、よろしくお願いします。
初心者様
コメントありがとうございます。サイトを見てみないと原因はわかりませんのでのURLを教えて下さい。コメント公開時にはURLは削除します。
アフィリエイト初心者のものです。貴サイトを参考に、下手なりにブログを運営しております。
この記事を参考に、トップページで抜粋記事の一覧表示をしているのですが、記事と記事の間の間隔が異常に広くなり直りません。
思い当たることといえば、設定-共有からソーシャルボタンを設置していましたが、それをなくしました。
ネットでいろいろ検索してもでてこず、自分の知識不足もあり解決できません。なにかアドバイスはないでしょうか…？？
しげぞう様
返信ありがとうございます。
ご指摘いただいた「content.php」の編集について最初からやり直したところ、
無事、正しく表示することができました。
ありがとうございます。
まめしば様
サムネイルとアイキャッチ画像が重複するのはアイキャッチ画像を呼び出すコードが重複しているからだと思われます。具体的な部分は実際のファイルが見れないのであれですが、content.phpでアイキャッチ画像を呼び出すコードを探してみると原因が分かるかと思います。
しげぞう様
お世話になります。
先日から無料ブログの件で何度か助けていただきましたが
最近はWordPressに取り組んでいます。
その中で、トップページのサムネイル表記と抜粋記事にすることは
できたのですが、アイキャッチ画像が重複してしまいました。
どのような原因が考えられるか教えていただけないでしょうか。
見ていただいた方が早いと思いますのでURLを添付します。
お手数ですがよろしくお願いします。
らんらん様
返信ありがとうございます。私の方が間違ってましたね、すみません！コードは元に戻しておいてください。もしどうしてもはずせないようであればURLがあればチェックできますのでその時はまたコメントください。
しげぞう様、素早い対応本当に感謝致します。
サムネイルの件、何とか解決できました。ご迷惑をおかけして申し訳ありません。
トップページのカテゴリー等の件ですが、これに関してはアドバイスの通りソースコードを外してみましたが、隠せませんでした。
もうちょっと弄ってみようとおもいます