WordPressの記事タイトルの文字を調整したい!長いタイトルの場合は省略する素敵な方法

 

ブログ記事のタイトルって、その日の気分で長さが変わるワタシです。
ノリノリの時はスッゴク長いタイトルを付けます。
気分が乗らない時は、単語のようなタイトルになることもあります。

 

長いタイトルはデザインを狂わす!

少しこだわったレイアウトにしたブログやWEBサイトは文字数によって
デザインが狂わされ、デザイナーを発狂させます。

記事のタイトルが長いと困る

こんな感じでタイトルが長いと、はみ出したりして「イーーーーーーーーー」ってなります。

自分だけが更新するサイトならちょっと気を使うだけでいいですが、
もし会社のサイトなどで複数の更新者がいる場合、何が起きるかわかりません。

その度に修正するなんてナンセンス!

自動でタイトル文字数を調整してやる!

自動でタイトルの文字数を調整できればスマートですよね?
もちろん、出来ちゃいます!

<?php //the_title(); ?>
<!--タイトル表示テンプレートタグをコメントアウトして追加して下さい-->
<?php 
echo mb_strimwidth($post->post_title, 0, 20, "..."); 
?>

この一行でタイトルの文字数を調整できます。

簡単な流れは下記です。
「$post->post_title」これでタイトルを引っこ抜いて
「 0, 20, “…”」の部分で0文字目から20文字で表示&点々を付ける。

 

注意して下さい!

ここで0文字から20文字と書いていますが1バイト文字という意味です。
つまり、日本語なら1文字で2バイトとなるため上記のソースコードでは
「0文字目から10文字目」という意味になります。

あと、 … の部分を含めての20バイト文字となるため半角の点々が3つあるため
17バイトまでとなり実質8文字までが表示されることになります。

さらに気をつけて下さい。

タイトル中に半角文字と全角文字が混在するとズレが起きますので
希望の文字数2~3文字少なめで設定すると安心でしょう。

完璧な方法ではありませんが気休めにはなります。
完璧にしたい人は・・・できたら教えて下さい(`・ω・´)ゞ

投稿日: 2012/02/22
最終更新日: 2015/12/29
 
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
よく検索されてる記事