WordPress

【WordPressワードプレス】アイキャッチ画像(サムネイル)を利用し、記事一覧に表示する方法

 

こんにちは、イケゾーです。

アイキャッチ画像とは、記事を読んでもらうために作成する画像です。

例えばニュースサイトでも、記事のタイトルと画像が並んでいて、興味がなくても気になってクリックしたくなりますよね。ただの小さな画像ですが、効果は絶大です。

今回はこちらの機能の使い方を解説していきます。

 

【WordPressワードプレス】アイキャッチ画像(サムネイル)を利用し、記事一覧に表示する方法

こちらは僕のブログの「Code」カテゴリ画面です。それぞれの記事がカードのように表示され、タイトルと本文とアイキャッチ画像が表示されていますね。この機能を使う方法を解説します。

 

この記事はこんな人におすすめ!

  • WordPressのアイキャッチってなに?サムネイルってなに?
  • WordPressのアイキャッチ機能を使いたい
  • WordPressのアイキャッチ画像のサイズを変えたい

 

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

WordPressのアイキャッチ画像とは

アイキャッチ画像とは、記事を読んでもらうために作成する画像です。

例えばニュースサイトでも、記事のタイトルと画像が並んでいて、興味がなくても気になってクリックしたくなりますよね。ただの小さな画像ですが、効果は絶大です。

また、ブログのようなメディアを運営していると、SNSで集客を行います。僕はTwitterで発信をしていますが、あなたのタイムラインに下記2つのツイートがあったら、どちらが魅力的に見えますか?

もちろん右の方が魅力的ですよね。画像の有無でクリック率が大きく変わるのがお分かりいただけたかと思います。

WordPressでアイキャッチ画像の設定をすると、自動でアイキャッチ画像付きツイートが可能です。SNS集客をお考えの方は、いますぐアイキャッチ画像の設定をおすすめします。

 

WordPressのアイキャッチ画像の使い方

では、アイキャッチ画像の使い方を順に解説していきます。

 

function.phpに記述

fuctions.phpを開き、1行追記します。

アイキャッチ画像を使うことをWordPressに宣言するための記述で、追記して保存するとアイキャッチ画像が使えるようになります。

fuctions.php
add_theme_support('post-thumbnails');

 

 

画像サイズの指定

次に、画像のサイズの指定方法を説明します。

使用するページによって使いたいアイキャッチ画像のサイズは異なります。ここでサイズを指定しておくことで、使用するページにおいて適切なサイズの画像を表示することができます。

fuctions.php

add_image_size()関数を使用します。4つの引数を指定して使います。

add_image_size('名前', 幅, 高さ, 切り抜き);
  • 名前:アイキャッチ画像を表示する時に使います
  • 幅:画像の横幅のピクセル
  • 高さ:画像の高さのピクセル
  • 切り抜き:true(画像を切り抜く)、false(画像をリサイズするだけ)

 

下記の例では、トップ画面で使いたいアイキャッチ画像top(1077px × 622px)を作成しました。

// アイキャッチ画像を使う
add_theme_support('post-thumbnails');

	// トップページ用メイン画像のサイズ設定
	add_image_size('top', 1077, 622, true);

 

WordPressではよく使われる画像サイズが、下記のようにデフォルトで設定されています。ちょうど良いサイズがあれば、指定せずに使用できます。

名前 サイズ
thumnail 150px × 150px
medium 300px × 300px
large 640px × 640px
full フルサイズ(アップロードしたサイズ)

 

画像のアップロード

では、画像をWordPressにアップロードしていきましょう。

 

投稿▶︎新規追加を選択し、「アイキャッチ画像を設定」クリックします。

 

メディアライブラリが表示されるので、画像を選択します。フォルダから選択したり、この画面にドラッグ&ドロップでも簡単に追加できます。画像を選択したら、「アイキャッチ画像を設定」をクリックします。

 

アイキャッチ画像に、先ほど選択した画像が表示されていれば、設定完了です。

 

「アイキャッチ画像を設定」がない方

アイキャッチ画像設定を表示にする設定を行います。

右上の「点々ボタン」をクリックして、設定をクリックします。

 

少し下にスクロールして、「アイキャッチ画像」にチェックを入れて、「×」ボタンで閉じましょう。これで「アイキャッチ画像を設定」が表示されたはずです。

 

実際にアイキャッチ画像を表示する

 では実際にアイキャッチ画像を表示していきます。

fuctions.php

the_post_thumbnail関数を使用します。引数には先ほどサイズ指定する際に、記述したtopを使用します

the_post_thumbnail( 'top' );

 

デフォルトで用意されているmediumlargeを使うときは、同様にここで記述します。

引数を与えないと、画像は表示されますが、意図とは違う大きさで表示されてしまう可能性があります。また、必要以上に大きなサイズの画像転送が発生してしまい、サイトの表示速度が落ちてしまう可能性がありますので、適切にサイズ指定する方がベターでしょう。

 

以上で、アイキャッチ画像の設定と使い方について解説しました。

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

まとめ

アイキャッチ画像についてまとめます。

  • 記事を読んでもらうための画像
  • 記事のクリック率が上がる
  • SNSでの発信で効果的

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう


							
  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-WordPress