MENU

[WordPress]投稿一覧の本文を文字数制限して”続きを読む”を表示する方法を解説

WordPress で記事一覧ブロックなどを自作している時、本文の一部を表示して、一定文字数を超えたら...続きを読むのように表示したいと思っているでしょう。

そこで今回は、表示する本文の文字数を制限した上で、最後に続きを読むを追記する方法を紹介します。

目次から探す

本文の文字数を制限する方法

まずは、本文を任意の文字数で切り詰めて制限する方法です。

任意の文字数で切り詰めて、表示する本文の文字数を制限する場合は、以下のように記述します。

<?php
    $content = get_the_content();
    //HTMLタグを除去しておく
    $content = strip_tags($content);

    $limits = 120;//制限する文字数
     if (mb_strlen($content,'UTF-8') > $limits) {
        //文字数を制限する処理         
        $content= mb_substr($text, 0, $limits,'UTF-8');
   }
   echo $content;
?>

$postから直接本文を取得する場合はget_the_content()の部分を$post->contentに変更してください。

このようにコードを書くことで、指定した文字数で本文の文字列を切り詰めることができます。

substr()ではなくmb_substr()を使うこと

文字列を切り詰める関数はsubstr()もありますが、こちらは日本語などの一文字で2バイト以上使うマルチバイト文字を正しく処理できないため、使わないようにしてください。

本文が半角アルファベット・半角数字・半角記号のみで構成されているのであればsubstr()で問題ないですが、日本語などのマルチバイト文字を扱う可能性がある・すでに使っている場合は必ずmb_substr()を使うようにしてください。

文字数制限した本文の末尾に「…続きを読む」を付ける方法

本文の末尾に「…続きを読む」をつける場合は、出力する直前に「続きを読む」を付けるだけで解決します。

<?php
    $content = get_the_content();
    //HTMLタグを除去しておく
    $content = strip_tags($content);

    $limits = 120;//制限する文字数
     if (mb_strlen($content,'UTF-8') > $limits) {
        //文字数を制限する処理         
        $content= mb_substr($text, 0, $limits,'UTF-8') . '...続きを読む';
   }
   
   $content .= '...続きを読む';
   
   echo $content;
?>

文字数制限した場合にのみ「続きを読む」を表示したい場合は、if文内の9行目の文字数を制限しているところで「続きを読む」を追加するようにしてください。

$content= mb_substr($text, 0, $limits,'UTF-8') . '...続きを読む';

「続きを読む」をリンクにする方法

「続きを読む」のところをクリックしたら記事に飛ぶようにリンクを設定したい場合は、「続きを読む」を追加しているところを以下のように書き換えます。

 $content .= '...<a href="' . get_permalink() . '">続きを読む</a>';

have_post()でループを回していると、記事のURLをget_permalink()で取得できるので、そのURLをaタグで指定してあげれば、「続きを読む」をクリックしたときに該当の記事に飛ぶようになります。

指定した文字数を超えた時だけリンク付きの「続きを読む」を追加する処理をまとめると以下のコードになります。

<?php
    $content = get_the_content();
    //HTMLタグを除去しておく
    $content = strip_tags($content);

    $limits = 120;//制限する文字数
     if (mb_strlen($content,'UTF-8') > $limits) {
        //文字数を制限する処理         
        $content= mb_substr($text, 0, $limits,'UTF-8') . '...<a href="' . get_permalink() . '">続きを読む</a>';
   }

   echo $content;
?>

製作中のコードによって少し書き換えが必要かもしれませんが、ほとんどコピペするだけで使えると思うので、ぜひ参考にしてみてください。

よかったらシェアしてね!
目次から探す