勉強したことのメモ

webプログラマが勉強したことのメモ。

ACFでセレクトメニューを動的に生成

      2019/02/04

WordPressでカスタムフィールド設定用のプラグインAdvanced Custom Fieldsを使用中の環境で、記事投稿ページからセレクトメニューを選択すると、選択したものと連動したセレクトメニューが次に表示されるというシステムが欲しかった。以下に方法をメモ。

 

やりたいこと

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示され、さらに都道府県を選ぶと路線が、路線を選ぶと駅名が選択できるといった一連のセレクトメニューをWordPressの記事一覧ページに作成したかった。

都道府県等のデータ用意やセレクトメニュー自体の作成方法は以下記事を参照。

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

 

ACF側の設定

以下のような形で設定しておく。

フィールドラベル フィールド名 フィールドタイプ 選択肢
八地方区分 region セレクトメニュー 1 : 北海道
2 : 東北地方
3 : 関東地方
4 : 中部地方
5 : 近畿地方
6 : 中国地方
7 : 四国地方
8 : 九州地方
都道府県 prefecture セレクトメニュー 空でOK
路線種別 line ラジオボタン 0 : 地下鉄
1 : 私鉄
2 : JR
地下鉄 subway セレクトメニュー 空でOK
私鉄 private セレクトメニュー 空でOK
JR jr セレクトメニュー 空でOK
station セレクトメニュー 空でOK

 

 

functions.phpに追記

wp-config.phpで設定されているMySQLのログイン情報が定数だったのでそのまま「DB_PASSWORD」とかで取得しようとしたらエラーが起きた。以下で取得できるというのを初めて知った。

 

JavaScript

今回だと「/hogehoge/js/search_station.js」のファイルを以下内容でアップロードする。

WordPressでajax通信をする際はajaxurl(/wp-admin/admin-ajax.php)にリクエストしないといけないらしい。最初適当なディレクトリに突っ込んで呼び出そうとしたがエラーが起きた。

あとACFを使っているとjQuery等で各カスタムフィールドが後から追加されるので、4行目の部分は以下の通り注意する。

 - CMS, WordPress

  関連記事

WordPressで任意のクエリをページに出力するプラグイン

先日、「WordPressで任意のクエリをページ内で出力する方法 」という記事で ...

WordPressで記事毎に設定した広告を表示させる方法

WordPressでGoogleアドセンスのようなクリック広告ではなく、商品を指 ...

WordPressのパーマリンクについて

WordPressのパーマリンクについて、思ったことなんだけど、 ・URLに日本 ...

WordPressでユーザー毎にフラグを持たせる

WordPressでユーザー毎に何らかのフラグを持たせて、フラグによって分岐処理 ...

Advanced Custom Fieldsでチェックボックスの記事を取得

Advanced Custom Fieldsでチェックボックス設定しているカスタ ...

WordPressで店舗用サイトを作るときに使えそうなテーマ

WordPressで店舗用のサイトを作る際に使えるかも、というテーマがいくつかあ ...

WordPressの管理画面で記事一覧にアイキャッチ画像を表示

WordPressの管理画面で記事一覧にアイキャッチ画像を表示させる方法のメモ。 ...

WordPressで閲覧者にテーマを変更させるプラグイン

「新規サイトを○○みたいなイメージでWordPressのテーマを見繕って欲しい」 ...

軽量CMSのMonstraがよさげ

WordPress便利なんだけど、メモリ1GのVPSだとWordPressだけで ...

WordPressのメール送信フォームに画像認証を設置する

■やりたかった事 ココで作成したメール送信フォームに画像認証を設置する ■方法 ...