今回、ホームページを運用しているお客様から以下のご依頼がありました。
・WordPressのカスタムフィールドでサイト内の商品メニューを更新していたが、
カテゴリーの追加削除をした結果、飲食メニューのカテゴリーをクリックしても別カテゴリーの商品がポップアップ表示されてしまう。

WordPressには記事の投稿やカテゴリー設定機能がデフォルトで備わっており、こちらの機能だけを使用していれば今回のようなことは起きないと思いますが、サイトの更新のし易さなどを求めていくとデフォルトの機能だけでは不十分となってきます。原因調査のためにお客様からftpとWordPressアカウント情報を頂き確認したところ、今回のお客様のサイトもデフォルトの機能だけでなく多くのカスタマイズがされておりました。

メニューページの管理方法

WordPressのサイトでは通常、メニューなどの商品を登録する場合は記事として1つの商品を登録していくことが多いと思います。しかし、今回の場合はWordPressプラグイン「Custom Field Suite」を使用し固定ページに商品情報を記入するカスタムフィールドを設置し商品を登録していくという形がとられていました。

カスタムフィールドの値をポップアップ表示する方法について

「Custom Field Suite」の使い方については多くの参考サイトがネット上に存在しているかと思いますのでここでは割愛させて頂き、今回はカスタムフィールドの値をポップアップ表示する方法についてご紹介させていただきます。

まずは下記のようなカテゴリーリストとカスタムフィールドの値を出力するコードがあるとします。（こちらはWordPressプラグイン「Custom Field Suite」の出力コードとなります。他のカスタムフィールド系プラグインでは出力コードが変わってきますのでご注意ください。）

（記述内容）
・クラスmenu__tabでメニューA～Cまでをリスト表示
・各sectionでカスタムフィールドの値を出力

上記だけでは各カテゴリーの内容が全て表示されたままですのでcssとJavaScriptファイルに下記を記述します。

（記述内容）
・var $tabcontAry = [$(‘#menuA’), $(‘#menuB’), $(‘#menuC’)];でポップアップの順番を指定
・if (!$(this).hasClass(‘active’))以下の記述でクリックした要素のクラスにactiveを付け外し表示非表示を切り替え
・$tabcontAry[clickdNum].fadeIn(200);で表示速度を調整

下記サンプルとなります。
（サンプルではHTMLで表示しております）

終わりに

今回の案件では上記で紹介したphp、JavaScriptのコードを修正、プラグイン「Custom Field Suite」の設定変更でお客様のご希望の形に仕上げることができました。今回のようにWordPressを導入されているサイトでは様々な要素がからみあいサイトを作り上げていることが多くなってきますのでどうしても専門的な知識が必要となってまいります。もし現在お持ちのサイトでお困りごとや、もっと使い易くしたいなどのご要望があれぜひ弊社更新倶楽部までご依頼くださいませ。