【WordPressフィールド画像取得】array_push＆foreachループ、代替テキストをクラス出力、表示/非表示を切り替える方法

今回は、以前お仕事で『webサイトにフォトギャラリー入れたい，WordPressから画像追加したり、絞り込み非表示みたいなのもほしい』というような要望に対応した時のアイデアを紹介します。ＷＰ組み込みファンクションやPHP，jqueryなど複合されてややこしいんですが、詳しく解説。早速みていってみましょう。

下準備～ＷＰサムネイル，jquery，カスタムフィールド&画像メタ情報格納

wp_get_attachment_image($id,thumbnail)で出力するためのサムネイルサイズ指定

ＷＰのデフォルトサムネイル機能。この画像はwp_get_attachment_image($id,thumbnail)で出力でき、『添付ファイルのID($id,記事idではない)やサイズ(thumbnailの部分，fullだとフルサイズ)』をパラメーター指定します。

全部のサイズで生成するとフォルダがごちゃごちゃになるので、使う画像は『フルサイズ，サムネイルサイズ』と定義しました。サムネを150×150で指定し、ほかのサイズは『0』を入力し、生成しないようにしています。なお、フルサイズは『クリックしたときフルサイズ画像urlに遷移』という形で使用します。

wp_get_attachment_image（テンプレートタグ，codex）
https://wpdocs.osdn.jp/テンプレートタグ/wp_get_attachment_image

jquery使えるか確認（なければテーマエディットして出力）

jqueryが使用できる環境かどうかも確認しました。だいたいのＷＰテーマでは使えますが、自作，スターターから作った場合は無い場合もあります。

これは、『hide/showで、ボタンクリックで画像の表示/非表示切替』という機能に使用します。

画像カスタムフィールド準備(Smart Custom Fields)

カスタムフィールドは何でもよいんですけど、クリックでメディア入力画面が出るので、プラグイン使用（Smart Custom Fields）。とりあえず、テストということで１記事に対し４枚設定できるようにしました。

ラベル，名前(get_post_metaなどで取るとき使用)は適当に付けました。運用サイトに実装する場合は、『別フィールドと混同しないよう、命名規則にそったネーミング』にすると、使いやすくなると思います。

記事編集ページで画像をアップロードし、クラス出力用メタデータ格納

そして、適当に管理人のＰＣに入っていた食べ物の画像を４枚上げます。本文じゃなくて、それぞれのカスタムフィールドに設定。

アップロード時には、『タイトル，キャプション』のほか、『定食の場合：teisyoku』『ラーメンの場合：ramen』『パスタの場合：pasta』というように、代替テキストを指定しました。今回はこれをクラス出力してhide/show操作というのを狙っています。

なお、この代替テキストは『wp〇〇_postmetaテーブル』に格納されており、meta_key『_wp_attachment_image_alt』を指定し、get_post_metaで取ることができます。

フィールド画像取得・array_push＆foreachループ、代替テキストをクラスとして出力し、表示/非表示を切り替える方法

プログラム例

で、プログラム例はこのような形になりました。上に書いてあるＣＳＳは、フレックスボックスで画像を横に並べるのに利用（justify-content:space-betweenだと、非表示を押したとき領域の再計算がされなかったので、leftで寄せてマージン、みたいな感じに。）

input type=”button”の部分は、ボタンが４つ。それぞれボタン用クラスを指定して、『押すとスクリプトで表示/非表示』という機能に（スクリプトは下のほうに）

div class=”meta-field”の中身が、『記事に指定したフィールドの画像やメタデータを出力』で、その下のjavascriptが『hide/show用』です。このスクリプトは一般的にはフッター下とかに書くことが多いかと思います。

PHP/WordPress的なポイント

『$post_id = get_the_ID()』の部分は、記事のidを取っています（single.phpじゃなくてほかのファイルでやるときは、記事idを入れる。フィールドがない場合は出力しない、などの分岐も入れるとベター）。で、次のget_post_metaで、この記事に指定したフィールド画像（画像idが出る）を取り、array_pushで配列にしてやります（ループ処理用，$imglist as $valueのように）。

『aタグに入れるフルサイズurl』はwp_get_attachment_image_srcで取りますが、配列が戻ってくるので出力時は『$img[0]』のようにしてやります（ちなみに[1] => width，[2] => height）。

『クラス出力用代替テキスト』はget_post_meta($value , ‘_wp_attachment_image_alt’ , true)で取って、div=class内に出力。キャプションは『post_excerpt』にアクセスすれば取れます。

サムネイル取得部分は、『wp_get_attachment_image( $value,thumbnail )』で。これで最初に指定した150×150サムネイルが、imgタグ付きで出力されます。

wp_get_attachment_image_src（関数リファレンス，codex）
https://wpdocs.osdn.jp/関数リファレンス/wp_get_attachment_image_src

表示・操作例

そんな感じで、表示確認。まずはhtmlソース部分。画像を囲んでいるボックスのクラス部分に『teisyoku,ramen,sushi,pasta』のようなテキストが出力できました。

フロント部分はこんな感じに。ボタンのほか、サムネイルとキャプションも。画像はクリックするとフルサイズ画像に飛びます。lightboxとかつけてもよいですね。

定食非表示ボタンをおすと、『teisyokuクラス』がついているボックスが消えます（表示ボタンで戻せます）。

ラーメン非表示をおすと、ラーメンの画像も見えなくなります。

あとがき・まとめ

まとめると、こんなところでしょうか。応用すると・・
『swiper用のボックス内に出力してスライドショー』
『条件で画像を絞り込めるフォトギャラリーページ』
『post_type：attachmentや_wp_attachment_image_altをwp_queryに渡す』
など、いろいろなことができるかもしれません。