カスタムフィールドで登録した画像を指定のサイズで表示させる方法をご紹介いたします。
はじめに
カスタムフィールドに画像を登録出来るようにしたものの、登録される画像が縦長だったり横長だったりするとデザインが崩れてしまいますよね。そこでfunction.phpに情報を追加する事でカスタムフィールドに登録した画像を好きなサイズで表示させる方法が見つかりました。
注意事項
カスタマイズ完了後に登録した画像しか反映されません
指定した画像サイズで表示させよう
function.php
<?php
add_image_size('名前', 横幅, 縦幅, true);
?>
- 名前：任意の名前を付けましょう 例 photo-test
- 横幅：表示させたい横幅です。
- 縦幅：表示させたい縦幅です。
- true：画像を切り抜きするかどうかです。良くわからない場合はtrue
表示させたいのファイル
<?php
$attachment_id = $cfs->get('カスタムフィールド名');
echo wp_get_attachment_image( $attachment_id, 'function.phpに追加した名前' );
?>
こうするとワードプレスで画像を特定のサイズで表示させる事が出来ます。
画像の登録がない場合、自動で特定の画像を表示させる
例えばスタッフページで、メイン画像を登録していいない場合に「noimg」や「現在準備中」と言った形で表示させたいなんて事もありますよね。
そういった場合のカスタマイズはこちらになります。
<?php $ctm = get_post_meta($post->ID, 'カスタムフィールド名', true);?>
<?php if(empty($ctm)):?>
<img src="画像が登録されていない時に表示させる画像のURL" />
<?php else:?>
<?php
$attachment_id = $cfs->get('カスタムフィールド名');
echo wp_get_attachment_image( $attachment_id, 'function.phpに追加した名前' );
?>
<?php endif;?>
※2箇所書かれている「カスタムフィールド名」は同じカスタムフィールド名になります。
こうする事で画像が登録されていない場合にデザインが崩れる心配もありませんよね。
さらにlightbonxを使って拡大させたい
最後は先ほどの情報にさらに画像をクリックすると大きくなるlightboxを表示させたい場合のカスタマイズ方法をご紹介いたします。
<?php $ctm = get_post_meta($post->ID, 'カスタムフィールド名', true);?>
<?php if(empty($ctm)):?>
<img src="画像が登録されていない時に表示させる画像のURL" />
<?php else:?>
<?php
$attachment_id = $cfs->get('カスタムフィールド名');
$full = wp_get_attachment_image_src( $attachment_id, 'full' );
?>
<a href="<?php echo $full[0];?>" rel="lightbox">
<?php
echo wp_get_attachment_image( $attachment_id, 'function.phpに追加した名前' );
?>
</a>
<?php endif;?>
※2箇所書かれている「カスタムフィールド名」は同じカスタムフィールド名になります。
このコードを使う事で画像をクリックすると登録した元々の画像（フルサイズ）を表示させる事が出来ます。
これらを組み合わせる事で後ほど修正や手を加える心配もないデザインにする事が出来ます。
以上でワードプレスの画像を特定のサイズで表示させる方法の説明を終了いたします。
さいごに
写真は重要
HP制作関係の稼げる副業をしていて気がついたのは基本的にデザインの要になるのは画像だと言う事です。クライアント様側でも自由に変更や修正が可能なデザインにする場合、どうしてもカスタムフィールドは導入しなければいけませんよね。
ただ、知識のないクライアント様の場合適当に画像を登録する人が多いので元々縦長の画像と指定しても意味はありません笑
今回は自分で少し特殊なサイトを作成した際の技術を忘れないように掲載させて頂きました。
ワードプレスで画像関係がある程度コントロールできるようになれば、かなり幅は広がります。
