勉強したことのメモ

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

  関連記事

Polylangで言語毎の分岐処理

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

WordPressにお気に入り登録機能とお気に入り一覧ページを作成する方法

WordPressにお気に入り登録機能をつけたかった。 会員制のサイトじゃなかっ ...

WordPressの記事をfacebookに投稿

WordPressの記事をfacebookに投稿する際にOGP設定をする必要があ ...

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

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

WordPressでテーマの作成

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

WordPress記事本文の文字検索と置換方法

WordPressの記事本文内にhogeという文字列が含まれていた場合、hoge ...

WordPressでタグやカテゴリの複数検索

WordPressでカテゴリのアンド検索や、タグとカテゴリの同時検索を行いたかっ ...

PHP5.1系にWordPressを入れる方法

無料レンタルサーバーにWordPressを突っ込むと、 「 サーバーの PHP ...

WordPressで複数のカテゴリーを取得する

WordPressで1つの記事に対して複数カテゴリを設定していた場合、テーマによ ...

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

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