• このエントリーをはてなブックマークに追加

賢威7の記事上にアイキャッチ画像を自動表示

葉(よう)葉(よう)

どうも。葉です。
あなたは、記事の上部にアイキャッチ画像を設置していますか?

最近のテンプレートは、はじめからアイキャッチ画像を記事上部に設置できるものもありとても便利です。でも、残念なことに賢威7のデフォルトの状態では、記事上部にアイキャッチ画像を設置することができないんです。

そこで、この問題を解決するために賢威7の記事上部にアイキャッチ画像を表示する方法を解説していきます。

1.アイキャッチ画像とは?

まずは、アイキャッチ画像について解説します。

アイキャッチ画像を日本語に訳すと『目を引く画像』なります。要は、ブログやサイトを訪問した人に対して、画像を使って『こんな情報もありますよ~!』とアピールするのに使われる画像ということです。

面白い画像やひと目見ただけで内容が連想できる画像を準備することで、サイト内の回遊率を上げることもできるので多くの人が取り入れていますね。

まあ、言葉で説明するより実際に見てもらったほうがわかりやすいと思うの、アイキャッチ画像の例を3つ紹介します。

  • 例1.ブログトップのアイキャッチ画像アイキャッチ画像1
  • 例2.新着記事に表示されるアイキャッチ画像アイキャッチ画像2
  • 例3.カードリンクに表示されるアイキャッチ画像アイキャッチ画像3

こんなの知ってるよ!という人のほうが多かったかも知れないですね。

2.賢威7の投稿(記事本文)上部にアイキャッチ画像を設置する手順

ここからは、実際に賢威7の記事上部にアイキャッチ画像を設置する手順を紹介していきます。

具体的に、次の3箇所にアイキャッチ画像を入れてみました。3つの内、好きな箇所1つにアイキャッチ画像を表示させてください。

  • 記事タイトルの上
  • ソーシャルボタンの上
  • ソーシャルボタンの下

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

まずは、表示するアイキャッチ画像のサイズを設定します。

WordPress管理画面の左メニューより『設定→メディア』をクリックします。

アイキャッチ画像サイズ設定1

大サイズの幅の上限を700、高さの上限を0に設定し、『変更を保存』をクリックします。

アイキャッチ画像表示サイズ設定2

これで、アイキャッチ画像の表示サイズ設定は完了です。

表示サイズ変更するには?
大サイズの幅の上限を変更すると、アイキャッチ画像の表示サイズも変更します。

single.phpを編集して記事タイトルの上にアイキャッチ画像を表示

アイキャッチ画像

single.phpを編集してアイキャッチ画像を表示させます。
まずは、タイトルの上にアイキャッチ画像を表示させてみましょう。

WordPress管理画面の左メニューより『外観→テーマの編集』をクリックします。

アイキャッチ画像表示場所設定

『個別投稿(single.php)』をクリックします。

アイキャッチ画像表示場所設定2

<header class="article-header">

と書かれている場所を探し、その下に次のコードを貼り付けて『ファイルを更新』をクリックします。

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

アイキャッチ画像表示場所設定3

これで、記事タイトルの上に自動でアイキャッチ画像が表示されるはずです。

ソーシャルボタンの上と下にアイキャッチ画像を設置するには?

アイキャッチ画像4

なお、ソーシャルボタンの上と下にアイキャッチ画像を設置するには、

<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>

と記述されてい場所の上か下にアイキャッチ画像表示のコードを貼り付けてください。

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

アイキャッチ画像表示場所設定4

これで、ソーシャルボタンの上下にアイキャッチ画像が表示されているはずです。

3.『まとめ』と『感想』

賢威7の記事上部にアイキャッチ画像を表示する方法を丁寧に解説しました。

これまでは、記事の一番上に大きな画像を設置しておけばそれでいいや!と思っていました。でも、アイキャッチ画像で目を引いて、その下のソーシャルボタンを設置したほうがSNSでの拡散に有利なのではないか?と思い、今回の設定方法を調べたわけです。

なので、僕のアイキャッチ画像の設置位置のおすすめは、

『ソーシャルボタンの上』

です。

この他にも、投稿(個別記事)上部の投稿日や、カテゴリーのデザインを変更したい場合は、次の記事を参考にしてください。

ソーシャルボタンカスタマイズの関連記事

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

賢威カスタマイズ