WordPressで手っ取り早く「アイキャッチ画像」を利用するための”まとめ”

先日2ヶ月ぶりの記事をアップしたときに、WordPressの管理画面上に「アイキャッチ画像」なる文字を発見しました。
そこで、さっそく使ってみようと画像をアップしてみるんですが、いっこうにページに表示されない。。。
何でかなーと思って調べると、使うための準備が必要な事がわかりました。

いくつかWordPressで作ったサイトを持っているので、すべてのサイトでアイキャッチが使えるようにするために、その作業をまとめておきたいと思います。

アイキャッチ画像を使うための準備

アイキャッチを使うための準備には、WordPressのアイキャッチ画像の使用方法【基本&応用】│でろぐを参考にさせていただきました。

でろぐさんでとてもわかりやすく導入方法をまとめてくれているので、ここではリスト形式にやることだけをまとめたいと思います。

アイキャッチを使うための設定はテーマファイルに対して行います。
WordPressの管理メニューから「外観」->「テーマ編集」へすすんで該当ファイルを編集します。

functions.phpにmysetup()を追加

テーマ編集の画面にテーマのための関数(function.php)があると思いますので、そちらの一番最後に*1 下記のコードを追加します。

/* アイキャッチの設定 */
function mysetup() {
  add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mysetup' );

これで投稿画面からアイキャッチを設定することができるようになるはずです。

投稿画面の右側にこんなブロックが表示されるはず

追加したコードの近くに/* コメント */ を残しておくとあとで何のコードか確認しやすくなりますね。

アイキャッチ画像を表示するためのコードを追加

次に単一記事の投稿(single.php)に、設定したアイキャッチ画像を表示するために下記のコードを追加します。*2

<!--?php the_post_thumbnail(); ?-->

HappyQualityでは本文の一番上に出るように設定してみましたが、コードを入れる位置を変えればどこでも自由に配置できます。本文に回り込ませたりもできますね。
もし、トップページ(記事の一覧画面)などにもアイキャッチを表示したいときはindex.phpにも同じように上記コードを追加します。そのとき、画像のサイズを変えて表示する方法もあるようですよ。詳しくはでろぐさんのところでご覧ください^^

アイキャッチ画像に使える素材サイト

いざアイキャッチを使えるようになりましたが、素材もってねーよ。ってなります。
アイキャッチに使えるような画像がないとせっかくの機能も使えませんので、オススメの写真素材サイトをいくつかご紹介しますね。

紹介するサイトはすべて[クレジット不要][リンク不要][商用OK]のサイトを集めてみましたが、必ずサイトにある利用規約を読んで従った上で利用してくださいね。

写真素材 足成【フリーフォト、無料写真素材サイト】
48,000枚を超える掲載数で風景、モノ、人物写真まで。更新も365日毎日とのこと。
[クレジット不要][リンク不要][商用OK]

【フリー写真素材】モデル・人物の写真素材はモデルピース
人物写真ばかり約2000点。モデルさんも多彩で白抜きが多く素材として使いやすい。
[クレジット不要][リンク不要][商用OK]

フリー写真素材 :: Free.Stocker【無料・商用可・著作権表示不要】
国内、海外の風景写真。(旅行先?)
[クレジット不要][リンク不要][商用OK]

フリー写真素材 Futta.NET – 無料の風景フリー画像
風景写真専門で3000枚。
[クレジット不要][リンク不要][商用OK]

無料DTP素材 【素材ページ 】食材・料理の著作権フリー写真
食材の高画質素材専門で、白抜き画像が多くチラシやweb制作に使いやすい。
[クレジット不要][リンク不要][商用OK]

アイキャッチ画像の作り方

アイキャッチの画像ですが、素材そのままよりも何かひと手間くわえたいものですよね。さいごに写真素材を使って素敵なアイキャッチ画像を作るテクニックをまとめた記事をご紹介します。

webサイトのアイキャッチ画像の作り方 [Cool Web Window]

Cool Web Windowさんは、デザインのテクニックだけでなく、テンプレートや素材配布していたり、SEOなどについても掲載されているサイト制作の総合サイトで、普段からweb制作の参考にさせていただいています。

これでHappyQualityもアイキャッチデビュー。

  1. 関数の中とか出なければどこでもいいですがの外にコードを書かないようにしてくださいね []
  2. テーマによっては最初から組み込まれているものもあると思います。 []
スポンサーリンク
336x280_1
336x280_1

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
336x280_1