SEO的にタイトルタグの文字数は、32文字が良いとよく言われています。
中には、「28文字だ」とか、「30文字だ」とか、各々の考えで、いろいろとあります。
どの文字数がベストかはさておき、Wordpressで記事のタイトルを決めるとき「タイトルの文字数」を気にしている方も、ある程度おられるかと思います。
ただ、Wordpress管理画面では、「本文の文字数表示カウンター」はあっても、「タイトルの文字数表示カウンター」はデフォルトでありません。
そこで先日、「タイトル文字数カウンター」が表示されるよう、以下のようにカスタマイズしてみました。
確かに、タイトル入力部分にカウンターがあると、タイトル文字数が一目瞭然です。
「これはこれで結構便利かも」ということで今回は、上記のような「タイトルの文字数を表示するカスタマイズ」をコピペ一発でできる方法を紹介したいと思います。
また加えて、「半角文字数を0.5」、「全角文字数を1」として数えるカスタマイズ方法も同時に紹介したいと思います。
目次
投稿管理画面のタイトル文字数を表示する方法
カスタマイズ方法は簡単で、以下の項目で紹介するコードどちらかをテーマ（子テーマ）のfunctions.phpにコピペするだけです。
全角半角どちらとも1文字としてカウントする方法
全角・半角の区別なく、どの文字も1文字としてカウントする場合は、以下のコードをfunctions.phpにコピペしてください。
//Wordpress投稿画面のタイトル文字数をカウントする
function count_title_characters() {?>
<script type="text/javascript">
jQuery(document).ready(function($){
//in_selの文字数をカウントしてout_selに出力する
function count_characters(in_sel, out_sel) {
$(out_sel).html( $(in_sel).val().length );
}
//ページ表示に表示エリアを出力
$('#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' );すると、以下のように全半角区別なく1文字としてカウントされます。
![Wordpressタイトルの文字数カウント表示[4]](https://nelog.jp/wp-content/uploads/2017/08/Wordpress4.gif "Wordpressタイトルの文字数カウント表示[4]")
全角は1文字、半角は0.5文字としてカウントする方法
全角は1文字、半角は0.5文字としてカウントしたい場合は、以下のコードを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' );すると以下のように、全角は1文字、半角は0.5文字としてカウントされます。
![全角と半角を分けてタイトル文字数をカウントする[4]](https://nelog.jp/wp-content/uploads/2017/08/4.gif "全角と半角を分けてタイトル文字数をカウントする[4]")
参考
上記で紹介したコードは、以下の記事を参考にさせていただきました。
全角、半角を分けてカウントするJavaScriptコードは以下の記事を参考にさせていただきました。
まとめ
こんな感じで、「タイトルカウンター」をコピペ一発で作成することができます。
僕自身、タイトルの文字数自体は、そこまで気にしておらず、多少長くても付けたいタイトルを記入しています。今では、Googleが勝手にタイトル変更とかしてしまいますし。
ただ、30文字前後（未満）であれば、「意図したタイトルが検索結果に表示される可能性は高い」のは間違いないのかなと。ですので、30文字前後で収まるようであれば、そのような”タイトル付け”をするのも良いのかもしれません。
そんなわけで、「タイトルをつけるとき文字数を分かりやすく表示したい」なんて場合は、結構手軽にできるカスタマイズなので、試してみてください。
ちなみに、当記事のタイトル文字数は32文字です（全半角1文字として）。
すみません。ちょっとお伺いしたいのですが…。
いつも、為になるカスタマイズ方法の記事を書かれていらっしゃり参考にさせて頂いています。
こちらのタイトルの文字数カウントについてですが、
このカスタマイズによって、
（ダッシュボードのカスタマイズなので）サイトの表示スピードに影響はないと考えても良いのでしょうか？
お忙しい中、
恐れ入りますがご返信頂けましたら幸いです。
何卒ご教授お願い申しあげます。