記事本文の抜粋テキストを文字数制限する方法 WordPress
WordPressでブログを運用している方は、記事の一覧ページに、記事の中身がわかるような抜粋テキストを表示させていると思います。
これの抜粋テキストの表示は、情報を得ようとして一覧ページに訪れたユーザに対して「この記事がどんな内容なのか」を中身を全部読むことなく、わかるようにすることを目的として実装されています。
このブログでも利用しています。(以下画面キャプチャの赤い部分が抜粋テキストの箇所です)
WordPressの場合、標準で用意されている関数「the excerpt()」を利用すれば抜粋テキスト表示が可能ですが、抜粋テキストの文字数を変更する方法はいくつか存在し、方法の中には指定のプラグインを利用するなど条件が必要なものもあります。
そんな抜粋テキストの文字数制限方法について調べていたら新たな気付きがあったので、本日はこちらについて紹介したいと思います。
抜粋テキストの文字数制限方法
以下の3つの方法があります。
- フィルターフックを利用する
- WP Multibyte Patchの設定ファイルを編集する
- PHPのmb_substr関数を利用する
一番手軽で有名な方法は、「フィルターフックを利用する」方法ですが、プラグインの利用が前提となります。
複雑にカスタマイズしていたりすると、条件にマッチしないこともあると思いますので、ここではそれぞれ紹介していきます。
フィルターフックを利用する
これは、the excerpt()で利用されている「excerpt_mblength」というフィルタをフックして、表示する文字数を指定するやり方です。
function.phpに以下のソースを記述すればいいだけなので、とても簡単です。
returnの数字(赤字部分)を変更すれば文字数の調整ができます。数字の単位は1バイトなのでマルチバイトの場合は半分になります。(ちなみに僕はこの記述に、PC・SPなどデバイスごとに抜粋テキストの文字数を指定するように処理を加えています)
function new_excerpt_mblength($length) { return 100; //マルチバイトなら50文字表示されます。 } add_filter('excerpt_mblength', 'new_excerpt_mblength');
ただし、ここで紹介したフィルターフックを利用する方法は、プラグイン「WP Multibyte Patch」を有効にしていないと動作しません。
なぜ、「WP Multibyte Patch」を有効にするのかについて触れているブログが無かったので、僕なりに調べた結果を紹介します。
WP Multibyte Patchを有効にする理由
実は、the_excerpt()の文字数を指定するフィルターには「excerpt_mblength」と「excerpt_length」があります。
ぱっと見るとわからないかもしれませんがこの2つは、フィルタ名にmbが含まれているかどうかの違いがあります。このmbは実はマルチバイトを示しており、mbのついていない「excerpt_length」フィルタにマルチバイトの文字列(日本語など)をフックに指定しても動作してくれません。
また、WordPressはもともと英語圏の担当者が中心となって開発されていることもあり、日本語での利用すると挙動がおかしい点が見られます。それはthe_excerpt()関数も例外ではないため、マルチバイトの文字列を取り扱っても正しく動くようにWP Multibyte Patchプラグインを有効にする必要があります。
さらに、WP Multibyte Patchプラグインを有効にすると、「excerpt_mblength」フィルタが「excerpt_length」フィルタよりも優先されるため「excerpt_mblength」フィルタを使わざるを得ないという理由もあります。
つまり、
the_excerpt()関数で日本語を含んだテキストを抜粋表示するためには、WP Multibyte Patchプラグインを有効にして、「excerpt_mblength」フィルタをフックするしか無い
ということになります。
WP Multibyte Patchの設定ファイルを編集する
先ほど紹介した「excerpt_mblength」フィルタをしている設定ファイルを修正する対応です。
対応は「/wp-content/plugins/wp-multibyte-patch/wpmp-config.php」のファイルを開き、以下のソースで赤字になっている「excerpt_mblength」の数値を変更するだけです。
<?php /* WP Multibyte Patch global config file */ // WordPress Settings $wpmp_conf['excerpt_length'] = 50; // Maximum word count for ascii posts. $wpmp_conf['excerpt_mblength'] = 100; // Maximum character count for multibyte posts. $wpmp_conf['excerpt_more'] = ' [...]'; // More string at the end of the excerpt. $wpmp_conf['comment_excerpt_length'] = 20; // Maximum word count for ascii comments. $wpmp_conf['comment_excerpt_mblength'] = 40; // Maximum character count for multibyte comments.
ただし、プラグインのファイルを直接いじることになるため、プラグインのアップデートの際に同じ対応が必要になります。
WP Multibyte Patchプラグインは、日本語での対応に関わるものなのでよくアップデートされます。
そのため、長期的な運用を考えるとおすすめできません。
追記(2016/12/22)
コメント欄で指摘をいただきましたが、プラグインの影響を受けないように、「/wp-content/wpmp-config.php」にconfigファイルを配置する方法もあります。
詳しくは、作者のサイトを参考ください。
PHPのmb_substr関数を利用する
この方法は、「the_excerpt()」関数を利用するのではなく、リンク無しのテキストのみの抜粋を表示する「get_the_excerpt()」関数で出力されたテキストに対して、PHPの文字列操作の関数を利用して文字数を制限します。
まずmb_substrを利用したソースを紹介します。
抜粋を表示させたい箇所に、以下のソースを記述するだけです。
<?PHP print mb_substr(get_the_excerpt(), 0, 100); ?>
ただし、このソースだけだと、省略されていることを示す「…」や「続きを読む」といった文字列を表示することができません。
その場合は、以下のように単純に文字列をつなげてやればOKです。
<?PHP print mb_substr(get_the_excerpt(), 0, 30)."…続きを読む"; ?>
上記の書き方だと、ちょっとスマートではないので、mb_strimwidthというPHPの文字列関数を利用すれば、引数に省略文字を指定することができます(おまけに文字コードも指定できます)
<?php print mb_strimwidth(get_the_excerpt(), 0, 140, "…", "UTF-8"); ?>
こちらの方法は、抜粋を表示させたいテンプレート全てに記述する必要があります。
そのため、文字数を編集や、画面サイズやデバイスごとに文字数を変更させたりするような処理追加の際には、すべてのテンプレートファイルを修正・改修する必要があります。
最後に
調べるまで気にしていなかったのですが、WordPressのthe_excerpt()は、記事投稿のフォームにある抜粋フィールドに入力がない時は本文から抜粋してテキストを表示してくれます。
抜粋テキストは書き終えた記事を要約する行為になることから、SEO対策のブログを読むと漏れなく「抜粋テキストはSEO対策として有効である」と書かれています。
ところが、SEO対策としてどの程度有効であるかは不明なので、この視点では重要度は測れませんが、UX/UIの視点で考えると、「一覧の記事をユーザに理解してもらう」という点で対応すべきであることは間違いないと思います。
抜粋テキストが重要であることに気がついてはいるけれど、記事の最後に要約する手間を面倒だと感じて、対応されない方もいるのではいでしょうか。
実は、僕もその1人です。。。
年末年始の休みを利用して、過去記事の見直しを兼ねて抜粋文も考えてみようかなという気にさせてくれるテーマでした。
コメント一覧
「WP Multibyte Patchプラグインを有効にして、「excerpt_mblength」フィルタをフックするしか無い」というのは、そんなことないです。
/wp-content/plugins/wp-multibyte-patch/wpmp-config.phpファイルを直接編集する方法はもちろんおすすめできないのですが、プラグインアップデートの影響を受けないよう、専用のconfigファイルが用意されています。
作者公式ページ「設定ファイル」の項参照。
http://eastcoder.com/code/wp-multibyte-patch/
ご参考になれば幸いです。
Glassさん
ご指摘ありがとうございます。
作者のサイトを参考に、記事のほうも修正させていただきました。
今後ともよろしくお願いいたします。