カスタムフィールド(画像)をループ内で取得する

今回やりたいこと

WordPressサイトの中によく置かれてるバナー広告やリンク一覧があると思いますが、今回はその画像と広告のリンク先を管理画面からいつでも変更・修正・削除できるようにする方法を紹介します。

HTMLをいじることが難しい人や、サーバーに入れない(入るのが面倒な)場合などは管理画面から修正できるととても便利ですよね。

カスタム投稿を追加

まずはいつも通りカスタム投稿を追加します。functions.phpにいつも通りの内容で記述しましょう。こんな感じで他のカスタム投稿作成時と同じように記述すればOKです。


function banner_custom_post_type()
{
  register_post_type('banner',  array(
    'label' => 'バナー', // 投稿タイプ名
    'labels' => array(
      'singular_name' => 'バナー', // 投稿タイプ名
      'menu_name' => 'バナー', // メニューに表示するラベル
      'add_new_item' => '新規バナーを追加', // 新規作成ページの左上に表示されるタイトル
      'add_new' => '新規追加', // メニューの「新規」の位置に表示するラベル
      'new_item' => '新規バナー', //一覧ページの右上にある新規作成ボタンのラベル
      'edit_item' => 'バナーを編集', // 編集ページの左上にあるタイトル
      'view_item' => 'バナーを表示', //編集ページのボタンのラベル
      'not_found' => 'バナーは見つかりませんでした',
      'not_found_in_trash' => 'ゴミ箱にバナーはありません。', 
      'search_items' => 'バナーを検索',
    ),

    'public' => true, // ユーザーが管理画面で入力する
    'publicly_queryable' => true, // カスタム投稿タイプの機能でページを生成するか
    'show_ui' => true, // 管理画面にこのカスタム投稿タイプのページを表示する
    'show_in_menu' => true, // 管理画面にメニューを出す
    'query_var' => true,
    'has_archive' => true, // 投稿した記事の一覧ページを作成
    'hierarchical' => false, // カスタム投稿に親子関係を持たせない
    'menu_position' => 5, // カスタム投稿のメニューを追加する位置
    'rewrite' => true, // リライト設定
  ));
}
add_action('init', 'banner_custom_post_type');

バナーの画像サイズをWordPressに追加

functions.phpに以下を記述することで、medium、largeなどのように新たに画像サイズをオリジナルで作成することができます。


add_image_size('banner', 250, 66, true);

今回の場合は、横幅250px、高さ66pxの画像を”banner”という名前で作成できました。第4引数の”true”は画像を切り抜くかどうかを指定します。デフォルトはfalseで、falseの場合は切り抜かずに横幅を基準に縮小されるようです。trueにしておいたほうが良さそうです。

カスタムフィールドの追加

カスタムフィールドのプラグインは「Advanced Custom Fields」を使用しています。今回投稿に含めたい機能は、画像と広告のリンク先(URL)なのでこの2項目を追加しましょう。

どちらも欠かせないので、必須入力項目としました。フィールドの名前はあとから使うので分かりやすい名前にしておきましょう。

画像の返り値は今回は配列(オブジェクト)に設定しました。

上記画像のように設定し、バナーの投稿画面を見てみると、「バナー画像」「リンク先」の2項目が表示されていると思います。

バナーを複数個登録しておく

投稿画面が完成したので、バナーを複数個登録してみましょう。出力確認のためなのでとりあえず2~3個でOKです。

バナーをループ内で取得

ここからが苦戦したところ。記述量としてはとても少量なのですが、なかなかうまく取得&出力することができませんでした。

まずコードはこちらです。軽く解説します。


<?php
$banners = get_posts(array(
  'post_type' => 'banner',
  'post_status' => 'publish'
));
foreach ($banners as $banner) :
  $banner_info = get_field("banner_img", $banner->ID);
  $size = 'banner';
  $thumb = $banner_info['sizes'][$size];
  var_dump($thumb);
  $banner_link = get_field("banner_link", $banner->ID);
  ?>

今回はulタグ内のli要素として広告バナーを並べました。

カスタムフィールドで指定した画像を取得するために、投稿IDが必要です。なので、まずは投稿タイプを指定して投稿を丸ごと取得し、$bannersという配列に入れます。これをforeach文で回して、一つ一つカスタムフィールドの値を取得・出力していきます。

カスタムフィールドを登録した時に、画像の返り値を配列に設定した場合は、「get_field(“banner_img”, $banner->ID);」で情報丸っと取得することができます。出力に必要なのは画像のパスとサイズ情報なのでこれらを設定します。

$thumbのところが若干分かりづらいですが、このように指定することで、画像サイズを指定した画像パスを取得できます。

中身を見てみるとこんな感じです。
$thumb = “http://****/wp/wp-content/uploads/2019/10/banner01-250×66.jpg”

あとはURLを取得して分かりやすいように変数に入れておきました。URLは画像ほどややこしくなく、単純にカスタムフィールド名と投稿IDを指定するだけで、登録したURL(リンク先)をそのまま取得できます。

バナーをループ内で出力

上記コードのそのまま続きになります。上記コードの下にそのまま記述してください。


  <li class="link__list__items"><a href="<?php echo $banner_link; ?>" target="_blank"><img src="<?php echo $thumb; ?>" alt="<?php echo $banner->post_title ?>"></a></li>
<?php endforeach; ?>

上記で取得した情報を格納している変数をそのまま出力するだけなので簡単ですね。

a要素のhref属性にリンクを出力「

img要素のsrc属性に画像パスを出力「

基本的にはこれで完了ですが、img要素のalt属性にリンク先のタイトルがあったほうが望ましいので投稿画面のタイトルにあたる部分を出力させています。

動作確認

実装部分を確認して登録したバナーがすべて出力されていたら実装成功です。

related article

2021/02/04 WordPress

All in One SEO でページタイトルがURLになってしまう

2020/09/10 WordPress

the_dateタグは使えない

2019/11/04 WordPress

WordPressのコンタクトフォームから送信できない

2021/02/26 WordPress

デフォルトの「投稿」のURLをカスタマイズする