記事一覧に表示する各記事の概要を「続きを読む」タグまでにする

Information

この記事はSTINGER v3用のカスタマイズ方法です。STINGER v5に対するカスタマイズはこちらの記事で考えました。

STINGERの記事一覧の表示方法と気になるポイント

STINGERのようなブログ向けWordPressテンプレートのパターンとして、記事一覧ページに、見出しと記事本文の先頭部分を切り抜いた抜粋が並びます。
ここでSTINGERそのままだと、本文は「先頭からの100文字分」という固定文字数の指定で切り抜かれています。
そのため、本文に書いた内容が100文字以上だった場合、文章が途中で切れてしまい一覧ページが読みづらい仕上がりとなってしまいます。

この境界である100文字ピッタリで1文を書き切るようにすれば問題ないのですが、すべての記事を100文字で区切ることができれば良いのだけど、こだわるところが違う気がします。

テンプレートを編集することで、100文字の境界を大きく引き上げることもできるのですが、大きくした境界付近でさらに文章が切れてしまうのでやはり同じ問題が起きてしまいます。

しかも、記事一覧ページなのだから、境界は無尽蔵に大きくするデザインというのは、あまりよろしくないと思います。

改善方法の検討

しばらくWordPressで記事を書いていて、本件に関連してエディタ上部のアイコンに「続きを読むタグを挿入」というボタンがあることが気がつきました。
このボタンは記事中に”- – MORE – -“というアイキャッチをいれてくれるものなのですが、「テキスト」モードに切り替えて見るとHTMLコメントタグで「<!–more–>」と入力されるもののようです。

しかし、この続きを読むタグって、入れたはいいけどSTINGERの場合は何も起こりません。
テンプレートによってはきちんと解釈できていて、意味があるのかもしれません。
そこで境界条件として、文字数だけではなく「続きを読むタグ」までに絞るカスタマイズ方法を考えてみました。

本文のピックアップルールの変更内容

至ってシンプルですが、以下のように最初に「続きを読むタグ」(<!–more–>)以降の削除を追加します。
最初に<!–more–>までに絞ることで、最大文字列長以内に収まった場合は2番のルールでは変更がないので、これが結果として区切りたい位置までの表示が実現します。

1. PHP言語のpreg_replace命令を使った正規表現で、<!–more–>が出現する以降すべての文字列を除外 [NEW]
2. 最大文字列長(=100文字)を指定して、先頭からの文字列に絞る

対象ファイル

• archive.php
• home.php
• index.php
• page-itiran.php
• search.php
• single.php

ただし、archive.phpとhome.php以外のファイルについては、本文として出力する文字数が少ない設定になっているので、この記事による変更の効果はあまり出ないかと思います。

変更内容

前後で比較して、以下のように記載します。

preg_replace命令の補足

簡単にですが、今回preg_replace命令で指定した引数について補足します。

preg_replace( ‘/<!–more–>.*/s’, ”, $post->post_content )

関数には引数を3つ指定します。

1. 引数1「’/<!–more–>.*/s’」
2. 引数2「”」
3. 引数3「$post->post_content」

引数1が正規表現を指定していて、ここでは<!–more–>という文字列が見つかったら以降の記事全ての文字列がヒットするという指定です。
引数2は引数1で見つけた文字列の変換後の文字列です。ここでは空文字にすることで削除と同じ動きになります。
引数3は入力となる文字列で、記事の内容が渡ってきます。

preg_replaceは引数で指定した変換処理が終わると変換後の文字列を返却します。
そのため変更前と同じ位置に被せることができますので、変更後は関数を1個ネストしているだけになります。

変更後の使用感

切れて欲しいところで切れてくれるという動きが、投稿者にとっては、いい感じに自分で制御してる気がしてくるので良い気がします。

最初に「続きを読むタグ」以降を削除しているため、その後に絞り込むための先頭からの最大文字列長はデフォルトの100文字だけでなく、200文字など大きな値に拡張しても、それはそれでうまくいく気がします。

さらに、画面に影響の出る「意味のあるタグ」として日頃から使うように心がけることから、より整理できるブログづくりにつながるような気がします。