WordPressの投稿一覧で記事を抜粋表示にする方法


新着順の投稿一覧や、アーカイブページなんかで、複数の記事を一覧表示した時に、それぞれの記事を抜粋表示にして、ユーザビリティを高める方法をご紹介します。

お使いのテーマが、デフォルトで対応していない場合なんかに役立つのではないでしょうか。

抜粋表示にする方法

WordPressでは、記事を抜粋表示にする場合、目的によってふたつの方法を使い分けます。

1.個別の記事単位で任意の場所から抜粋する

2.投稿一覧の全ての記事を一定のルールのもと抜粋する

それぞれの方法を解説してみましょう。

1. 個別の記事単位で任意の場所から抜粋する

この方法は、個別の記事ごとに、任意の場所で抜粋表示にしたい時に適しています。

使い方はとっても簡単で、投稿編集画面で任意の場所に <!--more--> タグを挿入するだけです。

<!--more--> タグは、『moreクイックタグ』と呼びます。任意の場所に、このタグを挿入することで、好きな場所から抜粋表示にできます。

moreクイックタグの挿入方法は、投稿編集画面をテキストモードにして、moreボタンをクリックするだけでOKです。

しかし、今回は「投稿一覧で記事を抜粋表示にする方法」が目標なんで、このやり方だと、すべての記事に対してmoreクイックタグを設定してやらなければならず、かなり面倒ですよね。

つまり、次にご紹介する一定の決まりをもって抜粋表示させるやり方が、今回の目的にはあっているようです。

2. 投稿一覧の記事を一定のルールのもと全て抜粋する

実際の具体例を示した方が分かりやすいので、WordPress公式テーマ、Twenty Seventeenのトップページ(新着記事一覧)とアーカイブページを抜粋表示に変更してみます。

他のテーマでも、同じような方法でカスタマイズできるはずなんで参考にしてください。

公式テーマTwenty Seventeenの投稿一覧を抜粋表示にする

まずは、トップページ(新着記事一覧)からです。親テーマのindex.phpを、丸ごと子テーマにコピーしてください。

そして、ポイントは45行目の get_post_format( ) になります。

/* Start the Loop */
while ( have_posts() ) : the_post();

/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
 get_template_part( 'template-parts/post/content', get_post_format() );

endwhile;

 

45行目の get_post_format( ) を見つけたら、この部分を ‘excerpt’ に変更してください。

/* Start the Loop */
while ( have_posts() ) : the_post();

/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
 get_template_part( 'template-parts/post/content', 'excerpt' );

endwhile;

‘excerpt’ は、投稿を抜粋表示にするための関数です。 get_post_format( ) をコレに書き換えるだけで抜粋表示に変更できるのです。

内容を簡単に説明すると、

get_template_part( ‘template-parts/post/content’ は、

template-partsディレクトリ → postディレクリ → content.php

の順でディレクリやファイルを呼び出してくれという命令文です。

そして、その後に続く get_post_format() は、投稿フォーマットを返す関数です。

投稿フォーマットとは、管理画面の右側で選択できる「フォーマット」のことです。

つまり、親テーマのコードの意味は、content.phpを読み込んだ後、設定した投稿フォーマットで表示してくれってことなんですね。

しかし、今回の場合、投稿フォーマットで表示するのではなく、抜粋表示で表示したいので、子テーマでは、‘excerpt’ に変更したという訳です。

次にアーカイブページです。これも先ほどと同じように、親テーマのarchive.phpを子テーマに丸ごとコピーして編集していきます。

編集する箇所は40行目になります。

get_template_part( 'template-parts/post/content',  get_post_format() );

これを以下に変更します。トップページの時とまったく同じですね。

get_template_part( 'template-parts/post/content', 'excerpt');

これで、アーカイブページも抜粋表示にすることが出来ました。

少し複雑だったかもしれませんが、get_post_format( ) を探し出して、‘excerpt’ に変更すると憶えてください。

カード風デザインにするCSS

最後におまけですが、ただの抜粋表示じゃ味気ないので、Twenty Seventeenの子テーマのCSSに少し手を加えて、カード風のデザインにしてみました。

記事ごとの独立性が強調されて、見やすくなると思います。

以下のコードをスタイルシートにコピーしてください。

.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: 8px;
	margin-bottom: 4em
}

borderで周りを囲っただけですが、どうでしょう?

以上、簡単ですが、「投稿一覧で記事を抜粋表示にする方法」でした。

“WordPressの投稿一覧で記事を抜粋表示にする方法” への6件の返信

  1. 大変勉強になりました。
    こちらのサイトを利用したおかげできれいなサイトを作ることができそうです。(^^)
    ありがとうございました。

    1. たかたかさん

      温かいコメントありがとうございます!
      とっても励みになります。サイト制作、頑張ってくださいね!

  2. はじめまして。

    TwentySeventeenのカスタマイズ情報が少ない中、nobbiさんの情報はとてもありがたいです。
    図々しいのですが、自力で解決できず、すがる思いでコメントさせていただきました。

    カード風のデザインにするCSSを記述したところ、アーカイブページには反映されましたが、トップページには反映されません。Webサイト欄に記入したサイトです。

    勝手を申し上げますが、何卒よろしくお願いいたします。

    1. まささん
      コメントありがとうございます。サイトを拝見させていただきました。
      ドメインを教えていただけると、問題点を見つけやすいので大変助かります。

      ソースコードのコメントなどが削除されてところなど見ると、ソースを圧縮するプラグインをお使いなのでしょうか?
      もし圧縮系プラグインをお使いなら、以下の行数はWebインスペクタで見た行数なので、実際の行数とは違う可能性もあるので悪しからず。

      9iycw.cssの「3195行目」から「3203行目」に書かれている’border’と’margin-bottom’でデザインの変更をされているようですね。
      しかし、実際は「1410行目」と「1412行目」の’border’と’margin-bottom’の記述が反映されているのが原因です。
      なので、「1410行目」と「1412行目」の二行をコメントアウトすれば、アーカイブページと同じように表示されるはずです。

      ですが、ここでひとつの謎が。。。
      通常、CSSは後に書かれた記述が反映されるはずですが、何故かそうなっていない。。。。????
      正直、私にも何故だか解りません。何かに問題があるはずなんですが。

      他に気になった点もあります。

      ご存知かもしれませんが、CSSファイルは他のPHPファイルと違って、親テーマのCSSを子テーマのCSSに丸々コピーする必要はありません。
      子テーマに記述するのは、親テーマのCSSの変更したい部分(差分)だけでオーケーです。
      けれど、まささんのCSS、親テーマをコピーして追記したりしていませんか?

      もしも、まだ子テーマを作っていないのであれば、親テーマはいじらずに、子テーマを作って作業することを強くお勧めします。

  3. 早々に返信をいただきありがとうございます。
    圧縮系のプラグインはWP Fastest Cacheを使っています。

    謎なのですね。
    子テーマのCSSはおっしゃる通りにしています。
    プラグインなど思いつくことをやってみます。

    ありがとうございました。

    1. まささん
      キャッシュ系プラグインでピンときたのですが、お使いのブラウザのキャッシュが問題なのではありませんか?

      違うブラウザでサイトを確認してみるか、プライベートブラウジングでサイトを開いてみたらどうでしょう。
      あるいは、プラグインを停止するのも有効かもしれません。

      ちなみに、私の言っている圧縮系プラグインとは、ソースコードのコメントアウトしている部分や、スペースを取り除いたりしてくれるモノを指しています。

      参考になさってください。
      ちなみに使っているプラグインは「Autoptimize」といいます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です