2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
記事の一覧ページなどで投稿タイトルや投稿本文を抜粋して表示することがよくありますよね。
今回は、投稿本文の抜粋が思い通りにいかないときの解消方法をご紹介します。
目次
まず、投稿タイトルの抜粋方法についてですが、記事のループ内に以下の記述で問題なく出力できます。
<?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」となっている２箇所を変更することで調整できます。
それでは、投稿本文も同様に設定しようと以下のように記述してみましょう。
<?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文字と「…」を表示する指定をすることができました。
「投稿本文 抜粋」などでググると、誤っている方の記述がたくさんひっかかります..！
私もそれで苦労しました・・。一度解決してしまえば、簡単なんですけどね・・。
どなたかのお役に立てたら良いなと思います！
こちらもチェック
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/