MAGAZINE

Twitter
Facebook

導入環境

  • node.js
  • webpack

実現したいこと

  • 固定ページにACFの繰り返しフィールドを使用して選択項目を設定
  • ACFの繰り返しフィールドは親子関係を持つように制作
  • コンタクトフォームにはMW WP Formを使用する
  • ACFの親項目と子項目のそれぞれを別のセレクトボックスに代入
  • 親項目の入ったセレクトボックスが変われば、子項目の内容も変わるようにしたい
  • お問い合わせフォームの内容や、項目などをクライアント側でも操作可能にしたい

MW WP Formの使用

  • Vue.jsにはv-modelを使用することで双方向でデータバインディングできる
  • MW WP Formはタグに対して独自のテンプレートを使用することができる

Vue.jsを使用する上で、フォームの部品を改変し、アップデートにも対応できるMW WP Formは非常に都合がよかった。

v-modelを使用できるようにセレクトボックスを改変

MW WP Formのセレクトボックスにv-modelを追加

上記を見てもらったらテーマフォルダ内にmw-wp-form > form-fields > select.phpという風にフォームの改変した部品をテーマフォルダ内に保管することで、バージョンアップにも対応できる。

今回は selectタグにv-modelを追加しました。
ただ単純にv-modelが計測するものはなんなのかを指定するために、v-modelの値にフォーム設置時の必須入力項目のnameを入れてます。

これでフォーム部分の準備は完了です。

取得したいデータの準備(ACF)

今回は固定ページ内にカスタムフィールド(ACF Pro)の繰り返しフォールドで用意しました。
※諸般の事情により、カテゴリーやタームでは準備してないです。

繰り返しフィールドで簡単に項目を追加できます

この配列をJSで取得して、フォームに代入していきます。

Javascriptを準備

  • ここではwebpackでコンパイルすることを前提に書いていますので、開発環境の構築をしている人向けです

一気に書いたコードを貼り付けたので、わかりにくいとは思いますので簡単に説明します。

  • axiosでwordpressのjsonへアクセスしてデータを取得
  • 一つ目のセレクトボックスに対してアクセスしたデータの数だけoptionのkeyとvalueに代入して作ります。

ここがミソ

  • Vueにあるwatchという機能を使用し、一つ目のセレクトボックスの値をリアルタイムで計測します
  • この計測している値と合致した子配列を取得し、二つ目のセレクトボックスに代入します

ただしこのままであれば、一つ目のセレクトボックスを変えるたびに、二つ目のセレクトボックスに値が代入し続けられるので、optionがあれば初期化(削除)するコードを入れてあります。

Watchについて

watchで計測するには、まず上記コードのdataに計測したデータを入れる空配列を用意します。
その空配列をwatch部分で使用します。
※当たり前ですけど、v-modelの名前とdata名は一緒にしないとダメですよ〜

この形で下記のような連動セレクトボックスが追加できるようになります。

なんか色んな情報を参照しながらようやく形にできました。