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

賢威7,カスタマイズ

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

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

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

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

賢威,アイキャッチ画像,カスタマイズ

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

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

それを右側のように、

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

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

賢威7-記事ページにアイキャッチ画像を表示させる方法

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

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

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’); ?>

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

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

<div class=”article-body”>

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

設定>メディアで画像サイズを変更

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

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

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

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

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

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll Up