べんりワザ・WordPressのテンプレートと投稿の取得

抜粋(the_excerpt)の文字数と「続きを読む」を変える

一覧ページの抜粋を思いどおりの長さにする方法。excerpt_lengthとexcerpt_moreのフィルタ、日本語での文字数指定、テンプレート内だけで完結させるwp_trim_wordsの使い方をまとめました。

一覧ページの説明文(抜粋)の長さや「続きを読む」の表記は、フィルタ2つテンプレート内の1行で変えられます。用途で選ぶのが早いです。

  • サイト全体でそろえたいfunctions.phpexcerpt_length / excerpt_more
  • この一覧だけ変えたい→テンプレートでwp_trim_words()

まず2つの関数の違い

<?php the_excerpt(); ?>                  <!-- <p>…</p> 付きで出力 -->
<?php echo esc_html(get_the_excerpt()); ?>  <!-- テキストを返す(加工できる) -->

長さを変える・末尾を足すなど加工するときはget_the_excerpt()を使います。

抜粋欄が空の投稿では、本文の先頭から自動で切り出したテキストが使われます(HTMLタグとショートコードは取り除かれます)。つまり「抜粋を書いていない記事でも一覧は成り立つ」仕組みです。

サイト全体の長さを変える

// 抜粋の長さ(日本語環境では文字数として数えられます)
function my_excerpt_length($length) {
  return 80;
}
add_filter('excerpt_length', 'my_excerpt_length', 999);

// 末尾の「[…]」を変える
function my_excerpt_more($more) {
  return '…';
}
add_filter('excerpt_more', 'my_excerpt_more');

テンプレートの1か所だけ変える

一覧ごとに長さを変えたい場合は、フィルタよりテンプレートで書くほうが分かりやすくなります。

<p class="excerpt"><?php echo esc_html(wp_trim_words(get_the_excerpt(), 60, '…')); ?></p>

wp_trim_words()WordPressが用意している切り出し関数で、日本語環境では文字数で数えます。タグも自動で取り除かれるので、抜粋・本文どちらを渡しても安全です。

本文から作りたいときはget_the_content()を渡します。

<?php echo esc_html(wp_trim_words(get_the_content(), 60, '…')); ?>

「続きを読む」リンクを自分で付ける

抜粋の末尾に、記事へのリンクを添えるパターンです。

<p class="excerpt">
  <?php echo esc_html(wp_trim_words(get_the_excerpt(), 60, '…')); ?>
  <a href="<?php the_permalink(); ?>">続きを読む</a>
</p>

excerpt_moreフィルタでリンクを返す方法もありますが、テンプレートに書いたほうが「どこで出しているか」が追いやすいので、まずはこの形をおすすめします。

抜粋を手で書いてもらう運用にする

自動生成された抜粋は、本文の書き出し次第で「導入の前置きだけ」になりがちです。一覧で読ませたい文章は編集画面で書くのがいちばん確実です。

  • 投稿編集画面の右パネル→「抜粋」欄に入力(出ていない場合は「⋮」→「設定」→パネルから表示)
  • カスタム投稿タイプでは、register_post_typesupports'excerpt'を含める
'supports' => ['title', 'editor', 'thumbnail', 'excerpt'],

抜粋はmeta descriptionの元として使われることも多いので、検索結果の見え方にも効いてきます。

何文字にすればいい?

決める基準は「カードの高さがそろうか」です。一覧のレイアウトから逆算すると迷いません。

一覧の形目安の文字数
横3列のカード60〜80文字
横2列のカード80〜100文字
1列の横長リスト100〜120文字
サイドバーの新着一覧40〜60文字

長さがそろわないとカードの高さがばらつくので、短い記事も長い記事も同じ文字数で切るのが見た目には効きます。文字数を決めたら、CSSで行数を制限しておくと崩れの保険になります。

反映されないときのチェックリスト

「設定したのに変わらない」で止まりやすいポイントを、確認する順に並べます。

  1. 優先度を上げたか——add_filter の第3引数に 999。テーマやプラグインが同じフィルタを使っていると負けます
  2. 抜粋欄に手入力がないか——編集画面の抜粋欄に文字が入っていると、excerpt_length は効きません(自動生成のときだけ働くフィルタです)
  3. the_excerpt() を呼んでいるか——テンプレートが the_content() を出していたら、抜粋の設定は無関係です
  4. キャッシュが残っていないか——高速化プラグインやサーバー側のキャッシュを消してから確認します
  5. 子テーマの functions.php に書いたか——親テーマに書くと、更新で消えます
べんりワザ子テーマの作り方(最小構成)親テーマの更新で消えないように、子テーマを作る手順はこちら

タグを残したい・改行を残したいとき

wp_trim_words() はタグを取り除くため、本文の改行や強調も消えます。一覧では基本それが正解ですが、「太字だけは残したい」という要件もあります。その場合は取り除く対象を絞ります。

<?php
// 許可するタグだけ残して切る
$text = wp_kses(get_the_excerpt(), ['strong' => [], 'em' => []]);
echo wp_kses_post(wp_html_excerpt($text, 120, '…'));
?>

wp_html_excerpt() はタグを壊さずに長さで切る関数です。ただし要件が複雑になるほど事故も増えるので、まずはタグなしで割り切るのをおすすめします。

抜粋は検索結果の見た目にも効く

抜粋は多くのSEO系プラグインでmeta descriptionの元として使われます。つまり抜粋欄に書いた文章が、そのまま検索結果の説明文になることがあるわけです。

  • 記事の要点を先に書く——「この記事では〜」より、結論から
  • 長すぎない——検索結果に出るのは日本語で80文字前後まで
  • 本文の書き出しのコピペにしない——自動生成のままだと前置きだけになりがちです
べんりワザOGPを設定しよう(シェアされたときの見た目)SNSでシェアされたときの見た目(OGP)の設定はこちら

まとめ

  1. 加工するならget_the_excerpt()the_excerpt()はpタグ付きで出力される)
  2. サイト全体はexcerpt_length / excerpt_moreフィルタ。効かないときは優先度999
  3. 一覧ごとに変えるならwp_trim_words()。タグを取り除いてから切るので崩れない
  4. 一覧で読ませたい文章は、編集画面の抜粋欄に手で書くのが確実
  5. 効かないときは優先度999・抜粋欄の手入力・キャッシュの順に確認する
  6. 抜粋はmeta descriptionの元になることが多い——結論から書く

一覧の説明文が整うと、クリックされる率も読みやすさも変わります。

よくある質問

抜粋の文字数を変えるにはどうしますか?
functions.phpでexcerpt_lengthフィルタを使うとサイト全体の長さを変えられます。テンプレートの1か所だけ変えたいときは、wp_trim_words(get_the_excerpt(), 80, '…')のように書くほうが手軽です。
抜粋の末尾の「[…]」を消したいです
excerpt_moreフィルタで置きかえます。add_filter('excerpt_more', fn() => '…'); のように書くと、末尾の表記を自由に変えられます。
抜粋欄が空のときは何が表示されますか?
本文の先頭から自動で切り出されたテキストが表示されます。HTMLタグやショートコードは取り除かれます。
the_excerpt()とget_the_excerpt()の違いは?
the_excerpt()はpタグで囲まれたHTMLを出力し、get_the_excerpt()はテキストを返します。自分でタグを組みたいときや文字数を加工したいときはget_the_excerpt()を使います。