前回の続きです。
今回は投稿一覧の個々の内容を表示するためのテンプレートな部品である、
parts/content-excerpt.php について作業を進めて行きたいと思います。
構造
まずは構造ですが、以下のようにしたいと思います。
投稿のタイトル、メタ情報、アイキャッチ画像（あれば）、投稿の抜粋をそれぞれ表示します。
そして、それらを <section> で囲むことにします。
とりあえず何でも <div> でやっちゃっても良いのですが、
こちらを参考に構造的に良さげなタグを選んでみたいと思います。
1ページに表示する最大投稿数はキリよく10件とし、
管理画面の「ダッシュボード＞設定＞表示設定」で設定しておきます。
タイトル
タイトルを表示するにはその名もズバリな the_title() というテンプレートタグを使います。
例えば以下のような感じ。タイトル名は WordPress が自動で入れてくれるようです。
<?php the_title( '<h2>', '</h2>' ); ?> そして、リンク化します。
該投稿のリンクは get_permalink() で取得することが出来ます。
そして、esc_url() を使ってちゃんとエスケープしておきます。
エスケープというのは、悪意のある文字とか入っていないかを検証し、無害化する処理ということです。
具体的にどんな文字が問題になるかはよく分かっていませんが、お決まりの作法のようです(^_^;)
こちらに書かれているように３種類のエスケープがあるので、
HTMLの内容、HTMLの属性、リンクアドレス用のそれぞれで使い分けることになりますね。
ということで、
投稿のタイトルを出力するコードは以下のようになりました。
<h2> でやることにしました。
クラス名とかは「Twenty Twenty-One」な標準テーマとかのコードを参考にして付けています。
<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s">',esc_url( get_permalink() ) ),'</a></h2>' ); ?>メタ情報
メタ情報としては投稿日がまず必ず存在します。
そして更新日、属するカテゴリーやタグは状況に応じて存在することになります。
これらを更新日、投稿日、カテゴリ、タグ、という順番に並べて表示したいと思います。
なお、属するカテゴリやタグは複数個存在する場合があります。
投稿日は get_the_date()、更新日は get_the_modified_date() で取得できます。
更新日があるかどうかは上記の２つの関数の結果を比較することで判定できます。
カテゴリは、has_category() で存在確認して、get_the_category_list() でそのリストを取得できます。
同様にタグは、has_tag() で存在確認して、get_the_tag_list() でそのリストを取得できます。
なお、日付部分は <time> で囲ってやります。
そして、datetime 属性については W3C準拠の書式で値を入れるようにします。
また、published や updated といった分かりやすい名前のクラスを付与するのが良いようです。
ということで、
メタ情報を出力するコードは以下のようになりました。
必要に応じて適宜クラス名を付与しています。
<?php
echo '<div class="meta">';
if ( get_the_date() != get_the_modified_date() ) {
// 更新日。
printf( '<span class="updated-date"><time class="entry-date updated" datetime="%s">%s</time></span>',
esc_attr( get_the_modified_date( DATE_W3C ) ),
esc_html( get_the_modified_date() )
);
}
// 投稿日。
printf( '<span class="published-date"><time class="entry-date published%s" datetime="%s">%s</time></span>',
get_the_date() != get_the_modified_date() ? '' : ' updated', // 投稿日と更新日が同じ場合は updated を追加。
esc_attr( get_the_date( DATE_W3C ) ),
esc_html( get_the_date() )
);
if ( has_category() ) {
// カテゴリ。
printf( '<span class="cat-links">%s</span>', get_the_category_list( ', ' ) );
}
if ( has_tag() ) {
// タグ。
printf( '<span class="tag-links">%s</span>', get_the_tag_list( '',', ') );
}
echo '</div>';アイキャッチ画像
アイキャッチ画像は has_post_thumbnail() で存在確認し、the_post_thumbnail() で出力できます。
画像は <figure> で囲むようにします。
なお、<figure> はCSSで左に float させるようにします。
また、画像の大きさについても max-width とか使って、ある程度の幅に制限するつもりでいます。
ということで、
アイキャッチ画像を出力するコードは以下のようになりました。
<?php if ( has_post_thumbnail() ) : ?>
<figure class="post-thumbnail"><?php the_post_thumbnail(); ?></figure>
<?php endif; ?>投稿の抜粋
投稿の抜粋は、投稿の冒頭の一部分を取り出したものとなります。the_excerpt() で出力することができます。
説明ページに以下のような記述があります。そのまま引用します。
（注） 日本語のように語句の間を半角スペースで区切らない言語では「55単語」を判定できないため、抜粋できずに本文のほとんどが出力されてしまうことがあります。
WordPress 日本語版では、この問題を含むマルチバイト関連の問題に対処するために WP Multibyte Patch プラグインを同梱しています。このプラグインを使用すると、110文字まで（設定により変更可）を抜粋文として出力できます。
既定の抜粋では、欧文を想定した「55単語」となっているようです。
日本語の場合は単語を空白区切りで記述したりしないので、110文字となっているようですね。
ということで、
投稿の抜粋を出力するコードは以下のようになりました。
<?php
echo '<div class="content-excerpt">';
the_excerpt();
echo '</div>';parts/content-excerpt.php のコード
ということで、parts/content-excerpt.php のコードは以下のようになりました。
メタ情報やアイキャッチ画像については、テンプレート部品の形で読み込むようにしました。
それぞれ parts/meta.php、parts/thumbnail.php となります。
また、アイキャッチ画像は float させるので、その解除のために clearfix なクラスを付与しました。
<?php
echo '<section class="post clearfix">';
the_title( sprintf( '<h2 class="entry-title"><a href="%s">',esc_url( get_permalink() ) ),'</a></h2>' );
get_template_part( 'parts/meta' );
get_template_part( 'parts/thumbnail' );
echo '<div class="content-excerpt">';
the_excerpt();
echo '</div>';
echo '</section>';次回は、ページ割り(pagination)についてやってみたいと思います。