サポート » プラグイン » WordPress投稿画面でカスタムフィールドを動的に表示/非表示したい

  • 解決済 riezo

    (@riezo)


    初めて投稿いたします。WordPress歴3ヶ月程度の初心者です。
    いろいろ試行錯誤しましたが、解決できないのでどうかお力添えをお願い致します。

    ■やりたいこと
     Wordpressの管理画面の投稿時に表示されるカスタムフィールドの項目について動的に表示/非表示させたい。

     現在、以下のようなカスタムフィールドを使用して、記事が投稿できるようにしています。

     【カスタムフィールド】
     ・パターン(セレクトボックス。1:パターン1、2:パターン2、3:パターン3)
     ・項目1(上記のパターンが1の場合、入力必要)
     ・項目2(上記のパターンが2の場合、入力必要)
     ・項目3(上記のパターンが3の場合、入力必要)

     パターンのプルダウンでAを選んだ際は、項目1の入力欄だけが表示され、項目2、項目3は表示させない。
     パターンのプルダウンでBを選んだ際は、項目2の入力欄だけが表示され、項目1、項目3は表示させない。

    ■試したこと

    ①jQueryで上記を実現しよう考え、functions.phpに以下を登録。

     function load_custom_wp_admin_style() {
    wp_enqueue_script( ‘custom-js’, get_template_directory_uri() . ‘/custom.js’, array(‘jquery’));
     }
     add_action( ‘admin_enqueue_scripts’, ‘load_custom_wp_admin_style’);

    ②custom.jsは以下の内容。

    // JavaScript Document
    jQuery(function(){
    jQuery(‘.field_key-field_555eb9c7e5843 select’).change(function(){
    jQuery(‘.field_key-field_555eb9fde5844’).css(‘display’, ‘none’);
    });
    alert( “aaa” );
    });

    ③管理画面の投稿画面でカスタムフィールドの「パターン」を選択しても、何も反応しません。
     ただ、ロード時にポップアップで”aaa”と表示されるので、jsファイルの読み込みは成功していると思います。
     また、投稿画面のHTMLソースをコピーした個別ページを作成し、同じcustom.jsファイルを読み込んだ場合には正しく反応します。

    ■質問したいこと
     上記のようなWordpressの管理画面をカスタマイズするjQueryを作成した場合
     正しく機能させるどうしたらよいでしょうか。
     よろしくお願い致します。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • これはプラグインの Advanced Custom Fields(以下、ACF) を用いた場合の質問でしょうか?
    セレクタの指定が「.field_key-field_~」というACFを有効化した場合に出力されるクラス名に類似しているため、ACFを有効化していることを前提にして話をすすめると、
    ACFには条件判定(Conditional Logic)という機能が備わっており、カスタムフィールドの設定画面で条件判定で「はい」を選択すると、そのカスタムフィールドを表示する条件を設定することができます。

    参考URL:
    http://www.advancedcustomfields.com/resources/field-settings/

    今回の場合、ACFの設定画面でパターン1〜3を選択できるセレクトボックスのカスタムフィールドと項目1〜3のカスタムフィールドを用意し、項目1〜3のカスタムフィールドはそれぞれ必須と条件判定を「はい」に設定し、条件判定の内容としてはセレクトボックスのカスタムフィールドがパターン1の時、2の時、3の時という条件をそれぞれの項目に設定する事で目的の動作になるのではないかと思います。

    ちなみにcustom.jsのコードはパッと見た限り特に問題無いように見えますね、、、
    changeイベントが上手く働いて無いのでしょうか。

    トピック投稿者 riezo

    (@riezo)

    t.okubo様

    迅速なご回答大変ありがとうございます!
    教えて頂いた方法で望み通りの動きが出来ました!!

    ご推測の通り、Advanced Custom Fieldsを使用しています。
    こんな機能があるなんて知りませんでした。
    ACFを使う際にもっと注意深く見ておけばよかったのですが、普段使う項目以外は気にもとめず、自力で動かすことばかり頭がいってしまいました。

    同僚も知らなかったので、教えます。
    このたびは大変ありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「WordPress投稿画面でカスタムフィールドを動的に表示/非表示したい」には新たに返信することはできません。