WordPress：記事抜粋を表示するthe_excerptの使い方とカスタマイズのまとめ

Date :
Category :
WordPress » 投稿記事
Share this :

トップページやアーカイブページなどの記事一覧で記事内容の抜粋を表示させるWordPressのテンプレートタグthe_excerptを使用して、表示させる文字数や「続きを読む」などのリンクを表示させるカスタマイズを行います。

  1. the_contentとthe_excerptの抜粋動作の違い
  2. the_excerptを使用して記事抜粋をする時の基本設定
  3. 抜粋する文字数を変更する
  4. 抜粋の文末に表示される文字列を変更する
  5. 抜粋の文末に表示される文字列をリンクにする
  6. the_excerptを使用した抜粋の実用的な使用例

1. the_contentとthe_excerptの抜粋動作の違い

個別記事ページ以外では、記事の内容を表示させるテンプレートタグthe_contentでも記事の抜粋を表示させることが出来ますが、the_excerptとの抜粋動作の違いは？

the_content
  • テーマのループ内に、<?php the_content(); ?>と記述
  • 記事作成時に<!--more-->タグを入れた場合、記事の先頭から入れた箇所までを抜粋表示
  • 抜粋の文末に、 (さらに…)とういう記事へのリンク付き文字を表示
  • <!--more-->タグを入れなかった場合は全文表示
  • 記事作成時に抜粋欄に入力しても、入力内容は表示されず（抜粋欄の入力は無効）、記事全文が表示される
the_excerpt
  • テーマのループ内に、<?php the_excerpt(); ?>と記述
  • 抜粋する文字数を予め自由に設定可能
  • 記事の先頭から設定した文字数を自動的に抜粋表示
  • 記事作成時に<!--more-->タグを入れた場合は、設定した文字数以内であれば入れた箇所までを抜粋表示し、設定した文字数を超えている場合は設定文字数までを抜粋表示
  • 抜粋内は、HTMLタグと画像を取り除きテキストのみを表示
  • 抜粋の文末に「続きを読む」などの文字列を追加出来、その文字列に記事へのリンクも可能
  • 記事作成時に抜粋欄に入力した場合は、文字数に関係なく入力内容が全て表示され、文末の文字列は表示されない

記事作成時に<!--more-->タグを入れ忘れてしまったり、毎回入れるのがめんどくさく感じる場合は、the_excerptを使用すると見映えのカスタマイズに加え、自動的に抜粋も行ってくれますので作業が楽になると思います。

2. the_excerptを使用して記事抜粋をする時の基本設定

プラグインの有効化

抜粋表示を動作させる時は始めに、日本語版Wordpressに最初から同根されているプラグイン「WP Multibyte Patch」を有効化してください。

テーマ（index.phpなど）のループ内に以下を記述

<?php the_excerpt(); ?>

「WP Multibyte Patch」を有効化することで日本語の文字数を正しくカウントして抜粋を表示してくれるようになります。
デフォルトの状態で記事の先頭から数えて110文字を抜粋し、文末に […]が表示されます。

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

「WP Multibyte Patch」を有効化した時のデフォルトの抜粋文字数は110文字です。
この文字数を変更する場合は、function.phpに以下のコードを追加します。

function.php

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

上記は、文字数を100に変更した場合になります。
2行目の数値を変える事によって文字数の変更が行えます。

4. 抜粋の文末に表示される文字列を変更する

デフォルト状態だと抜粋の文末には […]が表示されます。
この文字列を変更する場合は、function.phpに以下のコードを追加します。

function.php

function new_excerpt_more($more) {
	return '...続く';
}	
add_filter('excerpt_more', 'new_excerpt_more');

上記は、文末の文字列を「…続く」に変更した場合になります。
2行目の’ ‘内の文字を変える事によって表示される文字列の変更が行えます。

記事作成時に<!--more-->タグを入れた場合、設定した文字数以内であれば、この文末の文字列は表示されません。
設定した文字数を超えている時にこの文字列が表示されます。

また、文末の文字列を常に表示させない場合は、2行目の’ ‘内を空にします。

function new_excerpt_more($more) {
	return '';
}	
add_filter('excerpt_more', 'new_excerpt_more');

5. 抜粋の文末に表示される文字列をリンクにする

デフォルト状態だと抜粋の文末の文字列には記事へのリンクは付いていません。
記事へのリンクを付けて文字列も変更する場合は、function.phpに以下のコードを追加します。

function.php

function new_excerpt_more($post) {
	return '<a href="'. get_permalink($post->ID) . '">' . '...続きを読む' . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

上記は、文末の文字列を記事へのリンク付きの文字列「…続きを読む」に変更した場合になります。
2行目の’ ‘内の文字を変える事によって表示される文字列の変更が行えます。

記事作成時に<!--more-->タグを入れた場合、設定した文字数以内であれば、この文末の文字列は表示されません。
設定した文字数を超えている時にこの文字列が表示されます。

6. the_excerptを使用した抜粋の実用的な使用例

自動的に記事の先頭から指定文字数で抜粋してくれるthe_excerptですが、記事作成時に挿入する<!--more-->タグと併用すると、指定文字数以内に収まった場合は文末の文字列が表示されません。

もし、<!--more-->タグと併用をするのであれば、解決策の一つとして以下のような設定にしても良いのではないかと思います。

  • 通常（自動的に）
    • 抜粋の文字数は、100
    • 抜粋の文末文字列は「…」、記事へのリンクは無し
  • <!--more-->タグを使用した場合
    • 100文字以内であれば文末の文字列「…」は表示されない
    • 100文字を超えている場合は、「…」を表示
  • 記事へのリンク「続きを読む」は、常に表示
    • the_excerptとは別に記事へのリンクを設置
    • <a>タグにclass=”more-link”を付けているので、見映えの調整はCSSにて

抜粋の文字数、文末文字列はお好みに合わせて変更してください。

function.php

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

function new_excerpt_more($more) {
	return '...';
}	
add_filter('excerpt_more', 'new_excerpt_more');

テーマ（index.phpなど）のループ内に以下を記述

<?php the_excerpt(); ?>
<a class="more-link" href="<?php the_permaLink(); ?>">続きを読む</a>

以上、「WordPress：記事抜粋を表示するthe_excerptの使い方とカスタマイズのまとめ」でした。

▲