記事一覧に表示する各記事の抜粋を綺麗に整形表示する

公開日 2014/11/14 更新日 2014/11/30

STINGERのホーム画面や月まとめ等のアーカイブ系のページに表示される記事一覧について、STINGER v3からv5にバージョンアップする際に表示される形式が変更になりました。
本記事ではv5で変更された表示形式のメモと、加えて、STINGER v5を更に綺麗に表示させるための改善について今回やったことを、あわせて整理したいと思います。

Contents

1 STINGER v5における一覧記事の変更点
- 1.1 一覧記事の表示仕様の変更点について個人的な見解
2 改善したいポイント
3 変更内容
- 3.1 ソース修正内容の抜粋
4 変更後の感触
5 変更暦

STINGER v5における一覧記事の変更点

STINGER v3とv5の記事一覧の表示形式の違いについてですが、ざっくりと表面的な動作と内部の作りについて比較すると次のような変更点となります。

分類	項目	STINGER v3	STINGER v5
表面的な動作	表示する原稿	記事の抜粋欄の内容または本文内容のうち先頭の100文字分	記事の抜粋欄の内容または本文内容のうち先頭の110文字分
表面的な動作	境界の表現	「続きを読む」ボタンを表示	最後に[...]（角括弧＋三点リーダー）を表示 ※
内部の作り	原稿取得に使っているWordPress(関数\|変数)	$post->post_content	the_excerpt()
内部の作り	表示する文字数の変更	呼び元で使っているmb_substr()の第3引数で指定した文字数にてカット	add_filter( 'excerpt_length', 'custom_excerpt_length', 999 ); にて指定した文字数にてカット

※詳細はWordPressマニュアル(the excerpt)を参照。

このへんの変更点はSTINGER公式には明記されていなかったのですが、並べてみるとデザイン上、違いが出る変更がなされている箇所のようです。
影響が出る部分は、続きを読むボタンの廃止、表示文字数を拡張するカスタマイズ方法の変更、の2点。

一覧記事の表示仕様の変更点について個人的な見解

続きを読むボタンの廃止
見出しをクリックすることでも続きを読むボタン同様に記事ページに移動できるので、個人的にはボタンを設置しなくても良い気がしてます。
ということで、この変更はインパクトなしと判断しております。
表示文字数を拡張するカスタマイズ方法の変更
こちらも影響なしと考えてますが、私はどちらかというと文字数指定ではなく、こちらの記事でSTINGER v3に対して改善した「続きを読む」タグまでの表示というカスタマイズをしていたので、同一箇所への変更が重なったために影響があります。
今回v5でも「続きを読む」タグまでの表示をやろうと思った場合、v3用の記事をそのまま適用することができなくなってしまったので、v5での実現方法を考える必要がありそうです。

改善したいポイント

STINGER v5になってフォントサイズが小さくなったので記事本文が主張しなくなって個人的にはすっきりしたと思ってます。
ただしSTINGERそのままだとv3でもv5でも、WordPressの機能を活用して記事の出力結果を作成してるところから、どうしても以下の点が不満だったりします。

見出しの行末改行が無視される
記事ページまで進めば見出しが適切に改行した内容が表示されますが、一覧ページの抜粋側はこの改行がなくなるので非常に読みづらくなります。
規定文字数になると文章の途中で終わってしまう
上限に達すると文章の途中で終わってしまうので、一覧ページが読みにくいものになってしまいます。

こちらの記事では2番目のみ改善してましたが、本記事では上記2件をすべて改善する方法をまとめたいと思います。

変更内容

以下のファイルに対する修正をします。

itiran.php
the_excerpt()をget_the_content()に変更。これにより「続きを読む」タグまでの原稿を取得してます。
さらに、h1～h5タグについて行末に改行を追加。最後に不要なタグ＆ショートコードを削除。
詳細は後続のソース抜粋を参照ください。

ソース修正内容の抜粋

itiran.phpファイルに対する変更前後で、★箇所に対比して表示してます。

      <div class="smanone">
        <!--★削除-->
        <!--<?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>-->
        <!--★追加-->
        <?php
          $content = get_the_content('');
          $content = preg_replace('/<\/?h[1-5]>/', '<br>', $content); // hNタグを改行に置換
          $content = strip_tags($content, '<br>'); // 改行以外のタグを除去
          $content = preg_replace('/<br>[ \t\r\n]*<br>/s', '<br>', $content); // 複数の改行を集約
          $content = preg_replace('/^[ \t\r\n]*<br>/s', '', $content); // 先頭の改行を除去
          $content = preg_replace('/\[[^]]*\]/', '', $content); // ショートコードすべて除去
          echo '<p>' . $content . '</p>';
        ?>
      </div>