2018.10.02

コーディング

テキスト読み込みの文字数を制限できるmb_substrの活用方法

手書きの招待状のイメージ

wordpressの一覧画面などで、投稿記事のタイトルや記事本文を引用表示することがありますが、この際レイアウトを維持するために文字数を制限することがあります。
今回はその方法の一つとしてmb_substrを使ったテキストの文字数制限方法をご紹介します。

mb_substrを使った文字数制限

単純にテキストを100文字まで引用する場合の記述は以下になります。

  <?php echo mb_substr($post->post_content, 0, 100); ?>

ただし、この場合文末がぶつっと切れる見た目になるので、…など三点リーダーのようなものを末尾に挿入することが多いです。
100文字以下の場合は三点リーダーなし、100文字以上の場合は三点リーダーあり、という条件分岐で実装するとスマートですね。以下が例文になります。

<?php 
  if(mb_strlen($post->post_content)>100){
  	echo mb_substr($post->post_content, 0, 100).'…';
  }else{
  	echo $post->post_content;
  }
?>

タグの表示をstrip_tagsで制御する

上記の記述で引用するテキストが、プレーンなテキストエリアなら問題ないのですが、htmlタグの含まれるようなテキストだった場合、タグもテキストとして引用されてしまい想定していた引用文とは違う動作が行われてしまいます。
なのでhtmlタグを除外する記述を追加します。記述にはstrip_tagsを利用します。

<?php 
  if(mb_strlen($post->post_content)>100){
  	echo mb_substr(strip_tags($post->post_content), 0, 100).'…';
  }else{
  	echo strip_tags($post->post_content);
  }
?>

加えて改行コードも除外します。除外にはstr_replaceを利用します。

<?php 
  if(mb_strlen($post->post_content)>100){
  	echo str_replace('\n', '', mb_substr(strip_tags($post->post_content), 0, 100)).'…';
  }else{
  	echo str_replace('\n', '', strip_tags($post->post_content));
  }
?>

まとめ

CMSの運用を行うと一覧画面や新着情報欄などでテキストの引用は頻出します。用途にあった方法で実装を行い可読性やユーザビリティに貢献しましょう。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する