縦長ランディングページの効果測定しませんか詳細へ

WordPressのエントリーの上部にアイキャッチ画像をフルサイズで表示したい

ワードプレスでつくったブログではありがちな投稿のページのページタイトルの下にアイキャッチ画像で登録した画像を表示します。

目次

テンプレートにワードプレス専用の関数や変数で記述

アイキャッチ画像を表示させる関数は the_post_thumbnail です。
引数として1番目が大きさ、2番め位が配列で属性やクラスなどを渡せます。
今回はサイズは最大(full)でaltにページタイトル、classにborder1をセットしたいと思います。
一応全体をpost_thumbnail という名のclass囲みます。

ソース

<div class="post_thumbnail">
	<?php
	$title=the_title();
	$attr = array('alt'=>$title,'class'=>'border1');
	the_post_thumbnail( 'full' ,$attr); 
	?>
</div>

これを投稿専用のテンプレートのタイトル表示部分の後に挿入するばOKです。

もしテンプレートが投稿専用ではなく固定ページなども共通であるなら条件式をつけてタイプが投稿かを判断して表示します。

<?php if (is_single()):?>
<div class="post_thumbnail">
	<?php
	$title=get_the_title();
	$attr = array('alt'=>$title,'class'=>'border1');
	the_post_thumbnail( 'full' ,$attr); ?>
</div>
<?php endif; ?>

無事表示されるようになりました。


よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

株式会社ねこすけの代表をしています。
2005年に創業しWebマーケティングを実践するためのコンサルティング、サイト構築、サイト運用、システム開発を行っています。
会員・顧客属性を利用したコンテンツ管理を得意としており、協会サイト、多ブランドのECサイト、会員向けコンテンツサイトなどを構築運営しています。Webマーケティングのパートナーがほしいと感じている方、ご相談ください。
月に1度のミーティングから細かなサイト保守まで必要な部分での対応が可能です。 問い合わせ

目次