ワードプレス制作の覚え書きとして、自分のために記録しています。
どなたか、ご同業で参考にされる方がいらっしゃいましたらお役に立ててください。
例えば、フォトギャラリーなどを作るときに、サムネイル一覧を並べておいて、画像クリックで元サイズの画像を表示させる場合など、カスタムフィールフィールドとアイキャッチ画像の両方に同じ画像を登録するのは面倒です。
その場合、カスタムフィールドに登録した画像のサムネイルを出力するためには、フロント側の記述を変更します。
フィールド値が「画像1」だった場合
<img src=”<?php the_field( ‘画像1’,$post->ID); ?>”>
これは、フィールドの返り値をURL指定していれば画像がそのまま表示されます。
上記を
<?php echo wp_get_attachment_image(get_post_meta($post->ID, ‘画像1′, true),’thumbnail’); ?>
にすることで、画像１ のサムネイルが表示されます。
・・・で、よく見ると元画像を出力するときと違い、<img>タグは書きません。
この場合、<img>タグ込みで出力されます。
<imgの中に、width=”*****px” heght=”*****px” とサイズしてされてしまいますが、これはHTMLですので、ＣＳＳでサイズを指定しなおしてやればＣＳＳのほうが優先されます。
例）
<div class=”image”>
<?php echo wp_get_attachment_image(get_post_meta($post->ID, ‘画像1′, true),’thumbnail’); ?>
</div>
<style>
.image{
width:100px;
}
.image img{
width;100%;
height:auto;
}
これで横幅100ｐｘのサムネイルの表示となります。
ちなみにheightでautoを指定してあげないと高さだけもとのサムネイルのサイズで出力されてしまいます。
==========================================================
横浜・川崎でのホームページ制作、インターネット関連のご相談はお気軽ご連絡ください。
有限会社テクニカルプロデュース
神奈川県川崎市中原区新丸子町745
044-711-8100
メールでのお問合せはこちら>
ホームへ戻る