WordPress アイキャッチ画像をサムネールで使用する。

WordPressの機能でアイキャッチってのが有ります。何のこちゃ解らんかったんで、ほったらかしにしてました。でも、こいつがなかなか可愛いやつで、任意の画像を登録すれが、任意の場所へ画像をはっつけてくれます。今まで、プラグインで対応してたことをプラグイン無しでやっつけることが出来ます。

まず、下のコードをfunction.phpに書く。

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100, true ); // default Post Thumbnail dimensions (cropped)
}

thumbnail_sizeの100px,100pxってのは画像のサイズ。でも、あとでCSSでリサイズするんでこれ以上だとでかすぎるんで、この程度にしてます。

そして、下のコードを貼付けたい任意のテンプレートへはっつける。

<?php the_post_thumbnail( array('thumbnail-100') ); ?>

thumbnail-100っていうのは、このイメージに後で関連づけるCSSのclassの値。

たとえは、このサイトでは、

<div class="thumbnail-100">
<?php the_post_thumbnail( array('thumbnail-100') ); ?>
</div>

WordPressはサムネイルを100pxだとすると、imgにclassでattachment-thumbnail-100を吐き出すので、
classがthumbnail-100のdivの中に、classがattachment-thumbnail-100のimgを入れ子にしてます。
CSSが、

/*****イメージが入る入れ物*****/
div.thumbnail-100 {
	background: #f5dfe3 url(Images/logo2.png) no-repeat center center;
	float: left;
	height: 100px;
	width: 100px;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 50px;
	padding: 5px;
	-moz-box-shadow: inset 0px 1px 5px #919191;
	-webkit-box-shadow: inset 0px 1px 5px #919191;
	box-shadow: inset 0px 1px 5px #919191;
	filter: progid:DXImageTransform.Microsoft.Shadow(strength = 1, direction = 180, color = '#919191');
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 1, Direction = 180, Color = '#919191')";
	behavior: url(js/PIE/PIE.htc);
}
/*****イメージに適応させる値*****/
img.attachment-thumbnail-100{
	height: 100px;
	width: 100px;
}

ピンクでインサイドに影を持つdivの入れ物の中にイメージを入れてます。divにはアイキャッチ画像を指定していないときのために、バック画像でにロゴを入れてますんで、貼り忘れたときにも任意の画像が貼られます。

 

スクリーンショット 2013-03-17 17.17.50
アイキャッチ画像が入った場合
スクリーンショット 2013-03-17 17.18.23
アイキャッチ画像が入ってないとき

WordPressのアイキャッチが入ってるのは、このサイトのトップページの各記事のサムネール部分で、アイキャッチ画像が入ってないピンクのTOYSHOPのロゴの画像は、各ページの記事毎のサムネールです。Wordpressのマークは透過pngなんでバックのマークが透けてますが・・・。
CSSでページによってトップページはちょっと大きめで、各ページのサムネールはちょっと小っちゃめにサイズを変更してます。

/*****トップページのサムネール*****/
img.attachment-thumbnail-100{	height: 100px;
	width: 100px;}
div.thumbnail-100 {
	background: #f5dfe3 url(Images/footer/logo2.png) no-repeat center center;
	float: left;
	height: 100px;
	width: 100px;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 50px;
	padding: 5px;
	-moz-box-shadow: inset 0px 1px 5px #919191;
	-webkit-box-shadow: inset 0px 1px 5px #919191;
	box-shadow: inset 0px 1px 5px #919191;
	filter: progid:DXImageTransform.Microsoft.Shadow(strength = 1, direction = 180, color = '#919191');
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 1, Direction = 180, Color = '#919191')";
	behavior: url(js/PIE/PIE.htc);
}
/*****各ページのサムネール*****/
img.attachment-thumbnail-80{	height: 80px;
	width: 80px;}
div.thumbnail-80 {
	background: #f5dfe3 url(Images/footer/logo2.png) no-repeat center center;
	height: 80px;
	width: 80px;
	margin-left: 5px;
	padding: 5px;
	background-color: #f5dfe3;
	-moz-box-shadow: inset 0px 1px 5px #919191;
	-webkit-box-shadow: inset 0px 1px 5px #919191;
	box-shadow: inset 0px 1px 5px #919191;
	filter: progid:DXImageTransform.Microsoft.Shadow(strength = 1, direction = 180, color = '#919191');
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 1, Direction = 180, Color = '#919191')";
	behavior: url(js/PIE/PIE.htc);
}

この投稿へのコメント

コメントはありません。

コメントを残す

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

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL