WordPress カスタムフィールドテンプレートで画像を表示

カスタムフィールドテンプレート お店紹介や商品紹介など、決まった形式で投稿したいときに
WordPressのプラグイン「カスタムフィールドテンプレート」が非常に役立ちます。
テキストやファイルの添付だけではなく、画像も表示させることができるんです。
「メディア」で画像のサイズを設定できるだけではなく、
CSSでもサイズを設定できるのでとっても便利!今回は「カスタムフィールドテンプレート」で画像を表示させる方法をご紹介します!

導入手順
1.「カスタムフィールドテンプレート」をダウンロード or 管理画面にて「Meta Slider」で検索
ダウンロードはこちら:http://wordpress.org/plugins/custom-field-template/

2.プラグインを有効化
「設定」に「カスタフフィールドテンプレート」が追加されます。

設定方法
カスタムフィールドテンプレートの設定画面を開きます。
テンプレートタイトルは任意のもの、カスタムポストタイプは空欄でもOK。
テンプレートコンテンツには、

[画像]
type = file

↑これを入れます。
「画像」の部分は他のものでも大丈夫ですよ。

そして、HTMLを画像を入れたい部分に、CSSをCSSファイルに記述します。
画像サイズをHTML内に記述するか、CSSに記述するかでコードが若干変わります。

HTML
<?php query_posts('posts_per_page=5&paged='.$paged);
if (have_posts()) : while (have_posts()) : the_post(); ?>
     <?php
     $img[0]=get_post_meta($post->ID,'画像',true);
     ?>

<div class="cft_box">
 <div class="cft_title"><?php the_title(); ?></div>
 <?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),'full'); ?>
</div>

 <?php endwhile; endif; ?>
 <?php wp_reset_query(); ?>

CSS
#content img {
 width:200px;
 height:auto;
}

.cft_box{
 float:left;
 overflow:hidden;
 margin:5px;
 padding:5px;
 border:1px solid #999999;
}

.cft_title{
 text-align:center;
 font-weight:bold;
}

sample1:横幅200px、高さは自動調整

cft1
横幅を200pxにしたもの。
高さは自動調整です。

HTML
<?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),'full'); ?>
CSS
#content img {
 width:200px;
 height:auto;
}


sample2:横幅は自動調整、高さ200px

cft2
高さを200pxにしたもの。
横幅は自動調整です。

HTML
<?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),'full'); ?>

CSS
#content img {
 width:auto;
 height:200px;
}


sample3:サムネイル

cft3
サムネイルのサイズにしたもの。

HTML
 <?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),'thumbnail'); ?></div>

「メディア」の「サムネイルのサイズ」の設定によって画像の表示のされ方が違います。
・サムネイルを実寸法にトリミングする・・・設定したサイズに縮小、余った部分はトリミング。
・サムネイルを実寸法にトリミングしない・・・縦横のサイズが設定したサイズに相対的に縮小。

sample4:HTML内でサイズを設定する

cft5
高さ200px、横幅200pxにしてみました。
どちらかの大きさに合わせて相対的に縮小されます。

HTML
 <?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),array(200,200)); ?>

とても便利ですので、ぜひともお試しください♪