ゼロから始めるWordPress自作テーマ #3「投稿にサムネイル画像を表示しよう」
WordPress「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 というファイルを追加して、投稿のサムネイル画像を表示できるようにしました。画像が表示できるようになったので、大分ブログっぽい見た目になってきました。