WordPress

【WordPress】出力する投稿記事のタイトルと本文の文字数を制限する方法

※ 当サイトではアフィリエイト広告を利用しています

WordPressで投稿記事のタイトルや本文を出力する文字数を制限したいけどどうすればいいの?

ブログカードなどで投稿記事のタイトルや本文を表示するとき、全部表示すると長すぎてしまう事があると思います(特に本文)

今回はWordPressで投稿タイトルと本文を出力する文字数を制限する方法について解説していきます。

ただし文字数ではなく行数で制限したい場合もあると思います。

行数で制限する方法は以下の記事を参照下さい。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!

累計1100部突破!レビュー570件!

WordPressで出力する投稿記事タイトルの文字数を制限する方法

まず通常のタイトルの出力はこのように書きます。

<?php the_title(); ?>

しかし文字数を制限しないと以下のように制限なく表示されます。

ブログカード(タイトル文字制限なし)

ブログカード(タイトル文字制限なし)

これを文字数制限するには、このように書きます。

<!-- 文字数制限なし -->
<?php the_title(); ?>

<!-- 40文字制限 -->
<?php echo wp_trim_words( get_the_title(), 40, '…' ); ?>

そしてこのように表示されます。

ブログカード(タイトル40文字制限・それ以上は『…』で省略)

ブログカード(タイトル40文字制限・それ以上は『…』で省略)

もしタイトルの文字数が40文字以下であれば『…』は表示されません。

ブログカード(タイトル40文字制限・それ以下は『…』なし)

ブログカード(タイトル40文字制限・それ以下は『…』なし)


WordPressで出力する投稿記事本文の文字数を制限する方法

まず投稿本文の出力はこのように書きます。

<?php the_content(); ?>

ただしこれでは全部表示してしまいます。

本文を抜粋する時は以下のテンプレートタグを使います。

<?php the_excerpt(); ?>

こちらは全部表示ではなく文字数が制限されますが、デフォルトでは110文字制限となります。

そして110文字以上の場合は[…]と省略されます。

ブログカード(本文文字数制限なし)

ブログカード(本文文字数制限なし)

これを文字数制限するには、このように書きます。

<!-- 文字数制限なし(本文の抜粋) -->
<?php the_excerpt(); ?>

<!-- 40文字制限 -->
<?php echo wp_trim_words( get_the_content(), 40, '…' ); ?>

そしてこのように表示されます。

ブログカード(本文40文字制限)

ブログカード(本文40文字制限)

こちらもタイトル同様、もし本文の文字数が40文字以下であれば『…』は表示されません。


制限文字数以上の場合、末尾に表示する省略文字を変更

また制限文字数を超えた場合に末尾に表示する省略文字の『…』は変えることも出来ます。

<!-- タイトル40文字制限 -->
<?php echo wp_trim_words( get_the_title(), 40, '[続く]' ); ?>

<!-- 本文40文字制限 -->
<?php echo wp_trim_words( get_the_content(), 40, '[続く]' ); ?>
ブログカード(省略文字変更)

ブログカード(省略文字変更)

まとめ

今回はWordPressで出力する投稿記事のタイトルと本文の文字数を制限する方法を解説しました。

これは地味に必須な実装なので、必ず実装できるようにしておきましょう。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

-WordPress