WordPressの投稿タイトル上に全角文字数を表示するJavaScriptを追加

投稿タイトル上に全角文字数を表示

ブログのタイトルを入力の際は入力する文字数を気にする必要がある。なぜならGoogleでの検索結果のタイトルの表示数は全角31文字程度(PCの場合)と表示される文字数に上限があるからだ。

しかし、全角を1文字・半角を0.5文字で計算してタイトルが全部で何文字あるかを目視で確認するのは大変なのでJavaScriptを追加して自動的に文字数をカウントさせたほうが良い。

All in One SEOなどのプラグインを入れればタイトルの文字数をカウントできるが全角も半角も1文字でカウントしてしまう。

投稿ページにJavaScriptを追加する

WordPress管理画面の投稿タイトル上に全角文字数を表示するJavaScriptを追加するには、まずfunctions.phpを開く。

// functions.php
/wp-content/themes/twentyseventeen/functions.php

functions.phpを開いたら以下のコードを追加するだけでタイトル入力フォームの上に全角文字数が表示されるようになる。

// 管理画面 body終了タグ直前にJavaScript追加
function my_admin_footer_script() {
  echo '<script>(function(){function d(a){for(var b=0,c=0;c<a.length;c++)b+=255>=a.charCodeAt(c)?1:2;return b/2}var a=document.querySelector(".wp-heading-inline"),b=document.getElementById("title");if(!a) return;var e=a.textContent;a.textContent=e+" \u5168\u89d2"+d(b.value)+"\u6587\u5b57";b.addEventListener("input",function(){a.textContent=e+" \u5168\u89d2"+d(b.value)+"\u6587\u5b57"})})();</script>'.PHP_EOL;
}
add_action('admin_print_footer_scripts', 'my_admin_footer_script');