賢威8‥ワードプレスにタイトル文字カウンターを表示させる方法

ワードプレスで投稿する記事のタイトルの文字数は、SEO的に32文字程度がいいと言われています。

別にGoogle様が『32文字タイトルをヒイキするぞよ』と言っているわけではなく、Googleの検索結果に表示されるが記事名が最大32文字前後だと見やすいので、結果的にSEO対策になる・・というわけです。

だから別に絶対に32文字!にこだわる必要はないですよ~。最大32文字前後を使って記事の内容をわかりやすくタイトルに盛り込めたらOK。

タイトル文字数カウンターの設置方法

ところが、ワードプレスの記事投稿画面にはタイトル文字数のカウンターがついていません。記事の文字数カウンターはありますけどね。

ワードプレスのテーマによってはあるのかもしれませんが、賢威8にはありません。

こんな風にタイトル文字数カウンターもあったら便利ですよね。

その設定の仕方をシェアします。テーマファイルをいじりますが、とっても簡単です。

賢威8の場合は子テーマのfunctions.phpに、以下に紹介するコードをコピペするだけです。

それ以外のテンプレートでも基本functions.phpにコピペです。

賢威8のfunctions.phpの編集方法

【外観】→【テーマエディタ】→【テーマのための関数(functions.php)】を選べば編集画面が出てきます。

全角半角どちらも1文字で数えるコード

↓ここから↓

//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’ );

↑ここまで↑

半角を0.5文字とカウントするコード

↓ここから↓

//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’ );

↑ここまで↑

コピペするだけで簡単に設置できるのでぜひ試してみてくださいね。

アンケートにご協力下さいませ♪

人気ブログランキングに参加しています。
記事がお役に立てたらアイコンをクリックしてくださいませ♪


人気ブログランキング

なおがひきこもりながら稼いでいるその方法とは?

何かご質問があればお気軽にメールくださいね。お待ちしています♪

お問い合わせはこちらから