アーカイブなどで表示される投稿の一覧、本文は文字数制限して表示したいなぁ~。
とうわけで今回は、WordPressの投稿本文の文字数を制限して表示する方法についてです。
目次
投稿本文の文字数を制限して表示
実案件であった例
まずは下画像をご覧ください↓
これは実案件であった、アーカイブページの投稿一覧での表示です。
上から、投稿日時・タイトル・本文・投稿詳細へのリンク となってます。
これを見ると、本文の最後は「アイキャ…」で終わってますね。(「・・・続きを読む」は本文ではないです)
実際の本文はもっと続いていますが、全て表示してしまうと冗長になってしまい、一覧の意味をなさないので
実案件でもまあまあ使うかな~と思います。
では、次より今回使用したコードの紹介をしていきます!
wp_trim_words() を使用する
wp_trim_words()の使い方
wp_trim_words()の使い方を説明します。
wp_trim_words( $text, $num_words, $more ) $text ⇒(文字列)(必須) 切り出す前の文字列 $num_words ⇒ (整数) (オプション) 単語数 $more ⇒ (文字列) (オプション) $textを切り落とす必要がある場合に付加する文字列。 $textには切り出す前の文字列を配置します。今回は投稿本文なので「get_the_content()」を置きます。 $num_wordsには、表示したい文字数を整数で置きます。今回は126文字までにしたかったので整数で126と書きます。 $moreには文字を切り落としたあとに付ける文字列を記載します。今回は三点リーダーなので「...」としております。
今回のコード紹介
では実際に今回使用したコードを紹介します。
<div class="main">
<p class="date"><?php the_modified_date(); ?></p>
<h3><?php the_title(); ?></h3>
<p class="article">
<span class="ellipsis">
<?php echo wp_trim_words(get_the_content(), 126, '...'); ?>
</span>
<a href="<?php the_permalink(); ?>" class="detail">…続きを読む</a>
</p>
</div>
上記コードはカード全体のコードとなります。
今回の該当箇所は6行目ですね。
<?php echo wp_trim_words(get_the_content(), 126, '...'); ?>
上記が6行目を抜粋したコードです。
意外と忘れがちなのが、echoを付けること。echoがないと何も表示されないのでお気を付けください。
私もecho忘れてて何で表示されないんだ~と数十分悩んでたのは内緒・・・
まとめ
というわけで今回はWordPressの投稿本文の文字数を制限して表示する方法について説明しました!
ここまでご覧頂きありがとうございました!