ゼロから始めるWordPress自作テーマ #3「投稿にサムネイル画像を表示しよう」

「0から始める自作テーマでWordPress作成」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。

WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。

第3回は「投稿にサムネイル画像を表示しよう」です。

以下のように、トップページの投稿一覧にサムネイル画像が表示できるようになります。

トップページにサムネイル画像を表示する

サムネイル機能を有効化する

サムネイル画像を表示するためには、まずWordPressのサムネイル機能を有効化する必要があります。サムネイル機能の有効化は、functions.php ファイルに記述します。functions.php というファイルを(FTPソフトなどで)新規追加して、以下のように記述します。

<?php // これ以下にPHPのコードを書くよ、という合図

// サムネイル画像を有効にする
add_theme_support( 'post-thumbnails' );

これで、サムネイル機能が有効化されました。

投稿にサムネイル画像を登録する

functions.php の設定が完了できると、投稿の編集画面上でサムネイル画像を登録できるようになります。以下のように「投稿」>「アイキャッチ画像」で登録できます。

投稿編集画面でサムネイル画像を登録する

これまでに作成した投稿記事に、アイキャッチ画像を登録しておきます。

トップページにサムネイル画像を表示する

サムネイル画像を表示するには、the_post_thumbnailという関数を用います。関数の詳細についてはリンク先の情報が参考になります。

単純にサムネイル画像を取得するには、以下のように画像サイズだけを指定すればOKです。

the_post_thumbnail();                     // パラメータなし -> 'post-thumbnail'
 
the_post_thumbnail( 'thumbnail' );        // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' );           // 中サイズ   (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' );            // 大サイズ   (デフォルト 640px x 640px :最大値)
the_post_thumbnail( 'full' );             // フルサイズ (アップロードした画像の元サイズ)
 
the_post_thumbnail( array( 100, 100 ) );  // 他のサイズ

前回、トップページに記事一覧を表示したので、今回はそれにサムネイル画像を追加で表示します。以下のコードのように index.php に追記します。

  <div>
      <!-- 投稿の数だけ繰り返して処理する -->
      <?php while (have_posts()) : ?>
        
        <!-- 投稿を取得 -->
        <?php the_post(); ?>

        <div>
          <hr>
          <!-- 投稿のタイトルを表示して、投稿ページへのリンクを張る -->
          <h3><a href="<?php echo get_permalink(); ?>"><?php echo the_title(); ?></a></h3>
          <!-- カテゴリを表示する -->
          <p><?php the_category(', '); ?></p>
          <!-- 投稿日時をを表示する -->
          <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
          <!-- サムネイル画像を表示する -->
          <figure>
            <?php the_post_thumbnail( 'thumbnail' ); ?>
          </figure>
        </div>

      <?php endwhile; ?>
    </div>

これで、トップページに投稿のサムネイル画像が表示されるようになりました。

まとめ

今回は、新たに functions.php というファイルを追加して、投稿のサムネイル画像を表示できるようにしました。画像が表示できるようになったので、大分ブログっぽい見た目になってきました。