WordPressで投稿記事の冒頭を抜粋で表示する方法

WordPressのテンプレートタグthe_excerptを使用して、投稿記事の冒頭を抜粋として表示する方法の備忘録です。

the_excerptを利用することで、トップページの投稿一覧などに記事の先頭を抜粋文として表示できます。

サンプルでは、サムネイルと記事のタイトルの下に抜粋を表示しています。

抜粋を表示する

テンプレートファイルに抜粋を表示するためのコードを追記します。

<?php the_excerpt(); ?>

投稿記事一覧のループの中など、コードを設定した箇所にthe_excerpt()を記入することで<p>タグに囲まれた抜粋文を表示できます。

以下は、トップページの投稿記事一覧に抜粋を追加したコードのサンプルです。

<?php
  $args = array(
    'post_type' => 'post',
    'posts_per_page'=> 3,
    'paged' => 1
  );
  $query = new WP_Query($args);
?>
<?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
<div class="article-item">
  <div class="title"><?php the_title(); ?></div>
  <?php the_excerpt(); ?> 
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>

投稿記事を一覧で表示するループ内にthe_excerpt()を設定しています。

抜粋する文字数を変更する

抜粋として表示されるテキストの最大文字数は、デフォルトで110文字です。

抜粋文の長さを変更したい場合は、「functions.php」に以下のコードを記述します。

add_filter( 'excerpt_length', function( $length ){
  return 50; //抜粋の文字数を50文字に設定
}, 999 );

フィルターフックで抜粋の文字数を変更しています。return部分に表示する抜粋の文字数を設定します。

日本語のサイトで抜粋の文字数を変更する場合には、マルチバイト文字に対応させるためにWordPressプラグイン「WP Multibyte Patch」のインストールが必要です。

抜粋の末尾を変更する

抜粋のテキストが指定の文字数を超えた場合、抜粋文の末尾に[…]という文字列が表示されます。

この文字列を変更したい場合は、「functions.php」に以下のコードを記述します。

add_filter( 'excerpt_more', function( $more ){
  return '&hellip;';
}, 999 );

文字数と同様に、フィルターフックで最後の文字列を変更しています。return部分に表示する文字を設定します。

サンプルでは「&hellip;」で文字列を「…」に変更しています。

末尾にリンクを追加する

抜粋の末尾にその投稿記事へのリンクを追加したい場合は、「functions.php」に以下のコードを追記します。

add_filter( 'excerpt_more', function( $more ){
  return '&hellip; <a href="' . esc_url( get_permalink() ) . '">' . 'MORE' . '</a>';
}, 999 );

末尾の文字列を「…」とリンクに変更しています。「MORE」部分にリンクのテキストを設定します。

抜粋を文字列として取得する

抜粋をthe_excerpt()を使用して出力すると自動で<p>タグなどが設定されます。

ただの文字列として抜粋を取得したい場合は、get_the_excerpt()を使用します。

the_excerpt()と同様に、投稿記事一覧のループの中に記述します。

<div><?php echo get_the_excerpt(); ?></div>

get_the_excerpt()で取得した文字列をechoで出力しています。この方法であれば、任意のタグの中に抜粋を表示することも可能です。

Share on Twitter
関連記事
Smart Custom Fieldsで作成したフィールドの値を投稿一覧で表示する方法
Smart Custom Fieldsで作成したフィールドの値を投稿一覧で表示する方法
WordPressのSEO対策プラグインAll in One SEOの使い方
WordPressのSEO対策プラグインAll in One SEOの使い方
WordPressで記事の公開日と最終更新日を表示する方法
WordPressで記事の公開日と最終更新日を表示する方法