Amazon「現金でギフト券チャージ、初回購入で1,000ポイント」キャンペーン復活!

賢威7.1投稿記事(個別ページ)にアイキャッチ画像を表示する

山と陸橋

注意
※現在はこのブログでは賢威7.1は使用していませんが、使用していた頃に行っていたカスタマイズです

賢威7.1クール版ではアイキャッチ画像が投稿記事の個別ページに反映されません。

使用するテーマによって、個別ページにアイキャッチ画像が入るか入らないか、どこにどのくらいの大きさで入るかは違うようです。

 

以前のテーマは投稿記事の右上にアイキャッチ画像が出るものだっため、それを前提としてページを作っていました。

そのため、個別ページに画像が出ないとわかりにくい記事があります。

ということで、以前と同じようにアイキャッチ画像を投稿記事(個別ページ)の右上に出るようにする方法を探してみました。

 

投稿記事(個別ページ)にアイキャッチ画像が出るようにする

個別ページにアイキャッチ画像が出るようにする方法自体は簡単に見付かりました。

テーマの個別投稿「single.php」に下記のコードを加えます。

コード
<?php the_post_thumbnail(); ?>

 

問題はどこに入れるかです。

タイトルの上に画像を入れる

サポートフォーラムQ&Aで記載されてたのは以下の場所です。

アイキャッチコード位置

この場合、タイトルの上に画像が入ります。

アイキャッチ記事上

 

タイトルの下(記事内)に画像を入れる

検索で見付けた方法では、ソーシャルボタンの位置を目安にするというもの。

個別投稿「single.php」のheader内に下記のようなコードを探し、この行の前か後ろに前述のコードを入れます。

※このコードは2カ所あります。上の方の〈/header〉前の部分を探してください。

アイキャッチコード記事内

 

ソーシャルボタン(social-button2)の前に入れた場合

アイキャッチ記事内ソーシャルボタン上

 

ソーシャルボタン(social-button2)の後ろに入れた場合

アイキャッチ記事中

ソーシャルボタンの後ろに入れると書き出しの文字が画像に近すぎて見づらいように思います。

画像のサイズを変更する

これまでの画像はサムネイルサイズなので、サイズを大きくしてみます。

挿入したコードの()内にサイズを表す文字を入れます。

アイキャッチサイズ変更コード

  • thumbnail:サムネイルのサイズ
  • medium:中サイズ
  • large:大サイズ
  • full:画像そのままのサイズ

※()内に何も入れないとサムネイルサイズになります。

 

これらのサイズは、WordPressのメディア設定画面で確認・変更出来ます。

WordPressの管理画面から、「設定」⇒「メディア」を選択します。

画像サイズ

ここでサイズ自体を変更できるようですが、記事内にも同じサイズの画像を使用していると一緒に変わってしまうと思うので、あまりいじらない方がいいのではないかと思います。

また、()内に数字を入れて画像サイズを指定することもできるようです。

 

ソーシャルボタンの上にlargeと入力したコードを入れて「大」サイズの画像にした場合

アイキャッチソーシャルボタン上

投稿記事内の右上に中サイズのアイキャッチ画像が出るようにする

自分の目的は、以前のテーマと同じように記事内右上に中サイズの画像を入れることです。

それらしき意味合いのコードを見付けて画像サイズと左右を変更しました。

「画像を入れるなら右側に中サイズの画像を入れてね」的な意味になると思われます。

コード
<?php if(has_post_thumbnail()){ ?>
<div class="right">
<?php echo the_post_thumbnail("medium"); ?>
</div>
<?php } ?>

これを「single.php」のheader内ソーシャルボタンの下に入れます。

アイキャッチ記事内コード位置

思った通りの位置に思った通りのサイズの画像が入りました。

アイキャッチ記事内中右