the_excerpt()による「続きを読む」のなにが問題なのか？

2015年7月9日カテゴリー : WordPress コメント : 0

　ブログのインデックスページには「続きを読む」が表示されると思います。

こういうやつです。１、２ヶ月あまりブログを運用してきて、この「続きを読む」について少しばかり書いてみようと思います。

以前の設定

　上のようなインデックスページの設定は次のようにしておりました。

index.php

<?php the_excerpt(); ?>

1	<?php the_excerpt(); ?>

function.php

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

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

function new_excerpt_mblength($length) {

return 168;

}

add_filter('excerpt_mblength', 'new_excerpt_mblength');

function new_excerpt_more($more) {

return '</p><p><a href="'. get_permalink($post->ID) . '">'.'...[続きを読む]'.'</a>';

}

add_filter('excerpt_more', 'new_excerpt_more');

プラグインの「WP Multibyte Patch」を有効化するのを忘れないように。このあたりの記述などは、「wordpress　続きを読む」などで検索すると分かりやすい記事がたくさん出てきます。

　こうすると、特になにも設定しなくても168文字ごとに自動で「続きを読む」を挿入してくれる訳です。設定し忘れがないので便利であることは確かです。

the_excerpt() による「続きを読む」のなにが問題か？

　たとえば、このようなエントリーを公開したとしましょう。

WordPress の管理画面のテキストエディタで見ると、

これはテストエントリーです。

<h2>H2タグテスト</h2>
<h3>H3タグテスト</h3>

<a href="http://localhost/wordpress/wp-content/uploads/2015/07/a0002_002297_m.jpg"><img src="http://localhost/wordpress/wp-content/uploads/2015/07/a0002_002297_m-300x194.jpg" alt="a0002_002297_m" width="300" height="194" class="alignnone size-medium wp-image-15" /></a>

まだテスト中です。

これはテストエントリーです。

<h2>H2タグテスト</h2>

<h3>H3タグテスト</h3>

まだテスト中です。

これだと37文字とカウントされます。この状態でインデックスページを表示すると、

このようになってしまいます。インデックスページに見出しや画像がデカデカと表示されるよりはマシなのですが、毎回エントリーの頭で決まった文字数分の文章を考えねばならず、かなり面倒です。過去のエントリーをご覧ください、冒頭の不自然な長さの書き出しを。

シンプルに WordPress 標準の more を使う

　冒頭の文章の長さに自信のある人ならいいのですが、文章力の貧弱な当ブログでは WordPress 標準の「more」で解決することにしました。

　まずは index.php の各エントリーの抜粋を出力する部分を次のようにします。

<?php the_content('…[続きを読む]'); ?>

1	<?php the_content('…[続きを読む]'); ?>

the_excerpt 関数から the_content 関数に置き換えました。「…[続きを読む]」は好きな文字を出力することができます。function.php でカスタマイズした部分は削除。なるべく余計なものは書いておかない方がよろしい。

　投稿画面では次のようにします。テキストエディタで、

というボタンがあるので、これを押すと、

のように

<!--more-->

1	<!--more-->

が挿入されます。これでインデックスページを表示すると、

「続きを読む」が表示されます。

仕上げ

　実際操作してもらうと分かると思うのですが、「more」ボタンを押すと、

インデックスページでは期待通りの動作をしてくれるのですが、このままエントリーに移動すると、

不必要な改行が挿入されてしまいます。ブログによっては、この動作はあまり好ましくない。

　解決策は超簡単です。「more」ボタンを押したときテキストエディタに挿入された改行を削除するだけです。

「Delete」キー２回でオッケー。

まとめ

　「続きを読む」系のカスタマイズ記事などでは、毎回 more を記述するのは面倒、という意見が多いようですが、the_excerpt() の文字数を守ることの方が大変だと思い、今回のような運用にすることにしました。the_excerpt() の文字数を減らそうかな、とも考えたのですが、ブログのトップページにもあたるインデックスページに対して毎回少し手間をかけてもいいかな、と思い more を使うことにしてみました。ご自身のブログスタイルにあった運用をしていただければと思います。