【WordPress】アイキャッチとカスタムフィールドの画像URLを使いやすいように配列に格納して使う
実装内容について
突然ですが、WordPressで下の画像のような投稿詳細ページを作ることってありませんか？
メイン画像があって、その下にスライダーが並んでいるものです。
WordPressのスライダープラグインを使わずにSwiperなどのJSプラグインでスライダーを実装させる際、この画像を管理する方法としてありそうなケースで
- メイン画像として初期表示する画像はアイキャッチにしたい
- その他のサブ画像はカスタムフィールドの画像で選択したものを使いたい
こんな場合に「アイキャッチとカスタムフィールドの画像たちを綺麗に配列化したいよね…」というのが今回のテーマでした。
この例ではAdvanced Custom Fieldsのグループフィールド中に画像フィールドがある場合を想定していますが、繰り返しフィールドや別の主要なカスタムフィールドプラグインに置換しても使える内容をご紹介致します。
コードの例
今回は分かりやすく、画像フィールドからURLが返ってくるように設定しているという前提で進めていきます。
single.phpでの記述として、以下のような例で配列を作ります。
$thumb = get_the_post_thumbnail_url($post->ID, 'full');
$images = get_field( "image_group" );
// サムネイルURLをカスタムフィールドの画像URL配列に追加
array_splice($images, 0, 0, $thumb);
// falseのアイテム削除＋重複しているURLをユニークにする
$images = array_unique(array_filter($images));
// 分かりやすいようにキーを連番で振り直しする
$images = array_values($images);
処理の流れ
始めにthumbでアイキャッチURLを、imagesでカスタムフィールドの画像のURLを取得します。
imagesはグループフィールドのため、この時点では画像フィールド名をキーとした連想配列の形になっています。
その後にarray_spliceでimagesの配列の先頭にthumbを追加します。
第2引数で0を指定して先頭に配置、第3引数を0にすると要素削除をせずに追加だけをしてくれます。
先頭にアイキャッチURLを入れることで、初期表示に選ぶ画像として0のキーがアイキャッチ画像で追加されているため、分かりやすい画像URL配列を作ることができます。
この例はグループフィールドで画像フィールドが指定されていない場合を考慮して、array_filterでbooleanのfalseなどの空要素を削除し、アイキャッチと画像フィールドでURLが同じものがあればarray_uniqueで重複分を削除する…という処理をしています。
上記までで、imagesの先頭は0をキーとするアイキャッチURLが、残りは各画像フィールド名をキーとする画像URLが格納されている状態になります。
ただ、どうせなら画像フィールド名も連番キーに変更したいな…と思った末に最後のarray_valuesで連番を振り直した配列として、完成しました。
ただ、連番キー振り直しはあまり気にしない、という方はやらなくても良い気がしますね。
終わりに
WordPressの構築・カスタマイズ時に、配列関連の関数は一通り知っておくと何かと役に立つ場面があるなー…と感じています。
また、この配列から使う際はエスケープ処理をお忘れなきように。
以上、何かのお役に立てば幸いです。
Discussion