WordPressでブログやニュース一覧を作成する際、「抜粋（Excerpt）」機能は非常に便利です。
しかし、初期設定のままでは、記事の要約部分（抜粋）の末尾が「…」という三点リーダーで終わってしまい、デザイン上の統一感や導線設計に悩むデザイナーは少なくありません。
特に、カスタム投稿タイプなどで高度な記事リストを構築する場合、「…」ではなく「Read More」や「詳細を見る」といったテキストや、デザインに合わせた専用アイコンを挿入したいという要望は多いもの。。。
この小さな変更が、ユーザー体験（UX）とサイトのクリック率（CTR）に大きな影響を与えることもありますので、ぜひ今回の記事もチェックしてください！
【最新版】抜粋の末尾テキストをカスタマイズする基本コード
WordPressで抜粋の末尾をカスタマイズする方法は、非常にシンプルです。使用するのは、WordPressに標準で用意されている
excerpt_moreというフィルターフックです。このフックは、抜粋が終了する際に挿入される文字列を変更する役割を持っています。以下のコードをテーマの functions.php ファイルに追記することで、抜粋末尾のテキストを自由に変更できます。
|
1 2 3 4 5 6 7 8 9 10 |
/ * 抜粋末尾の「...」を任意の文字列に変更する関数 * @param string $more デフォルトの抜粋末尾文字列 * @return string 変更後の抜粋末尾文字列 */ function custom_excerpt_more($more) { // 任意のテキストを返します return '...続きを読む'; } add_filter('excerpt_more', 'custom_excerpt_more'); |
コードのポイント
custom_excerpt_more という任意の関数を定義します。この関数には、引数として現在の抜粋末尾文字列（通常は…）が渡されます。この関数内で、変更したいテキスト（例：…続きを読む）を return で返します。
add_filter('excerpt_more', 'custom_excerpt_more');で、WordPressの抜粋末尾処理に、作成した関数を適用（フック）させています。これで、記事一覧ページなどの抜粋表示が、「本文の一部…続きを読む」といった形式に切り替わっているはず！
抜粋末尾に「記事へのリンク」を設定する方法
単にテキストを変更するだけでなく、そのテキスト自体に元の記事へのリンク（URL）を含めることで、より機能的な「続きを読むボタン」として機能させることが可能となります。リンクを設定する場合は、
excerpt_more フィルターに加え、抜粋の長さを調整するexcerpt_length フィルターも併用することが一般的です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/ * 抜粋の文字数を調整（任意） */ function custom_excerpt_length($length) { // 抜粋の文字数を120文字に設定 return 120; } add_filter('excerpt_length', 'custom_excerpt_length'); / * 抜粋の末尾を「続きを読む」リンクに変更する * @param string $more デフォルトの抜粋末尾文字列 * @return string 変更後のHTMLリンク要素 */ function custom_excerpt_more($more) { // $post変数から記事のパーマリンクを取得します global $post; // リンクを構成するHTML $link_html = ' <a href="' . get_permalink($post->ID) . '" class="read-more-link">... 詳細はこちら</a>'; // リンクを含むHTMLを返す return $link_html; } add_filter('excerpt_more', 'custom_excerpt_more'); |
コードのポイント
global $post;は、抜粋を表示している現在の記事オブジェクトにアクセスするために必要不可欠な記述です。get_permalink($post->ID)で、現在の記事IDに基づいた正しいURLを取得するWordPress関数を使用します。
class=”read-more-link” のクラス名を付与することで、CSSでボタンのように装飾したり、色を変えたりといった柔軟なスタイリングに対応できるでしょう。
これで、抜粋の末尾はカスタマイズされたテキストリンクに変わり、読者をスムーズに本記事へ誘導できます！
【注意点】抜粋フックが効かない場合の確認事項
稀に、上記のコードを実装しても意図したとおりに動作しないケースに遭遇することがあります。その原因の多くは、WordPressのテンプレート側の仕様にあるものです。
the_excerpt() 関数を使用しているか？
テンプレートファイル（例：index.php や archive.php）でthe_excerpt()ではなく、the_content() を使っている場合は、そもそも抜粋機能が使われていないため、フックは動作しません。必ず
the_excerpt() 関数で抜粋を表示させているか確認しましょう。カスタムフィールドの値を表示していないか？
テーマやプラグインによっては、WordPress標準の抜粋機能ではなく、カスタムフィールド（例：Advanced Custom Fieldsなど）に入力された値を記事一覧に使っている場合があります。その場合、このフックは効果がないため、出力元の関数を特定し、手動で末尾にリンクを追記する必要があります。
コメント