Uncategorized

SCF(Smart Custom Fields)の画像挿入の解説

クライアントさんに、「画像の差し替えを管理画面からできるようにしてください。」って言われたけど、どうしよう？

毎回差し替えのたびにコード変更したり、サーバーに画像アップするの面倒くさい…

画像の差し替えをクライアント側で行いたい。サイト運営に画像は差し替えるけど頻繁にコードを触りたくない。

そういった場合に役に立つのが、プラグインSCF(Smart Custom Fields)で画像挿入するように設定する方法です！

ばく
ばく

Webサイトでよく見かける「カードレイアウト」や「画像スライダー(カルーセル)」を実装したいとき、Smart Custom Fields(SCF)の繰り返しフィールド+画像フィールドを使えば、WordPressの管理画面から手軽に調整できます。

特に、「画像を表示する/しない」「スライドを増減したい」といった編集も、コードを触らず対応できるため、クライアント案件にも大活躍です！

SCFでは、WordPressの標準関数ではなく、独自の関数を使ってデータを取得します。これがSCFの特徴の一つです。

独自の関数と、画像を取得するWordPress関数、
wp_get_attachment_image_url() と
wp_get_attachment_image_src() の違いも表でしっかり比較しています！

コードの紹介

最終的には、SCFの値を取得し、foreachでループ処理をして、画像をあるだけ取得します。

設定方法、実際のコード、取得する値についてみていきましょう！

    <?php
    $images = SCF::get('gallery-images');
    foreach ($images as $image) : ?>
        <?php $main_image_url = wp_get_attachment_url($image['image'], 'full'); ?>
        <div class="image">
            <img src="<?php echo esc_url($main_image_url); ?>" alt="">
        </div>
 <?php endforeach; ?>

プラグインの導入から

プラグインSmart Custom Fields(SCF)をインストールして、有効化します。

プラグイン→プラグインを追加から、以下のように検索したら出てきます。

カスタムフィールドの設定

管理画面からカスタムフィールドの設定を行います。

各種設定の説明

Smart Custom Fields→新規追加

タイトル：管理画面上での表示です。目的や使う場所の名前をつけるとわかりやすいです。

繰り返し：繰り返し処理をするためにオンにして、グループ名をつけます。

グループ名：コード上で値を取得するために設定します。

タイプ：画像を選択します。

ラベル：編集画面で表示されます。「コンセプト画像」「スライド」等いれるとわかりやすく管理できます。

名前：コード上で取得するために使用します。

プレビューサイズ：基本的にはthumbnailを選んでおけば問題有りません。実際に出力される画像と、プレビューサイズは関係ありません。

SCF（Smart Custom Fields）の画像
「プレビューサイズ」ってなに？

これは「管理画面で画像フィールドのサムネイル（プレビュー）をどの大きさで表示するか」を選ぶためのものです！

実際の画面↓

サイト上に出力する際は、コードの第二引数で指示するため、こちらで設定したサイズは関係ありません。

fullだと大きすぎる場合があるので、thumbnailかmidiumに設定すると管理しやすいです。

それぞれの意味

サイズ名 ピクセル数（デフォルト） 特徴・用途
full アップロード画像そのまま 元画像のサイズ。超大きい画像だと大きく表示されることも。
thumbnail 150×150px WordPress自動生成のサムネイル。管理画面で小さく見たいときに。
medium 300×300px 少し大きめの標準サイズ。
medium_large 768×自動 mediumとlargeの間。WordPress 4.4以降で追加。
large 1024×1024px さらに大きめの標準サイズ。
1536x1536 1536×1536px WordPress 5.3以降の高解像度サムネイル。Retina対応。
2048x2048 2048×2048px 同じく高解像度。Retinaや大画面プレビュー向け。

画像を呼び出すコード

WordPress関数を使って呼び出します。

wp_get_attachment_image_url();
wp_get_attachment_image_src();

上記の通り、2種類あります。それぞれの違いはこちら!

比較項目 wp_get_attachment_image_url() wp_get_attachment_image_src()
戻り値 画像のURL（文字列）だけ 配列（URL, 幅, 高さ, 拡大画像の有無）
シンプルさ ◎（URLだけでOKな場合に最適） △（配列からURLを取り出す必要あり）
サイズの取得 ✕（URLのみ） ○（幅・高さ取得可能）
使用例 <img src="URL"> 配列から取り出して表示
SCFとの相性 ◎（繰り返し画像で使いやすい） △（コードが少し長くなる）
よく使われるケース シンプルに表示したいとき サイズ情報も使いたいとき

単純に画像を出したいだけならurl、しっかりと画像サイズなどを使いたいときはsrcを利用しましょう。

使い分けイメージ

画像のurlだけ取得する。第二引数に取得サイズをいれる('full')

画像を表示したい、コードをスッキリさせたい、これから実装に慣れていきたい方はこちらがおすすめです。

私も実際の制作では、シンプルな記述ができるこちらの方法をよく使っています。

<img src="<?php echo esc_url(wp_get_attachment_image_url($image['image'], 'full')); ?>" alt="">

配列にて画像のデータを取得。コードに反映

変数に格納してやるとコードもスッキリします😊

<?php $main_image_url = wp_get_attachment_url($image['image'], 'full'); ?>
<div class="image">
     <img src="<?php echo esc_url($main_image_url); ?>" alt="">
</div>

しっかりと調整、表示したいときはこちら！

<?php $image = wp_get_attachment_image_src($image, 'full'); ?>
<img src="<?php echo esc_url($image[0]); ?>" width="<?php echo esc_attr($image[1]); ?>" height="<?php echo esc_attr($image[2]); ?>" alt="">

配列は、以下のようになっており、画像サイズが取得できます。widthやheightを入れるときに使います。

 Array(
    [0] => 画像URL
    [1] => 1706
    [2] => 2560
    [3] => 
)

実際の設定、コード

今回はこのような設定で行いました。実装時の参考になれば幸いです。

繰り返し：オン

グループ名：gallery-images

サブフィールド：

  • タイプ：画像
  • ラベル：画像-プレビューサイズ:full
  • 名前：image

サブフィールド：

  • タイプ：画像
  • ラベル：画像-プレビューサイズ:thumbnail
  • 名前：thumbnail

サブフィールド：

  • タイプ：画像
  • ラベル：画像-プレビューサイズ:medium
  • 名前：medium

プレビューサイズは全部thumbnailにしました。大きすぎるので_(:3」∠)_

コード

wp_get_attachment_url()

と、

wp_get_attachment_src()

の二種類のコードを使っています。実際は1種類で良いです。

<div class="image-wrapper">
    <?php
    $images = SCF::get('gallery-images');
    foreach ($images as $image) : ?>
        <?php $main_image_url = wp_get_attachment_url($image['image'], 'full'); ?>
        <div class="image">
            <img src="<?php echo esc_url($main_image_url); ?>" alt="">
        </div>
        <div class="image">
            <?php $thumb = wp_get_attachment_image_src($image['thumbnail'], 'full'); ?>
            <img src="<?php echo esc_url($thumb[0]); ?>" alt="" width="<?php echo esc_attr($thumb[1]); ?>" height="<?php echo esc_attr($thumb[2]); ?>">
        </div>
        <?php $medium = wp_get_attachment_image_src($image['medium'], 'full'); ?>
        <div class="image">
            <img src="<?php echo esc_url($medium[0]); ?>" alt="" width="<?php echo esc_attr($medium[1]); ?>" height="<?php echo esc_attr($medium[2]); ?>">
        </div>
    <?php endforeach; ?>
</div>

使い方

基本的にはimgタグのsrc部分に当てはめてやるだけです。

画像のデータをwidth、heightに入れたいときはwp_get_attachment_image_srcを使ったコードを参考にしてください！

SCF(Smart Custom Fields)の画像挿入について：まとめ

SCFのタイプ：画像で 画像差し替えがコードを触らず楽々行えます！

SCFを使って、管理画面から画像を設定する方法を解説しました。

WordPressでオリジナルテーマを構築する際、

echo get_template_directory_uri()

を使うことが多いと思いますが、それの代わりに

wp_get_attachment_url()

を入れてやるだけで比較的簡単に実装することができます。

後々の管理、差し替えの手間を省けるので、「クライアントに差し替えてもらえるようにしたい」「あまりコードを触らず管理したい」など場合に、役立ててください！

ばく
ばく

-Uncategorized