【WordPress】プレスマン製公式プラグイン「ACF Additional Hint」の紹介

ACF Additional Hintとは

ACF Additional Hintはプレスマン製のWordPressプラグインで、ACFで追加したフィールドに対して、説明文を追加するプラグインです。現時点では、スイッチボタンで説明文の表示のON/OFFを切り替える形式と、「?」のアイコンにマウスを乗せた時にツールチップで説明文を表示するという形式での表示に対応しています。ACFにもともとある説明文とは異なり、表示・非表示を切り替えられる説明文を簡単に入れることができます。長い説明文を入れたいけどスペースをとって邪魔になるので、好きなタイミングで表示を切り替えたいというような、表示のON/OFFを切り替えたい状況で便利なプラグインになるかと思います。

ACF Additional Hint

前提：このプラグインはACFのアドオンのため、ACFが必要になります。1. プラグインをインストールして、有効化します。2. 編集する対象のカスタムフィールドのフィールドグループ編集画面に移動します。3. フィールドグループ内の説明文を追加したいフィールドを開きます。すると以下の赤枠内のように、『「Additional Hint」ヒント用文章の表示方法』と、『「Additional Hint」ヒント用文章の追加』という項目が追加されています。

4. 『「Additional Hint」ヒント用文章の表示方法』では、選択肢の中から表示したい方法を選びます。5. 『「Additional Hint」ヒント用文章の追加』では、表示する説明文を入力します。（HTMLでの入力もできます）6. 最後にフィールドグループを表示している投稿タイプの記事入稿の画面に行くと、設定した説明文が追加されています！（以下はボタンをONにして説明文を表示している場合の例）

また、説明文の表示をツールチップに設定している場合は以下のように表示されます。（カーソルをアイコンから外せば、ツールチップは表示されなくなります）

プラグインで使用したACFのフック

ここからは、今回のプラグインを作るにあたって使用したフックを簡単に紹介したいと思います。

acf/render_field_settings

各フィールドの設定に独自の項目を追加できるフックです。今回は『「Additional Hint」ヒント用文章の表示方法』と、『「Additional Hint」ヒント用文章の追加』という2項目を追加するために使用しました。プラグインのコード中ではhint_toggler_choice_fieldで表示方法の項目、hint_text_fieldで任意の説明文を入力する項目を追加しています。また、hint_toggler_choice_fieldの中ではacf_render_field_settingというACF独自の関数を使うことで、追加する項目（ここでは『「Additional Hint」ヒント用文章の表示方法』）の細かい設定をしています。hint_text_fieldでも流れは同じです。

public function __construct() {
    // 別フックは省略
    add_action( 'acf/render_field_settings', array( $this, 'render_hint_fields' ) );
}

public function render_hint_fields( $field ) {
    $this->hint_toggler_choice_field( $field );
    $this->hint_text_field( $field );
}

private function hint_toggler_choice_field( $field ) {
    $choices = array(
        'click_toggle' => __( 'Toggle display of the message by button.', 'acf-additional-hint' ),
        'show_hover'   => __( 'Show the message in tooltip when you mouse over the icon.', 'acf-additional-hint' ),
        'none'         => __( 'None', 'acf-additional-hint' ),
    );

    // 追加する項目の設定
    acf_render_field_setting( $field, array(
        'label'         => __( '[Additional Hint] How to display your help/hint text', 'acf-additional-hint' ),
        'instructions'  => __( 'Please select how to show your message.', 'acf-additional-hint' ),
        'name'          => 'hint_toggler',
        'type'          => 'radio',
        'choices'       => $choices,
        'default_value' => 'none',
        'ui'            => 1,
    ), true );
}

acf/input/admin_enqueue_scripts

ACFが表示されるページに任意のCSS、JavaScriptファイルを読み込むためのフックです。WordPressに標準であるフック「admin_enqueue_script」に似ていますが、今回使用したフックは、管理画面の中でもACFフィールドが表示される画面でのみファイルを読み込む点に違いがあります。プラグインのコードでは、admin_enqueue_scriptを使う時と同様に、hint_plugin_scripts関数内でwp_enqueue_style、wp_enqueue_scriptを使用してCSSとJavaScriptを読み込んでいます。

public function __construct() {
    // 別フックは省略
    add_action( 'acf/input/admin_enqueue_scripts', array( $this, 'hint_plugin_scripts' ) );
}

public function hint_plugin_scripts() {
    // プラグインのバージョンを取得
    $data = get_file_data( __FILE__, array( 'version' => 'Version' ) );

    // css読み込み
    wp_enqueue_style( 'additional-hint-plugin-style', plugin_dir_url(__FILE__) . 'css/style.css', false, $data['version'] );

    // js読み込み
    wp_enqueue_script( 'additional-hint-plugin-script', plugin_dir_url(__FILE__) . 'js/main.js', false, $data['version'], true );
}

acf/render_field

フィールドの前後に独自のHTMLを出力することができるフックです。今回のものを例に挙げると、追加した説明文、説明の表示・非表示切り替えのボタン、「?」アイコンなどを画面に表示するために使用しました。プラグインのコード中では、render_hint_text_field関数で、任意の説明文と、表示方法の指定に応じて、ボタンまたはツールチップの表示をしています。acf/render_fieldに引っかける関数は、ACF関連の設定値が入った配列を引数で受け取れるので、それを使ってボタンかツールチップかの判定と、入力した説明文の取得をしています。

public function __construct() {
    // 別フックは省略
    add_action( 'acf/render_field', array( $this, 'render_hint_text_field' ), 10, 1 );
}

public function render_hint_text_field( $field ) {
    // $field['hint_text']のキーがない、または説明文が何も入力されていない場合にはreturn
    if ( ! isset( $field['hint_text'] ) || ! $field['hint_text'] ) {
        return;
    }

    // click_toggle（ボタンで表示/非表示切り替え）の場合
    if ( 'click_toggle' === $field['hint_toggler'] ) {
        $this->hint_toggler_click_toggle( $field );
        return;
    }

    // show_hover（ツールチップ）の場合
    if ( 'show_hover' === $field['hint_toggler'] ) {
        $this->hint_toggler_show_hover( $field );
        return;
    }

    return;
}

private function hint_toggler_click_toggle( $field ) {
    // この関数が2回実行されないようにする（繰り返しフィールド対策）
    if ( isset( $this->field_key_counter[ $field['key'] ] ) ) {
        return;
    }

    // 表示/非表示切り替え用のボタンを出力
    echo 
    '<div class="btn-area">
        <span class="btn-text">HELP</span>
        <div class="hint-btn" data-id="' .$field['id']. '" data-key="' .$field['key']. '">
            <div class="switch-circle"></div>
        </div>
    </div>';

    // 説明文を出力
    echo '<div class="hint-text" data-key="' .$field['key']. '" style="display: none;">' .$field['hint_text']. '</div>';

    // 関数が実行されたフラグを立てる
    $this->field_key_counter[ $field['key'] ] = true;
}

ダウンロード

以下のWordPress公式サイトのプラグインページより、ダウンロードできます。

ACF Additional Hint