2018.07.10 

【WordPress】タイトル文字数をリアルタイム表示・文字数制限をかける

Web制作


Google検索結果一覧に表示されるページタイトルは「全角で約32文字」とされています。
SEOやクリック率を考える上でかなり重要な部分かと思いますが、WordPressの投稿画面では文字数が表示されません。なので今回は、投稿画面に文字数カウンターを設置させてみます。

あわせて、ブログの表示上のデザインにも活用できるよう「タイトルが、ある文字数を超えるとテキストを非表示にし『…』を末尾に付ける」というカスタマイズを行います。

もくじ
  1. タイトル文字数をカウントしてリアルタイム表示させる
  2. 記事一覧のタイトル表示に文字数制限をかける

タイトル文字数をカウントしてリアルタイム表示させる

functions.phpに以下のコードをコピペして下さい。
注意点としては、JavaScript(とCSS)の部分はPHPコード外に記述するようにして下さい。
そしてjQueryを使用しているのでライブラリの読み込みは必須です。

このようにタイトル入力欄の右上にリアルタイムカウンターが表示されます。
32文字を超えると赤く表示されます。

全角・半角を区別してカウントしてくれるのがありがたいです。

記事一覧のタイトル表示に文字数制限をかける

実装したいイメージは、まさにこのブログでも使用しているこの部分。
本文で表示しきれない部分を「…」としていますが、これをタイトルにも適用していこうと思います。

記事一覧を扱っているテンプレートのタイトル部分を以下の様にします。
(※分かりやすいようh1タグで囲ってありますが適宜変更して下さい。)

the_title()の代わりに、$postのメンバー変数[post_title]を利用します。
これによって全角32文字を超えた分は「…」に変換されます。

シンプルに制限をつけられるので、タイトル以外にも応用が効きそうですね。

 

【この記事は以下を参考にしました】

【WordPress】タイトル文字数を投稿画面で表示!jQueryで全角カウントする方法
WordPressで投稿記事のタイトル表示に文字数制限をかける
$post WordPress私的マニュアル

 


  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。