ワードプレスのアイキャッチ画像を記事上に挿入する方法

今回はワードプレスのアイキャッチ画像(サムネ画像)を記事上に挿入する方法について解説したいと思います。

スポンサーリンク

ワードプレスのアイキャッチ画像を記事上に挿入する方法

アイキャッチ画像の設定画面の表示

まずアイキャッチ画像を出さないといけないので

function.phpを開いて以下のコードを記述

するとアイキャッチ画像が使えるようになる。

アイキャッチ画像を表示

次に任意の場所(記事上部の場合contentsの上)にアイキャッチ画像を表示させます。

以下のコードでアイキャッチ画像が設定されている場合アイキャッチ画像を表示します。

ただこれだとホーム画面にも表示されてしまうので

個別ページごとにアイキャッチが設定されてある個別ページにのみアイキャッチを表示します。

front-page.php(ホームページ)ではなくsingle.php(個別投稿)に書いた方が良いでしょう。

アイキャッチ画像の大きさや幅調整

サムネ画像に設定した画像はimgなのでimg宣言でcssを変更できます。

今回は記事の幅と同じ幅に調整します。

アイキャッチ画像の表示のコードはcontentsの中に書きました。

横幅に対しての高さを手動で設定すると画像がおかしくなるので

height:autoで大きさを自動調整します。