WordPressの記事一覧に件数を指定してアイキャッチ画像を表示する方法

先日、このブログのトップページにアイキャッチ画像を追加したので、その方法を備忘録として書き残しておきます。

このブログのトップページの記事一覧では、最初の15件の記事でアイキャッチ画像が設定されているもののみ表示するようにしました。以下がその方法です。

1. functions.phpでアイキャッチ画像を有効にする

まずはアイキャッチ画像を有効にするために、functions.phpに以下を追加します。

add_theme_support( 'post-thumbnails' );

2. 記事をカウントする変数を追加する

記事一覧を表示するLoop内に、記事数をカウントする変数を追加します。

<?php $postcount++; ?>

3. 条件式を追加してアイキャッチを表示させる

今回は以下の2つの条件を満たす場合のみ、アイキャッチ画像を表示するためのHTMLコードを挿入するようにしています。

1. 最初の15件
2. アイキャッチ画像が設定されている

<?php if ($postcount <= 15 and has_post_thumbnail()) : ?>
  <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php echo get_the_post_thumbnail( $post_id, 'thumbnail' ); ?></a>
<?php endif; ?>

1つ目の条件は、先ほど追加した$postcountをチェックして、$postcount <= 15で15件以下の場合に表示するように指定しています。

2つ目の条件は、WordPressの関数のhas_post_thumbnail() を使って、アイキャッチ画像が設定されているかチェックしています。

アイキャッチ画像の表示には、WordPressのテンプレートタグのget_the_post_thumbnail() を使います。

<?php echo get_the_post_thumbnail( $post_id, 'thumbnail' ); ?>

最終的にアイキャッチ画像を表示する部分のソースコードは以下のようになっています。これが一番効率の良いやり方なのかはわかりませんが、ご参考までに。

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <?php $postcount++; ?>
      <div <?php post_class( 'title-set' ); ?>>
        <div class="title<?php if ($postcount <= 15 and has_post_thumbnail()) : ?> has-thumb<?php endif; ?>">
          <?php if ($postcount <= 15 and has_post_thumbnail()) : ?>
            <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php echo get_the_post_thumbnail( $post_id, 'thumbnail' ); ?></a>
          <?php endif; ?>
          <p class="category"><?php the_category('、') ?> | <?php the_time('Y.m.d') ?></p>
          <h3><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
        </div>
      </div>

      ...

以上、WordPressの記事一覧に、件数を指定してアイキャッチ画像を表示する方法でした。こういったことが簡単にできて、WordPressって便利ですね〜。

2016年5月9日に公開され、2017年2月25日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存