お店紹介や商品紹介など、決まった形式で投稿したいときに
WordPressのプラグイン「カスタムフィールドテンプレート」が非常に役立ちます。
テキストやファイルの添付だけではなく、画像も表示させることができるんです。
「メディア」で画像のサイズを設定できるだけではなく、
CSSでもサイズを設定できるのでとっても便利！今回は「カスタムフィールドテンプレート」で画像を表示させる方法をご紹介します！
１．「カスタムフィールドテンプレート」をダウンロード or 管理画面にて「Meta Slider」で検索
ダウンロードはこちら：http://wordpress.org/plugins/custom-field-template/
２．プラグインを有効化
「設定」に「カスタフフィールドテンプレート」が追加されます。
カスタムフィールドテンプレートの設定画面を開きます。
テンプレートタイトルは任意のもの、カスタムポストタイプは空欄でもＯＫ。
テンプレートコンテンツには、
[画像]
type = file
↑これを入れます。
「画像」の部分は他のものでも大丈夫ですよ。
そして、HTMLを画像を入れたい部分に、CSSをCSSファイルに記述します。
画像サイズをHTML内に記述するか、CSSに記述するかでコードが若干変わります。
<?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(); ?>
[/xml]
#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;
}
[/css]
横幅を200pxにしたもの。
高さは自動調整です。
<?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),’full’); ?>
[/xml]
#content img {
width:200px;
height:auto;
}
[/css]
高さを200pxにしたもの。
横幅は自動調整です。
<?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),’full’); ?>
[/xml]
#content img {
width:auto;
height:200px;
}
[/css]
サムネイルのサイズにしたもの。
<?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),’thumbnail’); ?></div>
[/xml]
「メディア」の「サムネイルのサイズ」の設定によって画像の表示のされ方が違います。
・サムネイルを実寸法にトリミングする・・・設定したサイズに縮小、余った部分はトリミング。
・サムネイルを実寸法にトリミングしない・・・縦横のサイズが設定したサイズに相対的に縮小。
高さ200px、横幅200pxにしてみました。
どちらかの大きさに合わせて相対的に縮小されます。
<?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),array(200,200)); ?>
[/xml]
とても便利ですので、ぜひともお試しください♪