WordPress投稿画面に記事タイトル文字数を表示するプチカスタマイズ

calendar 2017年11月09日

folder WordPressの便利な小技

WordPressの投稿画面で、タイトルの文字数を表示するための方法です。

function.phpにコピペするだけのプチカスタマイズ。

タイトル文字数
気にしてる？

SEOを意識したとき、記事タイトルの文字数は32文字以内がいいとよく言われますよね。

他にも28文字説、30文字説などがありますが、まあつまり28文字～32文字くらいがちょうどいいらしいです。

これはGoogleの検索結果で表示される文字数が32文字だからなのですが、けっこう皆さん気にしてるみたいですね。

私は気にしたりしなかったり。

紹介したいプラグインの名前が長かったりすると、どうやったって32文字に収まりっこありませんしね。

それでも気にしようかなって思うときもたまにあります。

ところが、本文の文字数は下に表示されますが、記事タイトルの文字数はどこにも表示されません。

そこで、記事タイトルを考えたら文字数カウンターにコピペして文字数を確認、という方法をやってる方も多いかもしれません。

こういうところとか。

www.nummoji.kenjisugimoto.com

文字数カウント - numMojiなんもじ（リアルタイム文字数計算チェック）

http://www.nummoji.kenjisugimoto.com/

文字数カウント/文字数カウンターnumMojiは入力された文字の数をカウントします。リアルタイムに自動保存をしながら半角英数字2文字で1文字と数えられる、ライター・編集者など、文章を書くすべての人向けお役立ちツール

でも記事ごとに毎回その作業は手間がかかりますよね。

ということで、投稿画面で記事タイトルを入力すると文字数を自動表示してくれるプチカスタマイズをしてみます。

function.phpにコピペするコード

こちらのコードを使っているテーマのfunction.phpに挿入します。

//*** 投稿画面に記事タイトル文字数を表示　ここから ***//

add_action( 'admin_head-post.php', 'title_counter' );
add_action( 'admin_head-post-new.php', 'title_counter' );

// 処理内容
function title_counter() {
?>
<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>
<?php } 
//*** 投稿画面に記事タイトル文字数を表示　ここまで ***//