WordPress - ブログのトップページに画像や抜粋を載せたい

WordPress 開発者向け

ホームページ＆ブログ運営者から次のような相談を受けました。

相談者「以前、ブログの独自テーマを作ってもらったんだけど、 トップページの表示を変更したいんですよね」

私「何か問題でもあるのですか？」

相談者「日付とブログタイトルがシンプルに並んでいるだけなんですよ（下図参照）」

画像なしのトップページ

私「確かにシンプルですね」

相談者「これを『画像、日付、ブログタイトル、抜粋』が並ぶように変更したいんです（下図参照）」

画像・抜粋付きトップページ

私「画像があった方が見栄えは良くなりますよね。わかりました」

この相談を解決するために、WordPressのトップページに画像や抜粋も表示する方法を紹介します。

まずはシンプルに日付とタイトルだけのソースコードを紹介し、 次に画像や抜粋も加えたソースコードを紹介します。

日付とタイトルだけのHTML・CSS

画像なしのトップページ
上図のように、日付とタイトルだけが表示されている場合の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;
}