wordpressの記事一覧出力の文字数制限

カテゴリー: タグ: , ,


wordpressのブログ記事を一覧にしたページを作ろうと、記事ひとつひとつに対し、
・アイキャッチ画像
・日付
・記事タイトル
を表示させようとした場合、単に記事を画面の上から順に表示させていくのであれば、ほぼ問題ありませんが、しかし、記事をボックスにして横並び表示しようとした場合、ボックスの高さ調整をしなければ、必ずどこかで位置がずれてしまいます。
原因は色々あるのですが、一番の問題はブログ記事のタイトルに使用している文字数です。
タイトルですから全て表示させるのが一番でしょうが、SEOを気にし過ぎたばかりに大量の文字数になったり、ブログではなく商品名や商品番号だったりした場合、そう簡単に統一させるわけにもいきません。
こういった不具合には全てに対して正確に行うのではなく、柔軟に対応するのが一番です。
例えばブログであれば、ある程度の文字数表示をすれば見栄えもよくなりますし、バランスも取りやすくなります。
ではどの程度の文字数表示がいいか・・・?
それは各サイトの状況にもよりますので、ご自身でお考えの上、まずは何文字表示にするかを決め、下記作業を行ってみてください。




通常のタイトル表示/the_title

通常、wordpressでタイトルを表示させようとする場合、

<?php the_title(); ?>

というテンプレートタグを使うと下記のように表示されます。



この場合、アイキャッチ画像下の日付・タイトル枠(背景グレイ)の高さが、タイトル文字数によって異なることがわかります。
この長いタイトルを一覧の時だけ文字数制限をかけ、統一性をもたせます。


文字数制限をかける/wp_trim_words

関数 wp trim words を使って書き換えます。
今回は例として
・表示文字数=30
・文字数が30超の場合は30以降を「・・・」に変換
とした場合、

<?php echo wp_trim_words( get_the_title(), 30, '・・・' ); ?>

と書き換えると、下記のように表示されます。



あとはcssのwhite-spaceを使って整えれば大丈夫かと思います。
ちなみにですが、cssだけで制限することも可能です。
ですがその場合、widthを超えたら1行だけ表示させるという制限になってしまいます。
勿論複数行にすることも可能ですが、全ブラウザに対応していないため、思った通りの仕上がりにはなりません。
折角phpを使っているのですから、ここはphpで制限できる方法を使うのが一番かと思います。

※構築・出来上がりに保証は致しません。ご了承願います。