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

      3356文字

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

下準備~WPサムネイル,jquery,カスタムフィールド&画像メタ情報格納

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


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

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

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


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

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

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


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


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

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


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


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

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

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

プログラム例

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

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

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タグ付きで出力されます。

表示・操作例


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


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


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


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

あとがき・まとめ

  • WPで画像imgタグ付きサムネイルで出力したいときはwp_get_attachment_image($id,thumbnail)
  • 画像代替テキストはwp〇〇_postmetaテーブルに格納され、meta_key『_wp_attachment_image_alt』でアクセスできる
  • 代替テキストはクラス出力でき、画像のjquery操作も可能になる
  • 画像を連続で出力などは、array_pushでidを配列に入れていって、ループ処理をかけるとラク

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

など、いろいろなことができるかもしれません。

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - PHP・データベースetc, webサイト制作関連
【タグ】 - , , , , ,

  関連記事