【WordPress】記事一覧の表示レイアウトを変更しよう②

こんばんは。

前回の記事では記事一覧の表示レイアウト変更について、以下を行いました。

・完成形のイメージ
・変更箇所の特定
・各記事を並列表示

今回は「トップページ（index）だけレイアウトを変える」「アイキャッチ画像と投稿日の位置を調整する」の2点に取り組んで参ります！

【目次】

トップページ用にcontent.phpを作成

記事表示といっても例えばトップページとカテゴリアーカイブで見せ方を変えたいといったケースもあるでしょう。

テーマファイル内のindex.phpには以下の記述があると思います。

　while ( have_posts() ) :
	the_post();
	get_template_part( 'template-parts/content','' );       
　endwhile;

こちらは、
①「have_post」で記事が存在するか判定
②記事が存在する場合はtemplate-partsフォルダ内のcontent.phpを読み込む
という意味の記述です。

get_template_part関数の2つ目のシングルクオテーション内は「content-〇〇.php」の〇〇を指定します。

つまりここで行うのは、

①template-partsフォルダ内に「content-index.php」を新規作成
②トップページで新着記事を表示するとき「content-index.php」を参照するように書き換える

となります。

記述は以下のように書き換えます。

	get_template_part( 'template-parts/content','index' );       

不要な記述を削除

template-partsフォルダ内にcontent-index.phpを新規作成しましたか？

作成後は一旦content.phpの内容を全てコピペしてください。

まずこちらの画像で「コメントへのリンク」と「編集リンク」は要らないので削除したいと考えています。

・・・ただ以下の理由から今回はentry-footer丸ごと削除しちゃいました。

・投稿日だけ器用に残すのもかえって煩わしい。

・entry-footerそのものがCSSのどこで制御されているか分からず、内容を削除しても変なスペースができてしまう。

必要な記述を作成

次にcontent-index.php内に以下の記述を加えようと思います。

・各記事の投稿日

・アイキャッチ画像

投稿日

<?php the_time('Y/m/d'); ?>

<?php the_date('Y/m/d'); ?>

日付を取得して表示する方法には上記の2つが存在します。

ただしthe_dateについては1ページに同じ日付を2回以上表示することができません。

ですので、今回はthe_timeを使っていきましょう。

アイキャッチ画像

WordPressは各記事ごとにアイキャッチ画像（サムネイル）を設定できるのですが、設定し忘れたり、そもそもサムネイルを用意できていないという事態も起こりうるでしょう。

そこでif文を使って「アイキャッチ画像を取得できたらそのまま表示」、「できなかったら別途用意したNoImageの画像を表示」という風に条件分岐したいと思います。

以下のように記述すればおｋです。

<?php if(has_post_thumbnail()) : ?>
    <?php the_post_thumbnail( array(200, 200) ); ?>
<?php else : ?>
    <img src="https://～.png" alt="noimage" 
	width="200" height="200">
<?php endif; ?>

サムネイル画像があるときはarray（配列指定）で。
ない時はタグでサムネイルの大きさを200×200に制御しています。

divでブロック化

後々CSSで位置関係を制御しやすくするように、投稿日とアイキャッチ画像をそれぞれ要素化しておきましょう。

<div class="thumbnail"> /*親要素*/
　<div class="image">
　　<?php if(has_post_thumbnail()) : ?>
    　<?php the_post_thumbnail( array(200, 200) ); ?>
　　<?php else : ?>
    　<img src="https://gfonius.net/wp-content/uploads/2016/11/noimage.png" alt="noimage" 
	width="200" height="200">
　　<?php endif; ?>
　</div>

　<div class="entry-date">
	<?php the_time('Y/m/d'); ?></div>
</div>

divタグを使って任意のクラス名「thumbnail」「image」「entry-date」を指定して要素化しました。

CSSの変更

最後にCSSを編集してアイキャッチ画像と投稿日の位置関係を整えます。

今回はアイキャッチ画像の左上に投稿日を表示したいと思います。

任意の場所に以下の記述を追加してください。

.thumbnail {
    position: relative;
}

.entry-date {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    background-color: black
}

親要素のthumbnailではpositionでrelative（相対位置）を指定しております。

一方で子要素であるentry-dateはabsolute（絶対位置）＋左上を指定しております。

親要素をrelative、子要素をabsoluteにしたのは表示環境によってレイアウトが崩れないようにするためです。

投稿日の文字も見えやすくするために文字列を白、背景色を黒にしております。

途中経過

ここまでやってWordPressトップページは御覧の状況です。

お世辞にも見栄えが良いとは言えませんが、だんだん目指すものに近づいているのではないでしょうか。

明日から仕事なのでまた来週末に更新できればと思います！

最後まで読んでいただきありがとうございました。