かわたま.net

Enjoy Creative! かわたまのwebメモ

wordpressでタイトル、または本文の文字数を制限して表示する実装方法

2014 May 20

Tag:

トップページやブログの一覧ページでは、投稿のタイトルや本文の文字数を制限(カット)して表示させると統一感がでて見た目が綺麗に!かつレイアウト崩れを防げます。

タイトルの最大文字表示数を指定する

<a title="<?php the_title(); ?>" href="<?php the_permalink() ?>"><?php echo mb_substr(strip_tags($post->post_title), 0, 20); ?>...</a>

・mb_substr は文字列の一部を得る関数
・1つ目の引数は対象となるコンテンツを指定
・2つ目の引数はトリム開始位置(0=1文字目から文字数をカウント)
・3つ目の引数はトリム終了までの文字数(20文字目までを表示)

本文の最大文字表示数を指定する

<a title="記事詳細へ" href="<?php the_permalink() ?>"><?php echo mb_substr(strip_tags($post->post_content), 0, 60); ?>...</a>

※文章に続きがあることを想像させるために、php閉じタグ( ?> ) のあとに「…」を入れています。
※全角文字と半角文字は幅が変わりますが、同じ1文字としてカウントされます。
※投稿コンテンツにショートコードが含まれる場合、ショートコードをそのまま出力するので要注意です。