KITAMULABO

WordPressテーマで記事リストの出力をコントロールする

2021.2.3

WordPressではトップページやアーカイブページ等、記事リストの一覧を表示しますが、その表示の仕方をもっと柔軟に出力できるよう、色々試してみました。

よくある2つのパターン

配布されているテーマでもよく見かける一般的なやり方は次の2種類です。

どちらもメインループ内に記述するWordPressのテンプレート関数です。上のthe_excerpt()は抜粋を設定していればそれを表示、なければ本文を指定された文字数分だけカットして表示します。ただこれは本文中の文字情報だけを取得するので、画像とか他のタグも一覧内で表示させておきたいと言うときは使えません。

そんなときは下のthe_content()を使用します。こちらは単純に本文を表示させる関数ですが、本文中にmoreタグ(続きを読む)があればそこで切ってくれます。これなら文字情報だけに限らず任意の場所で切り出すことが可能です。ただしmoreタグを設定してない記事では全ての内容を表示してしまうことになります。今から新しいホームページを始めるならいいかもしれませんが、過去にさかのぼって全ての記事にmoreタグを入れ直すのは正直面倒くさいです。

PHPで条件分岐

ということで、どちらでも対応できない場合は自分で条件分けをするしかありません。改めて今回の更新でやりたかった動作をまとめてみます。

①moreタグがある場合はmoreタグでカットして表示
②短い記事は全文表
③長い記事は適当なところでカットして表示
④リストではなく単一ページの場合は全文表示

まずはメインループの中で本文全体を取得します。通常ならget_the_content()を使用するところですが、今回は$post->post_contentで呼び出したものをget_extended()に入れています。get_extended()はmoreタグの前後で本文をカットしてくれる関数で、moreタグ前を[‘main’]に後を[‘extended’]に入れられます。moreタグがなければ[‘extended’]は空になるので、$more_contentがあればmoreタグがあるよっていう条件分岐ができます。

次に本文が短いかどうかの判断はタグを除いた本文の文字数を数えます。

strip_tags()でタグを外し、mb_strlen()でマルチバイト換算で文字数をカウントします。短ければ切らずに出力します。しかしここで問題になるのが、この指定した文字数を超えた場合にどこで切るのかと言うことです。文字だけじゃないので単純に文字数で切ってしまうとレイアウトが崩壊します。色々悩んでこんな感じにしました。

多少長くなっていますが、ざっくりいうと2回めのpタグ、“<p”の位置を検索してそこで分けるという処理を行っています。

これでHTML的な構文が途切れずにきれいに本文を分けることが可能になりました。最終的に単一ページかどうかの判定も加えて出来たのが以下。

続きを読む~後半部分をアコーディオンにして、その場で展開

最後に、続きがある場合のみページリンクを出力、してもいいのですが、スマホで続けて読みやすいように、アコーディオンのようにその場で続きを展開できるようにしました。inputタグ+labelをCSSだけで非表示から表示に切り替えられます。CSSも合わせたこの動作については別記事で解説します。

まとめ

条件さえはっきり定義できれば、投稿リストもPHPで自由に出力することが出来ます。ぜひお試しを。

この記事がよかったら
:
:

この記事にコメントする

サイト全体へのご意見・ご感想はBBSからお願いします

CAPTCHA


このページのトップへ戻る