【賢威7】アイキャッチ画像を記事ページ上部に表示するカスタマイズ

賢威のテンプレートで記事を書き始めた途端に気になったのが、
「記事ページにアイキャッチ画像が表示されない！」ということ。

以前使っていた有料テンプレートでは、自動的に
記事ページ上部にアイキャッチ画像を表示してくれていたので、
これはかなりショック！！

ということで、賢威7でアイキャッチ画像を表示させる
カスタマイズの方法をまとめておきます。

記事ページにこんなアイキャッチ画像が欲しい！

賢威7の初期設定で記事を書いたのが左側。

なんとも味気ないし、全然キャッチーじゃない！

それを右側のように、

記事ページの上部、本文が始まる前の部分に、
大きくアイキャッチ画像を表示させたい

というのが今回のカスタマイズです。

まず基本ですが、カスタマイズは子テーマで行いましょうね。

今回のカスタマイズで変更するのは
single phpとメディア設定の２箇所です。

まずsingle phpの中から
<header class=”article-header”>
という部分を探します。

ここが各記事ページのヘッダー表示に関する定義
が記載されている箇所です。

その中に
<?php if (the_keni(‘social_post_view’) == “y”) get_template_part(‘social-button2’); ?>
という記載があるので、その前に次のコードを貼り付けてください。

<!--▼【追記】アイキャッチ画像-->
<?php the_post_thumbnail('large'); ?>

そうすると、記事ページのタイトル下、
ソーシャルボタンの前にアイキャッチ画像が
表示されるようになりました✨

アイキャッチ画像を中央寄せしたい場合は、こちらのコードを使ってください。

<!--▼【追記】アイキャッチ画像-->
<Div Align="center"><?php the_post_thumbnail('large'); ?></Div>

ちなみにソーシャルボタンの下にアイキャッチ
画像を表示させたい場合は、

<?php if (the_keni(‘social_post_view’) == “y”) get_template_part(‘social-button2’); ?>

の後にコードを貼り付けてください。

ちなみにこのソーシャルボタンの記載は

の中にもあり、間違えてその前後に貼り付けてしまうと、
記事ページの一番下にアイキャッチ画像が表示
されてしまうので注意！

続いて、アイキャッチ画像の表示サイズを変更します。

WordPress管理画面の左から設定→メディア、と進みます。

先程アイキャッチ画像に指定したのは
「大サイズ」なのでこちらの値を
お好きなサイズに設定してください♪

私は幅：650　高さ：0（画像サイズの高さが適用されます）
に設定して、中央寄せにしています。

賢威7の記事ページの幅は780なので、
maxで表示させたい方は780にしておくと
良いかと思います。

ということで、簡単にアイキャッチ画像が設定できました！

記事ページにアイキャッチ画像があるのと無いのでは、
ページ事態の印象が大きく変わるので、
賢威を使っているのであれば是非済ませて
おきたいカスタマイズです。

自由な働き方を叶えたいあなたへ