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

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

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

記事抜粋-1

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

今回はこのようにトップページやカテゴリーページ、タグページ、アーカイブページで抜粋記事にするカスタマイズをしていきますが、上手く表示させるために抜粋記事の補助機能を持つプラグイン「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つありました。

残された2つの課題

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

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

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

記事抜粋-2

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

記事抜粋-1

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

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. Kita

    再度質問失礼いたします。
    たぶんですが、カテゴリーを抜粋記事にしている途中(続きを読む・アイキャッチ画像)の設定の際に、記事内のリンクが細文字になってしまいました。しかし、CSSにはしっかり太文字にすると記述しています。content.phpのどこかになにか妨げるコードがあるのかなと思いましたが、原因が分からずで…。

    原因の方が分かれば、ご指摘いただければと思います。貴重なお時間をすいません。よろしくお願い致します。

  2. K子

    ありがとうございます。
    記述の順番がおかしくなっているかもしれません。
    もう一度初めから確認してみます。

  3. poko 投稿作成者

    >K子様

    コメントありがとうございます。CSSが反映されない原因ですが、幾つか基本的な部分を書いておきますね。

    まず1つ目。CSSは下に書いた記述(後に書いた記述)が優先されますので、同じ記述を2回書くと後の記述が反映されます。なので、子テーマの一番下にどんどんカスタマイズの記述をしていって下さい。

    2つ目は単純な記述ミスが原因の場合もあります。コロンとセミコロンの記述ミスや、括弧{}の閉じ忘れ、もしくはID名やクラス名が間違っていないか確認してみると良いと思います。

    3つめはブラウザのキャッシュです。CSSの記述をしたらブログを表示して「F5」を押してリロードしてみて下さい。もしくは別のブラウザで確認してみるといいかもしれません。特にブラウザでIEを利用している場合はCSSが上手く反映されていない場合もあります。

    以上基本的な部分ですが、確認してみて下さい。

  4. K子

    いつもお世話になっております。
    今はTwentyTwelveカスタマイズにあたふたしながら取り組んでいます。
    何か所か上手くできないところがありますので、分かる範囲でアドバイスいただけたらと思います。

    ・抜粋記事の一覧にした時にアイキャッチ画像の右側に文字が移動できない
    ・サイト全体の横幅やサイドバーの幅の変更ができない
    ・パンくずリストの設置はできるが横並びにならない

    一度ファイルを作り直しているのでプラグインをWP Multibyte Patchのみにしています。
    その影響でしょうか?
    基本が分かっていない初心者なのですみません。
    宜しくお願い致します。