まずアイキャッチ画像とはユーザーの目（eye）を引きつける（catch）画像になります。
文字だけの情報より画像を用いる事により記事が読まれやすくなる効果が見込まれます。
まぁ要するに「ブログ記事の内容を表すかっちょいい画像で人を惹きつけてサイトのアクセスを伸ばす」という事ではないかと思います。
WordPressでは画像アップロード時に自動で数種類のサイズが作成されます。
アイキャッチ画像の設定
下準備
自分のブログのテーマがアイキャッチ画像に対応していない場合はfunctions.phpに下記を挿入。
add_theme_support('post-thumbnails');
下図の右下の箇所にアイキャッチ画像のフィールドが表示されます。
これで下準備はOK。
画像サイズ・画像の種類の変更
ファイルアップロード時に書き出される画像サイズ・画像の種類を確認。
設定＞メディアで移動。赤枠の箇所でサイズ変更は可能。
デフォルトでは
サムネイル画像、中サイズ、大サイズが用意されております。
あとアップロードした元のオリジナルサイズも含めて合計5種類の画像ファイルがアップされることになります。
5種類？？
予定では4種類の想定でしたが
なぜかファイル名-768×512.拡張子の画像も生成されていました。
まぁ考えて見ると768×512サイズもあった方が良いサイズなので結果オーライですが・・・
アップロードしたファイルは
自分のwordpressをインストールした場所/wp-content/uploads/
で確認できます。
- ※アップロード先の変更をしていない場合に限ります。
毎回これだけの種類のファイルが溜まっていくとサーバーの容量を圧迫してしまいますので本当に必要な画像のみを自動生成するように変更。
下図の赤枠の箇所で不必要な画像の種類の数字をを0にすることで画像生成は行われません。
下図は設定変更後
- ※他の投稿ページに影響がある仕様の場合は管理画面で変更せずにfunctions.phpで変更する方がベスト。
5種類から3種類に削減成功。
- オリジナル画像: og:image用に1200×800で用意。
- 768×512画像（自動生成）: キービジュアルやメイン箇所のサムネイルで使用。
- 320×213画像（自動生成）: サイドバー箇所のサムネイルで使用。
として当サイトでは扱ってます。
- ※なぜ作成されるかわかり次第追記予定。
アイキャッチ画像の表示
基本下記で出力されます。
the_post_thumbnail()
出力結果
<img width="1200" height="800" src="https://keprate.com/wp-content/uploads/2018/02/css_form.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="css_form" srcset="https://keprate.com/wp-content/uploads/2018/02/css_form.png 1200w, https://keprate.com/wp-content/uploads/2018/02/css_form-300x200.png 300w, https://keprate.com/wp-content/uploads/2018/02/css_form-768x512.png 768w, https://keprate.com/wp-content/uploads/2018/02/css_form-1024x683.png 1024w" sizes="(max-width: 1200px) 100vw, 1200px" />
imgタグとしてどえらい大層な感じのソースコードが出力されて個人的にこれでは非常に使いづらいのでこの方法はなし。
代わりにwp_get_attachment_image_src()を使用します。
wp_get_attachment_image_src()ではアイキャッチ画像を画像URLで扱えますので、そのURLをimgに 使用することもできますしCSSの背景画像にも利用が出来る万能プレイヤーです。
$thumbnail_id = get_post_thumbnail_id();//投稿記事のIDを取得
$eye_img = wp_get_attachment_image_src($thumbnail_id,'medium');//引数に投稿IDと画像の大きさを渡す
すると$eye_imgに配列で値が格納されます。
- $eye_img[0]:画像のURL
- $eye_img[1]:画像のwidth
- $eye_img[2]:画像のheight
上記を元に記述します。
altに使えそうな値はなさそうなので投稿タイトルを使用。
<img src="<?php echo $eye_img[0]; ?>" width="<?php echo $eye_img[1]; ?>" height="<?php echo $eye_img[2]; ?>" alt="イメージ：<?php the_title(); ?>">
<img src="https://keprate.com/wp-content/uploads/2018/02/css_form-300x200.png" width="300" height="200" alt="イメージ：フォーム要素 input・プルダウン等をCSSでデザイン変更する">
以上。
あとはユーザーを惹きつけるアイキャッチ画像を作成するべし。
それが難しいのだ・・・。
- ※ソースの流用、改変は自由ですが自己責任とさせていただきます。