おはようございます、サブロー(@saburo_design)です。

ワードプレスで記事一覧を出力する際に、タイトルと抜粋を出力する機会が多々あると思います。と言ってもタイトルと抜粋を出力するだけなら簡単で、ワードプレスにはテンプレートタグがあります。記事のタイトルを出力するのであれば <?php the_title(); ?>、抜粋文を出力するのであれば <?php the_excerpt(); ?>が用意されており、容易に出力することができます。

不恰好なレイアウト

さてここからが本題ですが、出力される記事によってタイトルの文字数は当然違うので、記事一覧を図のように横並びにするレイアウトの場合、それぞれの高さがバラバラになってしまい不恰好になってしまいます。レイアウトを意識した文字数を考えると言うのも面倒くさいですよね。

そこで今回は記事のタイトルと抜粋文の文字数を指定した数で区切って出力するコードをご紹介したいと思います。

記事タイトルを出力しつつ指定した文字数で切る

スマホやタブレットだと表示される情報がさらに少なくなってしまう。

今まで私は文字が横幅いっぱいまで来たらCSSで文字を切るというやり方をしていたのですが、それだとスマホなど画面の小さいブラウザで見た時に表示されるタイトルの文字が極端に少なくなってしまいます。

以下のサイトを参考にさせて頂きました。ありがとうございます。

以下のコードを <?php the_title(); ?>の代わりにコピペしてください。

高さが揃ったレイアウト

上記のコードでは、記事タイトルを32文字で切り、その末尾に『…』が付くようにしています。これなら文字数に関わらず、高さの揃った横並びのレイアウトが可能です。スマホやタブレットで見ても32文字あれば十分記事の内容が把握できると思います。

抜粋文を出力しつつ指定した文字数で切る

これはもっと簡単です。以下のコードを <?php the_excerpt(); ?>の代わりにコピペしてください。

上記のコードでは、抜粋文の文字数を100文字に制限します。

まとめ

いかがでしたでしょうか?