wordpressにて、記事の上部にサムネを表示する方法

この記事は約438秒で読めます。

どうも!!こうすけです。

WordPressを使ってるとたまに記事の上部にサムネが表示されていないテーマに出会うことありませんか?

色々カスタマイズした後にそういえば記事にサムネが表示されないじゃん!!ってことは結構あり得るんじゃないでしょうか?

記事にサムネが表示されないなんて使ってみないとなかなか分からないため、サムネが表示されないのって本当に困りますよね。

色々カスタマイズした後だから別のテーマを使用するのもめんどくさいですよね。

なので今日は記事の上部にサムネを表示させる方法を紹介します。

1. ここでいうサムネとは

WordPressではアイキャッチ画像として設定した画像のことですが、言葉で表現したとすると、「対象の記事をどんなものなのかイメージさせる画像」のことです。

以下のような画像のことですね。


このサムネには文字を入れてしまってますが、こういった画像をサムネと呼びます。

2. サムネがないとどうなるの?

サムネが無いとどうなるのか?

サムネがない場合を一度見てもらいましょうか?

前述した画像のサムネが無い場合の画像です。


なんかものすごく物足りなく無いですか?

自分はものすごく物足りない気がします。facebookやtwitterに共有するときもサムネが設定されてないと画像無しで共有されてしまいます。

読者の方にも画像が無いことでインパクトの薄い記事だなと印象付けるような記事にもなりかねませんね。

3. 記事の上部にサムネを表示する方法

サムネを表示するためには記事表示用ファイル「single.php」を編集する必要があります。

「Single.php」の「the_content()」を見つけ出して以下のように「the_content();」の上部にサムネを表示させるための記述を追加してください。

所用時間を表示させるための記述が間にありますが気にしないでください。所要時間も表示させたければ以下のように記述すれば良いです。

「single.php」の「the_content()」の見つけ方は、以下の記事の「記事内に所要時間を表示したい場合」を参考にしてください。
※single.phpファイルのthe_content()の探し方


サムネを表示したいソースコードは以下になりますので、上記のサムネを表示させる記述がある場所にコピペしてください。

<?php
//ここからアイキャッチ画像
if(has_post_thumbnail( $post_id )): ?>
	<div class="post-thumbnail">
		<?php the_post_thumbnail('large');?>
	</div>
<?php endif;
//ここまでアイキャッチ画像
?>

4. ソースコードの説明

コピペしてくださいといっても中身がなんなのかが分からなけば少し不安になりますよね?

本当に大丈夫なんだろうかと。

なので、ソースコードについての説明をしたいと思います。

4.1. if(has_post_thumbnail( $post_id )):

この記述は、該当の記事にサムネ(アイキャッチ画像)が設定されているかを判断するための記述です。

ここではサムネが設定されて入ればサムネを表示させるというようにしています。

この記述がない場合、サムネが設定されて無い場合にも関わらずサムネを表示させようとします。

そういった無駄な処理が無いようにこの記述が必要になります。

4.2. <.div class="post-thumbnail">

この記述は表示したサムネのデザインを設定するための記述です。

どういったサムネにするのかこの記述によって決めています。

ちなみに2行下にある、「<./div>」は終了タグといって、

の終わりを表す記述です。

4.3. the_post_thumbnail(‘large’)

この記述が実際にサムネを表示している記述です。

()内に記述しているlargeはサムネの大きさを表し、640*640でサムネを表示することを表ています。

4.4. <.?php 〜〜〜 ?>

WordPressのファイルはHTMLとCSSとphpというプログラム言語によって作成されています。

この説明でなんとなくわかるかもしれませんが、「<.?php ?>」の記述はphp言語の範囲を表す記述です。

php言語を使用する場合、この記述が無いとphp言語と判断してくれません。

ちなみに「<.?php ?>」で囲まれてない記述はHTMLの記述になります。

4.5. //ここまでアイキャッチ画像

この記述はただのメモです。

ブログには表示させたく無い!!でもファイルに修正した箇所にはメモを残したい場合は文章の先頭に「//」をつけることでメモを残すことができます。

ちなみに「//」はphp言語ですので、HTMLの記述でメモ残したい場合「<.!--」と「-->」でメモしたい文章を囲みます。

5. 最後に

サムネは読者の方にイメージを持たせるのに非常に大事なものです。

テーマにサムネが無いよ!という方はぜひサムネを表示させましょう。

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

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