プラグインAdvanced custom fields(ACF)のacf/field_group/admin_headアクションの使用方法・解説

概要

acf/field_group/admin_head アクションは、フィールドグループを編集するときに「admin_head」アクション中に発生します。このアクションは、特に以下のような機能を実装する際に使われることが多いです。

管理画面のスタイルやスクリプトを追加する
特定の条件に基づいたカスタムCSSを適用する
フィールドの表示方式を変更するためのJavaScriptを追加する
フィールドグループに対してカスタム設定を追加する
カスタムフォントやアイコンを追加する
ユーザビリティを向上させるためのツールチップやヘルプテキストを表示する

このアクションを使用可能なプラグインAdvanced Custom Fields (ACF)のバージョンは、ACF 5 以降のバージョンで、WordPressのバージョンは4.0以降が対象です。

構文

add_action('acf/field_group/admin_head', 'my_custom_admin_head');

function my_custom_admin_head($field_group) {
    // カスタムコード
}

パラメータ

$field_group: フィールドグループの情報を含む配列。

戻り値

このアクションは何も戻さず、主にサイドエフェクトを持つため、主にスタイルやスクリプトの追加に使用されます。

サンプルコード

サンプルコード 1

add_action('acf/field_group/admin_head', 'custom_admin_css');

function custom_admin_css() {
    echo '<style>
        .acf-field { background-color: #f9f9f9; border: 1px solid #ddd; }
    </style>';
}

このコードは、管理画面のACFフィールドを背景色でスタイリングします。

サンプルコード 2

add_action('acf/field_group/admin_head', 'my_custom_js');

function my_custom_js() {
    echo '<script>
        jQuery(document).ready(function($) {
            $(".acf-field").on("focus", function() {
                $(this).css("border-color", "blue");
            });
        });
    </script>';
}

このコードは、ACFフィールドがフォーカスされたときにボーダーの色を変更するJavaScriptを追加します。

サンプルコード 3

add_action('acf/field_group/admin_head', 'add_custom_help_text');

function add_custom_help_text() {
    echo '<div class="acf-tooltip">このフィールドは特定の目的で使用されます。</div>';
}

このコードは、フィールドに対するヘルプテキストを表示するためのHTMLを追加します。

サンプルコード 4

add_action('acf/field_group/admin_head', 'enqueue_custom_admin_styles');

function enqueue_custom_admin_styles() {
    ?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/admin-custom.css">
    <?php
}

このコードは、管理画面にカスタムCSSファイルを追加します。

サンプルコード 5

add_action('acf/field_group/admin_head', 'add_custom_icon');

function add_custom_icon() {
    echo '<style>
        .acf-field:before { content: "⭐"; color: gold; margin-right: 5px; }
    </style>';
}

このコードは、すべてのACFフィールドの前にゴールドの星アイコンを追加します。

この関数のアクションでの使用可能性

アクション名	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

概要

構文