勉強したことのメモ

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で設定ファイル(wp-config.php)は触っていないのに ...

WordPressで自作テーマにウィジェット対応

WordPressで自作したテーマでウィジェットを登録しようとしたところダッシュ ...

WordPressでGmailのSMTPサーバを使ってメール送信フォームを作る

■やりたかった事 WordPressでGmailのSMTPサーバを使用したメール ...

WordPressのfunctions.phpの初期設定

WordPressのテーマ作成時にfunctions.phpを書くが、いつも内容 ...

WordPressを4.8.2にして不具合

WordPressを4.8.2にすると記事の新規追加時にウィジウィグの挙動がおか ...

Polylangのスイッチャーでクエリを引き継ぐ

WordPressで多言語サイトを作成するにあたりPolylangというプラグイ ...

WordPressでテーマの作成

CSSとHTMLコーディングデータがあり、それをWordPressのテーマに反映 ...

WordPressにインスタグラムの画像を表示

WordPressにインスタグラムへ投稿している画像を表示させたかった。プラグイ ...

さくらvpsにワードプレスを導入

さくらvpsで立ち上げたサーバーにWordPressを導入した際のメモ。 ①ダウ ...

WordPressでプラグインの作成方法

WordPressで簡単なニュースを表示させるというプラグインを作成したので、使 ...