Word Press でアイキャッチ画像を設定する時、色んなやり方がありますけど、私の中でパーフェクトな方法が出来ました😉
- 条件
- 指定無しだとカテゴリー別の画像に
- 個別の記事では 1200×630(OG サイズ)
- それ以外では小さな正方形に切り取る
- プラグインを使わない
- functions.php には“編集画面でアイキャッチの設定を追加”の一文のみ
- 自動で生成される画像を増やさない
これらを満たしたアイキャッチ画像が簡単に設定出来ます😳
アイキャッチ画像を表示させる
まずは functions.php に以下を追加します💡
<?php
// アイキャッチ設定 ON
add_theme_support( 'post-thumbnails' );
これで編集画面にアイキャッチ画像の設定が追加されました😀
次は、以下を個別の記事のテンプレートの、アイキャッチ画像を表示させたい場所に書きます🙂
これで、アイキャッチ画像の指定があればそれを、無ければ各カテゴリー用に自分で用意したフォルダ内の画像が表示されます🤗
各カテゴリー用の画像は、テーマフォルダの img フォルダに入れる事にします😀
編集画面で指定したアイキャッチ画像のサイズを決める“画像のサイズ”の部分は、Word Press に画像をアップした時に生成される、
- thumbnail
- medium
- medium_large
- large
- full(元のサイズ)
の中から指定します💡(私の場合 thumbnail と medium_large の生成は停止させています)
個別記事なら full にして 1200×630 のサイズを作るのがいいと思います😀
このサイズは Facebook が推奨する OG カードの大きさでもあります💡
自分でも各カテゴリー用の画像を、このサイズで作成してください😊
次に、index.php とか category.php では小さなアイキャッチを表示させます😉
個別の記事との違いは、アイキャッチ画像に -mini を追加しただけです💡
画像のサイズは medium か large がオススメです😀(気持ち大きめにしないとボヤける)
そして、ここでも自分で小さなアイキャッチ画像(サイズは medium か large と同じでいい)を、各カテゴリー用に作成します😊
各カテゴリー用の画像を Word Press のメディアからアップせずに指定するのは、一括で変えたくなった時に困らない様にするためです🤔
あとはサイドバーやオススメ一覧なんかでは正方形に切り取って表示させたいのですけど、アイキャッチ用の正方形の画像を Word Press が生成する様に functions.php 等で設定すると、使わない画像のも生成されてしまいます😔
なので、CSS で切り取ります😉
object-fit:cover; が有能過ぎます😳
中央を基準に正方形に切り取ってくれて、縦長の画像の場合なら高さの真ん中で切り取られます😊
以上でアイキャッチ画像は完成😀❗️
今回の設定を OG カードでも使う
共有した時などに表示される OG カードですけど、これは以下の様に出来ます💡
- OG カードの出力
- アイキャッチに指定した画像
- 指定が無ければカテゴリー別の画像
- 個別の記事以外では全てデフォルトの画像
まずは Jet Pack を使っている場合、functions.php に以下を追加して OGP 出力だけ停止させます😚
<?php
// Jetpack Open Graph Tags の OFF
add_filter( 'jetpack_enable_open_graph', '__return_false' );
次に、OG カードのアドレスを出力するテンプレートを作成し、テーマに追加します💡
単にアイキャッチ画像があるかどうかだけで判別すると、固定ページや index.php 等で最後に書かれた記事のアイキャッチ画像のアドレスになってしまいますから、個別の記事かどうかの判別を追加してます😚
つまり…アイキャッチ画像を設定出来ない、カテゴリーも設定出来ないなら、デフォルトのアイキャッチ画像になります💡
アイキャッチ画像の出力とほぼ同じです🤗
画像のサイズは OG カードなので full の 1200×630 がいいと思います🙂
あとはこれを出力したい箇所で以下のように呼び出します😀
<?php get_template_part( 'ogimage' ); ?>
これでアイキャッチ画像と、それを OG カードとしても使える様になりました🤗
どうでしたか🙂❓お役に立てましたかっ😊🎵
パーフェクトな何かが見つかればまた更新します😀💕
