Google検索結果一覧に表示されるページタイトルは「全角で約32文字」とされています。
SEOやクリック率を考える上でかなり重要な部分かと思いますが、WordPressの投稿画面では文字数が表示されません。なので今回は、投稿画面に文字数カウンターを設置させてみます。

あわせて、ブログの表示上のデザインにも活用できるよう「タイトルが、ある文字数を超えるとテキストを非表示にし『…』を末尾に付ける」というカスタマイズを行います。

タイトル文字数をカウントしてリアルタイム表示させる

functions.phpに以下のコードをコピペして下さい。
注意点としては、JavaScript(とCSS)の部分はPHPコード外に記述するようにして下さい。
そしてjQueryを使用しているのでライブラリの読み込みは必須です。

//タイトル文字数カウント
add_action( 'admin_head-post.php', 'title_counter' );
add_action( 'admin_head-post-new.php', 'title_counter' );
 
// 処理内容
function title_counter() {
?>
//ここからJavaScriptとCSSなのでPHPの外へ
<script type="text/javascript">
  TITLE_COUNTER_MAX_LENGTH = 32; //スタイルを変更する文字数(必要ない場合は0)
 
function strLength(strSrc){
	len = 0;
	strSrc = escape(strSrc);
	for(i = 0; i < strSrc.length; i++, len++){
		if(strSrc.charAt(i) == "%"){
			if(strSrc.charAt(++i) == "u"){
				i += 3;
				len++;
			}
			i++;
		}
	}
	return len;
}
  jQuery(
      function($) {
        // カウンタ更新関数
        function updateTitleCounter() {
	  var titleLength = strLength($('#title').val()).toString() / 2;
          var stCounter = $('#title-counter').text(titleLength);
          if (TITLE_COUNTER_MAX_LENGTH != 0 && titleLength > TITLE_COUNTER_MAX_LENGTH ) {
            stCounter.addClass( 'title-counter-length-over' );
          } else {
            stCounter.removeClass( 'title-counter-length-over' );
          }
        }
        $('#titlewrap')
            .before('<div id="title-counter"></div>')
            .bind('keyup', updateTitleCounter);
 
        updateTitleCounter();
      });
</script>
<style type='text/css'>
  #title-counter {
    text-align: right;
    width: 100%
  }
  .title-counter-length-over {
    color: #f00;
    font-weight: bold;
  }
</style>
//ここまでJavaScriptとCSS
<?php }

このようにタイトル入力欄の右上にリアルタイムカウンターが表示されます。
32文字を超えると赤く表示されます。

全角・半角を区別してカウントしてくれるのがありがたいです。

記事一覧のタイトル表示に文字数制限をかける

実装したいイメージは、まさにこのブログでも使用しているこの部分。
本文で表示しきれない部分を「…」としていますが、これをタイトルにも適用していこうと思います。

記事一覧を扱っているテンプレートのタイトル部分を以下の様にします。
(※分かりやすいようh1タグで囲ってありますが適宜変更して下さい。)

<h1 class="title">
  <?php
    $limit = 32 // 表示させる文字数の上限
    if(mb_strlen($post->post_title)>$limit) {
      $title= mb_substr($post->post_title,0,$limit) ; echo $title. '…' ;
    } else {
      echo $post->post_title;
    }
  ?>
</h1>

the_title()の代わりに、$postのメンバー変数[post_title]を利用します。
これによって全角32文字を超えた分は「…」に変換されます。

シンプルに制限をつけられるので、タイトル以外にも応用が効きそうですね。

【この記事は以下を参考にしました】

【WordPress】タイトル文字数を投稿画面で表示!jQueryで全角カウントする方法
WordPressで投稿記事のタイトル表示に文字数制限をかける
$post WordPress私的マニュアル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です