Twenty Twelveのトップページやカテゴリーページを抜粋記事の一覧表示にする

今回はTwentyTwelveのトップページやカテゴリーページ等記事一覧が表示されるページを抜粋記事にしていくカスタマイズです。

WordPressの初期設定では1ページに表示される記事数が10記事になっていると思います。しかし、10記事をそのままズラズラと並べられると一番下に行くまで非常に時間がかかりますよね。記事一覧の意味がない!そこで活躍するのが抜粋記事というわけです。

記事抜粋-1

このように記事の抜粋ができると本当に記事一覧って感じがします。訪問者も目的の記事を探しやすいはずです。

今回はこのようにトップページやカテゴリーページ、タグページ、アーカイブページで抜粋記事にするカスタマイズをしていきますが、上手く表示させるために抜粋記事の補助機能を持つプラグイン「WP Multibyte Patch」を「有効化」しておいて下さい。

このプラグインは最初からインストールされていると思います。

スポンサーリンク

TwentyTwelveの記事一覧ページを抜粋記事にカスタマイズ

では早速カスタマイズしていきましょう。今回使うのは「content.php」ですので、子テーマに親テーマの「content.php」をコピーして追加しておいて下さい。「content.php」を開いて次の記述を探します。

この部分が抜粋記事を表示させるコードです。ここにトップページやカテゴリーページ等の抜粋記事にしたいページを付け足します。先ほどの部分をこのコードに書き換えて下さい。

ちょっと右に長くなってますのでスクロールしてコピーして下さい。これは条件分岐と言ってもしトップページなら~、アーカイブページなら~という指定ができます。この記述で各記事一覧ページが抜粋記事になっているはずです。簡単でしたね。しかし、これで満足してはいけませんよ。私はこの時点で気に入らない点が2つありました。

残された2つの課題

記事一覧を抜粋記事にするのは簡単でしたが、さらに2つの不満がでました。具体的には次の2点です。

  1. 「続きを読む」という表示が欲しい
  2. 記事一覧ページで設定したアイキャッチ画像が表示されてない

1番目の説明ですが、抜粋記事にしたら「続きを読む」という表示になると思っていたのですが、実際はこのようになってます。

記事抜粋-2

[…]←なんだコレ?クリックもできないし。という訳でこれも改良する事にしました。
2番目に関しては抜粋記事にアイキャッチ画像が表示されてませんでしたので、これも改良する事にしました。結果的にはこの2つともクリアしてこのように表示する事ができました。

記事抜粋-1

抜粋記事の左に小さなサイズ(サムネイルサイズ)のアイキャッチ画像を表示させて、きちんと「続きを読む」も表示させることもできました。この2点のカスタマイズについても記事にしますので順番に読んでみて下さいね。

最終更新日:2016/02/27

Twenty Twelveのトップページやカテゴリーページを抜粋記事の一覧表示にする”に20件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. 初心者

    お見事です、綺麗に直りました。ありがとうございました。

    機械音痴の私でも、しげぞうさんのサイトのおかげで拙いながらもブログが運営できるようになりました。大変感謝しております。

  2. しげぞう 投稿作成者

    初心者様

    CSSで以下コード追加してみて下さい。

    追加して余白がなくなると思います。多分大丈夫とは思うのですが、一応他の個別ページとか別の部分に影響していないかも確認してみて下さい。