WordPressの投稿画面でのタイトル文字数カウントについて

この記事の所要時間は約 7 分 です。

keitaitomba_TP_V一般論ではあるが、「○○を実現したほうが良い」「○○をするとこんなメリットがあります!」という情報に触れた時には、是非、実践してみたい!と思うわけだが、いざ、これを行動に移そうとすると、意外と続かないことが多かったりしないだろうか。

人間は、習慣に強く影響される生き物だと思う。止めたくても止められない習慣がある人は理解できると思うが、習慣となってしまっていると、無意識でその行動をしている……ということはないだろうか?習慣を変えるためには、強いパワーが必要になるのだ。

新しいことを始めるにも、それと同様のことが言えて、習慣化するには、それを推し進める何かがないといけない。それを実行する上での補助ツールの導入は効果的だと思う。

例えば、朝、文章を書くとよい……という話を聞いたときには、よし!実践しよう!と思っていたものだが、これを習慣化するには、なかなか苦労していた。そもそも、文章を書く……という習慣がなかったわけで、この点は、ずいぶんとWorkflowyに助けられている部分がある。ただ、これは本題ではないので、別記事として後で書く。

ブログ記事のタイトル文字数のカウント

前置きが長くなったが、ブログ記事のタイトル文字数をカウントする仕組みを導入してみた。

以前、ブログ記事のタイトルについて、いくつかチェックポイントを考えていたわけだが、これは目に付くところに貼り出すなどして、意識しないと難しい。つまりは、まだ、習慣化していないので、補助ツールが必要なのではないか、と思った次第。

ブログ記事につけるタイトルで気を使うべき5つのこと
はてなブックマークのホッテントリのタイトルを分析し、ホッテントリ入りするような記事タイトルを生成するサービスがあるが、この「ホッテントリメー...

バズ部のWordPressテーマ『Xeory』などで、タイトルの文字数をカウントする機能がついているだけでなく、SEOに効かせるためのチェックポイントがブログ投稿画面に表示されていると言う。

これは、非常によい仕組みだと思うが、今更、Simplicityから乗り換えるわけにもいかない。なので、せめて、記事タイトルの文字数をカウントするプラグインとかがあると良いのだが……と調べてみた。

WordPressのfunction.phpにロジックを追記し、これを実装している人がいた。

http://wispyon.com/title-counter-wordpress/

<?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 = 28; //スタイルを変更する文字数(必要ない場合は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 } ?>

紹介されているコードをそのまま持ってきてしまったが、是非、解説については、元記事も参照してみていただきたい。

全角は1文字、半角は0.5文字としてカウントされるとのことで、28文字制限などで言われるGoogleの検索結果画面をしっかりと意識している作りだ。

TITLE_COUNTER_MAX_LENGTH“に設定された文字数を超えると、赤文字になるという細かい仕様が嬉しい。

子テーマに入れる

私の場合は、このスクリプトを子テーマに入れてみることとした。

WordPressのテーマファイルに直接記載すると、テーマのアップデートのタイミングなどで面倒だし、子テーマ推奨かな……と思っている。

「初期のジャズ」を構築した際に、カスタム投稿タイプでガンガンにカスタマイズしたのだが、なかなかメンテナンスが厳しい感じになっているので、子テーマに分けておくのは有効だと思う。

子テーマを編集する際に、WordPress管理画面の「テーマ編集」画面から実施すると、誤ったロジックを書き加えると、WordPress全体が500サーバエラーなどでアクセスできなくなるので、注意したい。

実は、私もこの罠にはまって、サーバのコンソールからvimで編集しなおすことになった。

「WordPressの投稿画面でのタイトル文字数カウントについて」で、26.5文字と表示されており、非常に良い感じだ。

スポンサーリンク

フォローする