[WordPress] トップやカテゴリーの記事一覧を全文表示から抜粋表示に変更して「続きを読む」リンクを設置する方法

WordPress では、多くのテーマがトップページやカテゴリーページでの記事一覧が全文表示になっていますね。初めから本文を抜粋して表示してくれるテーマもありますが、デフォルトテーマなどを使うと全文表示になります。

全文表示になると記事の一覧ページが長くなってしまうので、抜粋表示に変えたいという方も多いと思います。そこで、今回は全文表示から抜粋表示に切り替える方法と「続きを読む」など記事へのリンクを設置してカスタマイズする方法について紹介いたします。

プラグインを使って切り替える

最も簡単な方法だと思いますが、「WP Limit Posts Automatically」というプラグインを使えば簡単に全文表示から抜粋表示に切り替えることができます。

詳しい使い方については、トップやカテゴリーページを全文表示から抜粋表示に切り替えてくれるWordPressプラグイン「WP Limit Posts Automatically」という記事をご参照いただければと思います。

全文表示と抜粋表示の関数について理解しよう

プラグインを使いたくないという方は、テーマファイルを編集して切り替えます。なので、まずは”記事の全文を表示する関数”と”抜粋して表示する関数”について理解しておく必要があります。

利用しているテーマファイルの中に index.php や loop.php などのトップページ用のファイルが存在していますので、まずはその中身を見てみましょう。

記事の一覧を表示している箇所に、以下のような記述があると思います。

<?php the_content(); ?>

the_content() というのが記事の全文を表示するための関数です。

これを以下のように the_excerpt() に変更すれば抜粋表示にすることができます。

<?php the_excerpt(); ?>

the_excerpt() は、記事を抜粋表示するための関数です。デフォルトでは、記事の先頭から 110 文字を抜粋して表示します。

このように関数を変更するだけで簡単に表示する内容を変えることができます。ほんと WordPress って便利ですね。

これらの関数が理解できたところで、次のステップに進んで実際に表示を変えてみましょう。

テーマファイルを編集して切り替える①

では、実際に the_content() 関数が記述されていた場所を以下のように変更してみましょう。これだけで、記事の先頭から 300 文字抜粋して表示させ、「続きを読む⇒」という記事へのリンクを設置できます。

<?php echo mb_substr(get_the_excerpt(), 0, 300); ?><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">続きを読む⇒</a>

これはかなりシンプルな方法ですが、以下の部分で 300 文字の抜粋表示にしています。日本語に対応させるために mb_substr を使っています。文字数は適宜変更してください。

mb_substr(get_the_excerpt(), 0, 300);

以下の部分で「続きを読む⇒」という記事へのリンクを設置しています。

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">続きを読む⇒</a>

記事の一覧を表示させる箇所はループ文になっていると思いますので、この方法で抜粋表示にして記事へのリンクまで設置できます。

トップページの変更が終わったら、category.php(カテゴリーページ) や archive.php(アーカイブページ)、search.php(検索結果ページ) などのファイルも編集しておきましょう。

テーマファイルを編集して切り替える②

続いて、もっと細かくカスタマイズしたいという方のためのテーマファイル編集方法です。

まずテーマファイルは、単純に <?php the_content(); ?> を <?php the_excerpt(); ?> に変更するだけです。細かい点は、functions.php に定義していきます。

下記の内容を functions.php に追記すれば、記事へのリンクを設置したり、文字数を指定することができます。

終わりの文字列を変更する

抜粋されて切れた部分(文末)を変更するには、以下のコードを追加します。この例では […] が最後に表示されることになります。変えたい場合は、「return ‘[…]’;」の部分を変更してください。「return ‘ ‘;」というように、中身を空にすれば何も表示されません。

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

「続きを読む」のリンクを表示させる

「続きを読む⇒」という記事へのリンクを表示させるには、以下のコードを追加します。「続きを読む⇒」の部分は適宜変更してください。

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

抜粋文字数を制限する

記事から抜粋する文字数を指定するには、以下のコードを追加します。「return 300;」の数字を変えれば、抜粋文字数を変更できます。

function change_excerpt_mblength($length) {
return 300;
}
add_filter('excerpt_mblength', 'change_excerpt_mblength');

これらのコードがすでに記述されている場合は、既存のコードを編集しましょう。

注意点

上述したいずれの場合も「WP Multibyte Patch」プラグインが有効になっていないと、日本語の文字数が正しくカウントされません。WP Multibyte Patch はデフォルトでインストールされているので、記事に日本語を使っている場合は有効にしてからテーマファイルを編集しましょう。

あとがき

当ブログは、WP Limit Posts Automatically を使って抜粋表示にしていますが、テスト環境でカスタマイズしてみたら文字数の指定が結構ハマりました。こういう時日本語って厄介ですね。。。

WP Multibyte Patch を有効にして、上述した手順を実施してもらえれば日本語でもちゃんと文字数を指定できますので、ぜひ試してみてください。