韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPressでブログ作り4(アイキャッチ画像)

WordPress

アイキャッチ画像(サムネイル)を使えるように設定します。

1、functions.phpへの記述

まず、「functions.php」という名前でファイルを新規作成します。そして、下記のように記述します。

<?php 
//アイキャッチ画像
add_theme_support('post-thumbnails');
?>

※「<?php」と、「?>」は、PHPの開始と終了を表すものなので、次からこのfunction.phpにPHPを記述する際は、この中に書いていきます。

これで、管理画面の投稿や固定ページの新規作成で、アイキャッチ画像を設定できるようになります。

スポンサーリンク

2、アイキャッチ画像のサイズ設定

管理画面→設定→メディアで、「サムネイルのサイズ」を設定します。
このブログでは、幅160、高さ160に設定し、「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」にチェックを入れました。

150909thumbnail

このサムネイルは、記事の一覧ページと、「関連記事」に載せるアイキャッチ画像に使用します。

3、サイズの違うアイキャッチ画像を設定(リサイズ)

このブログでは、サイドバーの「人気の記事」に載せる400×200pxのアイキャッチ画像と、「最近の記事」に載せる60x60pxのアイキャッチ画像も作りました。
そのため、上記の1で書いたソースコードの下に、下記のコードを記述します。

/* 再度作成するアイキャッチ画像のサイズ設定 */
// 'popular-thumbnail'という名前で幅400px、高さ200pxのアイキャッチ画像を作成
add_image_size( 'popular-thumbnail', 400, 200, true );
// 'recent-thumbnail'という名前で幅60px、高さ60pxのアイキャッチ画像を作成
add_image_size( 'recent-thumbnail', 60, 60, true );

4、アイキャッチ画像をテーマのテンプレートPHPで使う

準備段階として、投稿を新規作成してアイキャッチ画像を設定しておきます。
そして、アイキャッチ画像を表示したいテンプレートPHPファイル、例えばhome.phpに以下を記述します。

<?php the_post_thumbnail('thumbnail'); ?>

また、3でリサイズしたアイキャッチ画像を使う場合は、以下を記述します。

<?php the_post_thumbnail( 'popular-thumbnail'); ?>
<?php the_post_thumbnail( 'recent-thumbnail'); ?>

※上記のコードは、ワードプレスループの中で使用します。

<?php if ( have_posts() ) : ?>
 <?php while ( have_posts() ): ?>
  <?php the_post(); ?>
  <!-- この中に記述 -->
 <?php endwhile; ?>
<?php endif; ?>

5、プラグイン「regenerate-thumbnails」でサムネイルを再作成

投稿などでアイキャッチ画像を設定した後に、2のように違うサイズのサムネイルを設定すると、本来ならば、もう一度アイキャッチ画像を設定し直さないとなりません。それは面倒なので、プラグインを使います。

プラグイン「regenerate-thumbnails」をインストールして有効化します。
管理画面→ツール→Regen. Thumbnailsで、「Regenerate All Thumbnails」をクリックすると、サムネイルさが再作成されます。

【参考サイト】
思ったより簡単!WordPressのサムネイルを別サイズも含め作り直す方法!!

スポンサーリンク

内容をご確認の上、「送信」ボタンを押してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください