WordPress 記事一覧の本文を抜粋する3つの方法

WordPressで自分用のテーマが欲しくて自作してるのですが、記事一覧を取得してトップページに表示したら、記事本文の抜粋ができてない状態で記事一覧を表示させてしまいました。

さすがに自分用のWordPressテーマでも記事一覧に表示してる本文は抜粋しておかないとと思い、本文を抜粋する3つの方法をやってみました。

WordPressで記事一覧の本文を抜粋する3つの方法のうち、どれか一つでも誰かの参考になればと思い記事にまとめておきます。

1. WordPressの記事一覧で本文が長くなってしまう
2. 記事一覧の本文を抜粋する3つの方法
3. moreタグで本文の抜粋を投稿ごとする
4. the_excerpt()で本文を取得して抜粋
5. WP Multibyte Patchで本文を抜粋する
6. まとめ

WordPressの記事一覧で本文が長くなってしまう

WordPressで記事一覧を取得するときにループの中にthe_content()を記述すると記事一覧の本文を表示することができますが、the_content()で表示した場合は、本文が抜粋されることなく全部表示されて長くなってしまいます。

例えば以下のようにループさせてthe_content()をWordPressのindex.phpに書いた場合です。

<?php if( have_posts()) :?>
<?php while( have_posts() ) : the_post(); ?>
<div class="card_inner">
    <a class="z" href="<?php the_permalink(); ?>">
        <div class="card_img">
            <?php if( has_post_thumbnail() ): ?>
            <?php the_post_thumbnail('medium'); ?>
            <?php endif; ?>
        </div>
        <div class="card_text">
            <?php the_title( '<h2>', '</h2>' ); ?>
            <?php the_content(); ?>
        </div>
    </a>
</div>
<?php endwhile;?>
<?php endif;?>

WordPress関数のthe_content()だけで取得した記事一覧は本文が長い。

投稿ごとの本文を全て表示するため物凄く長いトップページに仕上がり、いくら下にスクロールしてもトップページが終わらない。フッターにたどり着けないんですね…

長い本文を抜粋する必要があります。抜粋とは今回の場合なら、ループで取得する記事本文の要所を抜き出して表示することです。必要なら抜粋をした本文の文字数制限ができるようにもしたいです。

そのためにできる方法としては3つの方法があります。

記事一覧の本文を抜粋する3つの方法

WordPressで記事一覧の本文を抜粋する方法は以下の3つです。

moreタグで本文を投稿ごとに抜粋
the_excerpt()で本文を取得して抜粋
WP Multibyte Patchで本文を抜粋

3つのどの方法でも念のためWP Multibyte Patchプラグインを有効にしておくといいです。

WP Multibyte Patchプラグインを有効にしておく理由として、日本語のような文字の間を半角スペースで区切らない言語は単語を判定できないことがあるので、抜粋ができずに、これから説明する抜粋する方法でも本文のほとんどが出力されてしまう可能性があるからです。

moreタグで本文の抜粋を投稿ごとする

まず1つめの方法として、WordPressの記事一覧をthe_content()で取得した状態のままmoreタグで本文を投稿ごとに抜粋する方法を説明します。

moreタグで本文の抜粋をするときは、WordPressの投稿編集で抜粋を設定します。

WordPressの投稿編集画面でブロックの「レイアウト要素」の中にある「続きを読む」を使用します。

そしてブロックの「レイアウト要素」の中にある「続きを読む」をクリックすると、上の画像のように文章間が区切られます。

文章の区切りは投稿編集の画面で抜粋したい文字の下の位置にmoreタグを挿入します。

例として「Nice World!」という投稿タイトルの本文にmoreタグで抜粋したのが以下の画像です。

「Nice World!」の投稿にはmoreタグで本文を抜粋したので、記事一覧では、投稿画面でmoreタグをつけた下部分の本文が省略されて、moreタグをつけた上部分が記事一覧の本文に抜粋文として表示できます。

moreタグで本文を抜粋した場合、記事一覧で表示する本文の抜粋を投稿ごとにコントロールすることができるのが良い点かと思います。

その反面で、投稿一つ一つにmoreタグをつけないといけないので、効率の悪さを感じてしまう場合もあります。

その場合は、次に説明する記事一覧の本文を抜粋する方法がWordPressではおすすめできます。

the_excerpt()で本文を取得して抜粋

2つめの方法としてthe_excerpt()で本文を取得して抜粋する方法です。

WordPressのthe_excerpt()で記事一覧の本文を取得するループの段階でまとめて抜粋することができます。

<?php the_excerpt(); ?>

the_excerpt()はWordPressで用意されてる関数です、使用するときはループの中で使用します。

<?php if( have_posts()) :?>
<?php while( have_posts() ) : the_post(); ?>
<div class="card_inner">
    <a class="z" href="<?php the_permalink(); ?>">
        <div class="card_img">
            <?php if( has_post_thumbnail() ): ?>
            <?php the_post_thumbnail('medium'); ?>
            <?php endif; ?>
        </div>
        <div class="card_text">
            <?php the_title( '<h2>', '</h2>' ); ?>
            <?php the_excerpt(); ?>
        </div>
    </a>
</div>
<?php endwhile;?>
<?php endif;?>

ループの中で記事一覧を取得するときのthe_content()をthe_excerpt()に変更して記事一覧を取得します。

the_excerpt()に変更すると、ループで取得した全ての記事一覧の本文が110文字で抜粋することができます。このとき投稿編集で本文にmoreタグをつけてる位置が110文字より前にある場合は、記事一覧で以下の画像のようになります。

抜粋は110文字で抜粋ではなくmoreタグがある部分までの抜粋になりました。

このとき私が確認したところ投稿ページでもmoreタグが効いて抜粋されたので、the_excerpt()で本文を取得して抜粋した場合はmoreタグを使う投稿ページを確認して必要なら外す方がいいですね。

WordPressで記事一覧の本文をthe_excerpt()で抜粋したら、110文字で抜粋される文字制限を好きにコントロールできるようにしておきます。

記事一覧の抜粋文字数の制限をコントロールする方法はfunctions.phpに以下を記述します。

function new_excerpt_mblength($length) {
    return 20;
}
add_filter('excerpt_mblength', 'new_excerpt_mblength');

PHPで関数名を書き、excerpt_mblengthにフィルターフックして抜粋文字数をreturnで返してあげます。

return 20;の部分の数字が何文字で抜粋するか決められる部分なので、それぞれ記事一覧に表示する投稿本文の抜粋文字数を決めてください。

例えば記事一覧の本文を20文字で制限した意味のわからない抜粋文字数にすると上の画像のようになります。

そして、おまけみたいな感じになりますが記事一覧に「続きを読む」を表示する場合は以下のPHPです。

function my_excerpt_more( $more ) {
    return ' <a class="x" href="'. get_permalink( get_the_ID() ) . '">続きを読む</a>';
}
add_filter( 'excerpt_more', 'my_excerpt_more' );

the_excerpt()で本文を取得して抜粋する方法は、「抜粋文字数のコントロール」と「続きを読むを違う表現にする」ときに、テーマのfunctions.phpだけでコード管理できるので実装後の管理がしやすい方法として便利です。

WP Multibyte Patchで本文を抜粋する

WordPressで記事一覧の本文を抜粋する3つめの方法は、WordPressのプラグイン「WP Multibyte Patch」を活用して本文の文字数を好きに制限して抜粋します。

WP Multibyte Patchで本文を抜粋するには、WP Multibyte Patchのファイルを編集します。

WP Multibyte Patchのファイルで記事一覧の本文を110文字で抜粋できるようにしてるファイルは、wpmp-config-sample-ja.phpです。

wpmp-config-sample-ja.phpをコピペで複製し、複製側ファイル名をwpmp-config.phpに変更します。

/wp-content/wpmp-config.php

次にファイル名を変更したwpmp-config.phpをwp_contentフォルダに入れます。

そしてテキストエディタでwpmp-config.phpを開きます。

/**
* BuddyPress bp_create_excerpt() 抜粋の最大文字数
*
* この設定は BuddyPress の bp_create_excerpt() (アクティビティストリームの抜粋で利用) に適用されます。
* この設定は $wpmp_conf['patch_bp_create_excerpt'] が false の場合は無効となります。
*/
$wpmp_conf['bp_excerpt_mblength'] = 110;

開いたwpmp-config.phpの中に上のコードのように$wpmp_confの変数のとこに110の数字があるので、WordPressの記事一覧の本文を何文字で抜粋するか制限できるようになります。

WP Multibyte Patchで記事一覧の本文を抜粋する結果としては、the_excerpt()で本文を取得して抜粋文字数を制限する方法と同じでなので、それぞれ使いやすいとか、管理しやすいと思った方法で選ぶといいかと思います。