賢威のテンプレートで記事を書き始めた途端に気になったのが、
「記事ページにアイキャッチ画像が表示されない！」ということ。
以前使っていた有料テンプレートでは、自動的に
記事ページ上部にアイキャッチ画像を表示してくれていたので、
これはかなりショック！！
ということで、賢威7でアイキャッチ画像を表示させる
カスタマイズの方法をまとめておきます。
もくじ
記事ページにこんなアイキャッチ画像が欲しい！
賢威7の初期設定で記事を書いたのが左側。
なんとも味気ないし、全然キャッチーじゃない！
それを右側のように、
記事ページの上部、本文が始まる前の部分に、
大きくアイキャッチ画像を表示させたい
というのが今回のカスタマイズです。
賢威7-記事ページにアイキャッチ画像を表示させる方法
まず基本ですが、カスタマイズは子テーマで行いましょうね。
今回のカスタマイズで変更するのは
single phpとメディア設定の２箇所です。
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にしておくと
良いかと思います。
まとめ
ということで、簡単にアイキャッチ画像が設定できました！
記事ページにアイキャッチ画像があるのと無いのでは、
ページ事態の印象が大きく変わるので、
賢威を使っているのであれば是非済ませて
おきたいカスタマイズです。
コメントを残す