【抜粋文字数が思い通りにならない問題を解消!】投稿本文の抜粋方法(WordPress)

記事の一覧ページなどで投稿タイトルや投稿本文を抜粋して表示することがよくありますよね。

今回は、投稿本文の抜粋が思い通りにいかないときの解消方法をご紹介します。

投稿タイトルの抜粋表示方法

まず、投稿タイトルの抜粋方法についてですが、記事のループ内に以下の記述で問題なく出力できます。

<?php
if (mb_strlen($post->post_title, 'UTF-8') > 54) {
    $content = str_replace('\n', '...', mb_substr(strip_tags($post->post_title), 0, 54, 'UTF-8'));
    echo $content;
} else {
    echo str_replace('\n', '', strip_tags($post->post_title));
}
?>

上記の例では、54文字未満のときは全文表示、54文字以上のときは、54文字と「…」を表示する指定になっています。
文字数を変更したい場合は、「54」となっている2箇所を変更することで調整できます。

投稿本文の抜粋表示方法

うまくいかない方法

それでは、投稿本文も同様に設定しようと以下のように記述してみましょう。

<?php
if (mb_strlen($post->post_content, 'UTF-8') > 54) {
    $content = str_replace('\n', '...', mb_substr(strip_tags($post->post_content), 0, 54, 'UTF-8'));
    echo $content;
} else {
    echo str_replace('\n', '', strip_tags($post->post_content));
}
?>

post_titleだった部分をpost_contentに変更したもので、うまく表示されそうに思えます。が、実際は文字数のカウントがうまくいきません。

ポイントは、str_replace('\n', '', mb_substr(strip_tags(〜),〜));の部分です。
ここでは、タグ(hタグやpタグなど)やスペースなど抜粋表示のときには必要のないものを取り除く処理を行なっています。

<?php
//文字数のカウント部分では、タグや半角が入ったまま
if (mb_strlen($post->post_content, 'UTF-8') > 54) {}
?>

こちらのif文の部分では、タグや半角が入ったまま、54文字以上か未満かを判定してしまっているのです。
そのため、意図した文字数での分岐ができなくなってしまっています。

ちなみに、なぜ投稿タイトルの場合には問題なく動くのかというと、投稿タイトル部分には、タグなどが最初から含まれていないからです。

本文抜粋の方法

それでは、うまくいく本文抜粋の方法をご紹介します。
今回は、functions.phpを使用した方法です。

まず、funcions.phpで関数を作成します。

/**
 * 指定した幅で文字列を丸める.
 * @param $content 丸めたい文字列
 * @param $length 丸める文字数
 * @param $trimmarker 丸めた後にその文字列の最後に追加される文字列
 * @return 丸められた文字列
 */
function trim_content($content, $length = 54, $trimmarker = '...') {
    $summary = strip_tags($content);
    $trim_summary = mb_substr($summary, 0, $length);
    if($summary!=$trim_summary) $trim_summary .= $trimmarker;
    return $trim_summary;
}

あとはループ内で呼び出すだけです。

<?php echo trim_content($post->post_content, 54) ?>

こちらで、54文字未満のときは全文表示、54文字以上のときは、54文字と「…」を表示する指定をすることができました。

まとめ

「投稿本文 抜粋」などでググると、誤っている方の記述がたくさんひっかかります..!
私もそれで苦労しました・・。一度解決してしまえば、簡単なんですけどね・・。

どなたかのお役に立てたら良いなと思います!

こちらもチェック

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

    制作

おすすめ記事

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×