投稿画面にタイトル文字数を表示する方法【プラグイン不使用】

SEOに効果的なタイトルの文字数は32文字がいいといわれています。
『32文字はもう古い』などという話も聞きますが、30文字前後にしておけば大体間違いはなさそうです。

正解はわかりませんが、タイトルを決めるときに文字数を気にするという方はきっと多いはず。

投稿画面にタイトル文字数を表示するカスタマイズ方法をご紹介。

コードをfunctions.phpに記述することで、投稿画面にタイトル文字数をリアルタイムに表示することができます。

こんな場合におススメ

投稿画面にタイトル文字数を表示したい

このカスタマイズ方法は、旧エディターのみ対応しています。Gutenbergは対応しておりませんので、ご注意ください。

functions.phpを編集する

注意

functions.phpに変更を加える場合は、バックアップを取ってから行うようにしてください。また、コードの書き換えは自己責任でお願いします。

外観 > テーマエディター > functions.phpを編集する。

または、FTPソフトを使用して wp-content > themes > 使用しているテーマフォルダ内のfuncstions.phpをバックアップ・編集する。

追記するコード

functions.php

//Wordpress投稿画面のタイトル文字数をカウントする
function count_title_characters() {?>
<script type="text/javascript">
jQuery(document).ready(function($){
    //全角を1、半角を0.5として数える
    function count_zen_han_characters(str) {
      len = 0;
      str = escape(str);
      for (i=0;i<str.length;i++,len++) {
        if (str.charAt(i) == "%") {
          if (str.charAt(++i) == "u") {
            i += 3;
            len++;
          }
          i++;
        }
      }
      return len / 2;
    }

  //in_selの文字数をカウントしてout_selに出力する
  function count_characters(in_sel, out_sel) {
    $(out_sel).html( count_zen_han_characters($(in_sel).val()) );
  }

  //ページ表示に表示エリアを出力
  $('#titlewrap').after('<div style="position:absolute;top:-24px;right:0;color:#666;background-color:#f7f7f7;padding:1px 2px;border-radius:5px;border:1px solid #ccc;">文字数<span class="wp-title-count" style="margin-left:5px;">0</span></div>');

  //ページ表示時に数える
  count_characters('#title', '.wp-title-count');

  //入力フォーム変更時に数える
  $('#title').bind("keydown keyup keypress change",function(){
    count_characters('#title', '.wp-title-count');
  });

});
</script><?php
}
add_action( 'admin_head-post-new.php', 'count_title_characters' );
add_action( 'admin_head-post.php', 'count_title_characters' );

参考 WP管理画面でタイトル文字数カウンターを表示するカスタマイズ方法（旧ビジュアルエディター用）寝ログ