WordPressで投稿ページの抜粋を表示する方法

WordPressの編集画面から、手動で抜粋を設定して表示する方法の備忘録です。

設定した抜粋のテキストは、トップページの投稿一覧などに抜粋文として表示できます。

抜粋の設定

はじめに、WordPressの管理画面から抜粋に表示するテキストを設定します。

投稿ページの編集画面「投稿」オプションにある「抜粋を追加」をクリックします。

抜粋が表示されていない場合

投稿に「抜粋を追加」が表示されていない場合は、右上の「オプション」から「設定」開き追加します。

一般のインターフェース内にある「抜粋」をオンにすると使用できるようになります。

抜粋を記入する

「抜粋を追加」をクリックすると入力用のフィールドが表示されるので、テキストを入力して投稿を保存します。

投稿ページに抜粋が設定できました。

抜粋文を変更したい場合は、「抜粋を編集」から編集できます。

抜粋を表示する

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

<?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(); ?>

投稿のタイトルの下に「抜粋」のテキストを表示しています。

抜粋が設定されていない場合は、記事の冒頭が抜粋文として表示されます。

抜粋する文字数を制限する

抜粋で表示するテキストの文字数を制限したい場合は、wp_trim_words()を使用して設定します。

<p><?php echo wp_trim_words( get_the_excerpt(), 30 ); ?></p>

get_the_excerpt()で取得した抜粋の文字列を、第2引数に設定した文字数に変更して出力します。サンプルコードでは、「30」文字に制限されます。

省略された抜粋文の末尾には「…」という文字列が自動で追加されます。

抜粋の末尾を変更する

抜粋の制限した文字数の末尾に表示するテキストを「…」から変更したい場合は、wp_trim_words()に引数を追加します。

<p><?php echo wp_trim_words( get_the_excerpt(), 30, '&hellip; MORE' ); ?></p>

第3引数に設定した文字が末尾に追加されます。

抜粋文の末尾に「… MORE」が追加されました。

末尾にリンクを追加する

抜粋の末尾にその投稿記事へのリンクを追加したい場合は、wp_trim_words()の引数に設定します。

<p><?php echo wp_trim_words( get_the_excerpt(), 30, '&hellip; <a href="' . esc_url( get_permalink() ) . '">' . 'MORE' . '</a>' ); ?></p>

第3引数にesc_url( get_permalink() )で投稿記事のURLを取得して、リンクのコードを追加しています。

「MORE」部分をクリックすると投稿記事のページへ遷移します。

Share on Twitter
関連記事
WordPressでカスタムメニューを設置する方法
WordPressでカスタムメニューを設置する方法
画像を圧縮するプラグイン「EWWW Image Optimizer」の使い方
画像を圧縮するプラグイン「EWWW Image Optimizer」の使い方
WordPressでショートコードを自作する方法
WordPressでショートコードを自作する方法