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

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

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

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

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

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

こんな場合におススメ

  • 投稿画面にタイトル文字数を表示したい
このカスタマイズ方法は、旧エディターのみ対応しています。Gutenbergは対応しておりませんので、ご注意ください。

functions.phpを編集する

注意
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管理画面でタイトル文字数カウンターを表示するカスタマイズ方法(旧ビジュアルエディター用)寝ログ

カスタマイズ後の投稿画面

タイトルの右上に文字数が表示されるようになります。
カスタマイズ後の投稿画面

動作確認環境

  • WordPress 5.2.2
このカスタマイズは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 投稿画面にタイトル文字数を表示するカスタマイズ方法の紹介です。
  • タイトル文字数がリアルタイムでカウントされるので、タイトルを決めるのに役立ちます。

ランキングに参加しています。

にほんブログ村 IT技術ブログ WordPressへ
クリックしていただけると、ブログ更新の励みになります。

コメントを残す

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

CAPTCHA