ホームページ&ブログ運営者から次のような相談を受けました。
相談者「以前、ブログの独自テーマを作ってもらったんだけど、 トップページの表示を変更したいんですよね」
私「何か問題でもあるのですか?」
相談者「日付とブログタイトルがシンプルに並んでいるだけなんですよ(下図参照)」

私「確かにシンプルですね」
相談者「これを『画像、日付、ブログタイトル、抜粋』が並ぶように変更したいんです(下図参照)」

私「画像があった方が見栄えは良くなりますよね。わかりました」
この相談を解決するために、WordPressのトップページに画像や抜粋も表示する方法を紹介します。
まずはシンプルに日付とタイトルだけのソースコードを紹介し、 次に画像や抜粋も加えたソースコードを紹介します。
目次
日付とタイトルだけのHTML・CSS

HTML(メインループ部分のみ)
日付とタイトル部分が a タグで囲まれています。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="idx-box">
<a href="<?php the_permalink(); ?>">
<!-- 日付 -->
<time><?php echo get_the_date('Y/m/d'); ?></time>
<!-- タイトル -->
<span class"blog-title"><?php the_title(); ?></span>
</a>
</div>
<?php endwhile; endif; ?>
CSS(PC用のみ)
.idx-box {
margin: 10px 20px;
border-bottom: 1px solid silver;
}
.idx-box a {
text-decoration: none;
color: black;
}
.idx-box time {
color: rgb(241, 79, 79);
margin-right: 25px;
}
「画像・日付・タイトル・抜粋」を表示するHTML・CSS

上図のように、画像や抜粋を加えた場合のHTML・CSSを紹介します。
HTML(メインループ部分のみ)
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="idx-box">
<div class="idx-image">
<!-- アイキャッチ画像があれば表示 -->
<a href="<?php the_permalink(); ?>">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium'); ?>
<?php else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" alt="No Image" />
<?php endif; ?>
</a>
</div>
<div class="idx-text">
<!-- タイトル -->
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-date">
<!-- 日付 -->
<time><?php echo get_the_date(); ?><time>
</div>
<!-- 抜粋 -->
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; endif; ?>
少し長いコードになりましたが、構造だけを示すと次のようになります。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="idx-box">
<div class="idx-image">
<!-- 画像 -->
</div>
<div class="idx-text">
<!-- タイトル -->
<!-- 日付 -->
<!-- 抜粋 -->
</div>
</div>
<?php endwhile; endif; ?>
「div.idx-box」という大枠の中に、 画像用の枠「div.idx-image」とテキスト用の枠「div.idx-text」があるだけです。
この枠内に画像、タイトル、日付、抜粋用のコードを埋め込んでいます。
画像に関しては、アイキャッチ画像を取得。 アイキャッチ画像がなければ、 テーマ内に置いた「images/no-image.jpg」を表示します。
「read more」部分にリンクを付ける
抜粋の「read more」部分にリンクを付けたい場合は、 「function.php」に次のコードを足してください。 文言は自由に設定できます。
// Read more
function new_excerpt_more( $more ) {
<a class="read-more" href="'. get_permalink( get_the_ID() ) . '">[ 続きを読む ]</a> return ' ';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );
CSS(PC用のみ)
CSSも一応載せておきますが、 好きなようにスタイル設定してください。
.idx-box {
border: 1px solid silver;
margin: 5px 2px;
padding: 5px;
display: flex;
width: 100%;
}
.idx-box img {
max-width: 200px;
}
.idx-image {
margin-right: 8px;
width: 200px;
height: auto;
}
.idx-text {
margin-left: 5px;
width: 100%;
}
.idx-text h3 {
margin: 2px 2px;
}
.idx-text a {
color: dimgray;
text-decoration: none;
}
.idx-text .post-date {
background-color: whitesmoke;
color: darkgray;
font-size: 0.9rem;
}
.idx-text p {
margin: 2px 2px;
color: #333;
}