WordPressのタイトルや本文の文字数を制限する方法

WordPressで記事などを読み込む時、タイトルや本文が長くて困ったことはありますか？
「タイトルが長いので省略したい」「本文の冒頭部分だけ表示したい」
そんな時に便利なのが文字数を制限する方法です。

みこと

そうそう、文字数が長くなると全体のバランスが悪くなって見た目がバラバラになることがあるのよね。

camoさん

Webサイト制作において見た目のバランスが綺麗に整っているとユーザー目線からしてもすごく見やすいから覚えておいた方がいいよ。

WordPressのテンプレートタグthe_excerpt();を使用することで記事の抜粋を表示することも出来るのですが、初期値として55単語（日本語でのマルチバイトでは110文字）となっている点とタグや空白がそのまま出力されてしまうので不便なケースがあります。

タイトルの文字数制限

タイトルに関しては基本的にテキストしか入力しないので取り扱いとしてはそれほど難しくありません。ご紹介するコードは3種類です。

単純に文字数を20文字に制限する

<?php echo mb_substr( $post->post_title, 0, 20 ); ?>

単純なコードではありますが、文字を20文字で強制的に区切っているので中途半端な箇所で表示が切れてしまう可能性があります。

文字数を20文字に制限、最後に省略記号「…」を付ける

<?php echo mb_substr( $post->post_title, 0, 20 ) . '…'; ?>

先程のコードの最後に省略記号「…」を連結させます。
ただし、20文字以下のタイトルでも省略記号が付いてしまうのであまりよくありません。

文字数を20文字に制限、それ以上なら最後に省略記号「…」を付ける

<?php
if ( mb_strlen( $post->post_title, 'UTF-8' ) > 20 ) {
  $title = mb_substr( $post->post_title, 0, 20, 'UTF-8' );
  echo $title . '…';
} else {
  echo $post->post_title;
}
?>

まず、タイトルを取得して文字数をカウントします。その文字数が20文字以上と未満で分岐させて省略記号を付けるか付けないかを設定しています。

camoさん

コードをコピペする場合、文字数を設定している箇所が2つあるので注意しましょう！

今回使用した関数など

本文の文字数制限

タイトルの文字数制限と同様にすれば本文の文字数も制限できるのですが、タイトルと違って本文にはHTMLタグや改行などが存在します。そのため、同様のコードで制限しても思っていたのと違う表示になってしまうということがあります。

HTMLタグを削除して文字数制限

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

タイトルの文字数制限で行ったように指定した文字数以上の場合には省略記号を付けるようにします。ただし、今回はHTMLタグをstrip_tagsで削除してから表示させます。

たいていの場合これで問題なく表示されることもありますが、よく見ると余白（半角スペース）が入っているということがあります。これは改行コードが原因なのですが、改行コードはstrip_tagsだけだと改行部分に余白スペースが入ってしまうのです。

HTMLタグを削除して文字数制限、改行コードも削除

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

strip_tagsでHTMLタグを削除したあとに改行コードをstr_replaceを使用して削除（置換して削除）します。
これでようやくレイアウトが崩れることもなく余白も入っていないスッキリとした本文の文字数制限ができました。

みこと

改行コードを削除している箇所だけど、array('\r\n', '\r', '\n')というのはどういう意味ですか？

camoさん

いいところに着目したね！
単に改行コードといってもパソコンのOSによって改行コードが違うから、どの環境でも対応できるようにしているんだ。

みこと

なるほど！改行コードって1つだけじゃないんですね。

特定のHTMLタグを残して文字数制限する場合

先程のコードですべてのHTMLタグを削除しましたが、特定のタグだけ残したいという場合もあるかと思います。
改行や文字色などそのまま表示させたいって場合です。その場合には、strip_tagsでタグを削除する時に除外するタグを指定します。

brタグとspanタグを残したい場合は以下のようなコードとなります。

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

今回使用した関数など