【カスタマイズ】ビジュアルエディタの記事タイトル 文字数カウント

サイト運営Luxeritas, Wordpress

この記事は約 4 分で読めます。

Google検索で表示される記事タイトルは32文字までです。SEO観点では、Wordpressのビジュアルエディタでタイトルを入力するときに32文字以下となっているか確認した方が良いのです。しかし、未カスタマイズ状態ではタイトルの文字数を自分でカウントする必要があります。

それでは面倒なので、タイトル文字数をカウントするスクリプトをご紹介します。

タイトル 文字数カウント カスタマイズの場所

以下のソースコードをfunction.phpにコピペすればビジュアルエディタのタイトル欄の右上に小さく数字が表示されるようになります。

Luxeritasの場合は、カスタマイズ⇒子テーマの編集⇒function.phpで行けると思います。

その他のテーマの場合は、function.phpを編集する方法が違うと思うので、直接いじるなり、そのテーマのやり方に従ってください。

タイトル 文字数カウントのソースコード

<?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 } ?>