新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

WordPress

Advanced Custom Fields で画像のwidthやheightも出力する方法【WordPress】

2019.4.16

Advanced Custom Fields で画像のwidthやheightも出力する方法【WordPress】
WordPress 0 0
妙高Web屋LINE@ 友だち追加

WordPressのカスタムフィールドを制御するプラグインとして多く用いられている物のひとつが[Advanced Custom Fields]です。

そのカスタムフィールドには画像も設定できますが、特にコーダーさんにとって、ときには画像URLだけでなく「画像の幅」「画像の高さ」といった値が欲しい場合もあるでしょう。

今回の記事は、そのような場合のPHPコードの記述方法をご紹介します。

この記事の目次

【結論】Advanced Custom Fieldsで画像のwidthやheightも出力する方法

まずは結論から。

こちらのコードを試してみてください、floor()関数で幅と高さを整数にしています。

<?php $pageImg = get_field('pageImg'); ?>
<?php if( !empty($pageImg) ): $url = $pageImg['url'];$width = floor($pageImg['width']);$height = floor($pageImg['height']); ?>

<?php endif; ?>

ページの先頭へ戻る

[応用]Retinaディスプレイにも対応!画像をタテヨコ2分の1に圧縮する変数設定方法

昨今のホームページはPCでの表示のみではなく、スマートフォンなどのモバイル端末での表示も意識したつくりにすることが多いです。

その際、Retinaディスプレイ対応で、幅・高さともに希望のサイズの2倍(つまり4倍の面積)の画像を作ったうえで、imgタグには希望のサイズの幅・高さを設定する場合もあります。

そのような場合には、変数を設定する行を、こちらの行で置き換えてみてください。

<?php if( !empty($pageImg) ): $url = $pageImg['url'];$width = floor($pageImg['width'] / 2);$height = floor($pageImg['height'] / 2); ?>

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ