kdcsライブラリー

WordPressでadvanced custom fieldsを使う場合、投稿編集画面に表示される入力フィールドの幅が100%指定で見た目が悪い。
この入力フィールドの幅をcssでカスタマイズする方法。

advanced custom fieldsのバージョンは6.3
カスタマイズ用のcssファイルを作成し、functions.phpで特定の投稿ポストの編集時に読み込ませるcssを指定する。

以下は特定のカスタム投稿タイプ用にcssフォルダ内にadmin-style.cssを作成し「your_custom_post_type」にカスタム投稿タイプを指定としている。
functions.php

function custom_admin_styles() {
    global $post_type;
    if ($post_type === 'your_custom_post_type') { // カスタム投稿タイプを指定
        wp_enqueue_style('custom-admin-css', get_template_directory_uri() . '/css/admin-style.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');

admin-style.cssの記述
入力フィールドのdata-nameにフィールド名が入っているのでそれぞれ入力し、widthを!important指定する

/* inputの場合 */
div[data-name="フィールド名"] input {
  width: 300px !important;
}
/* selectの場合 */
div[data-name="フィールド名"] select {
  width: 300px !important;
}

cssファイルを作らずにfunctions.phpだけで行う方法

function custom_admin_css() {
    global $post_type;
    if ($post_type === 'your_custom_post_type') {
        echo '<style>
            #poststuff .acf-field { background-color: #f9f9f9; padding: 10px; }
            #post-body-content { max-width: 800px; }
        </style>';
    }
}
add_action('admin_head', 'custom_admin_css');

例：roomsというカスタム投稿タイプの編集画面に、あらかじめ作成しておいたcustom-admin-rooms.cssを読み込ませる

// 宿泊（客室タイプ）用のカスタムスタイルのファイルを指定する-----------------------------
function custom_admin_styles() {
    global $post_type;
    if ($post_type === 'rooms') { // カスタム投稿タイプを指定
        wp_enqueue_style('custom-admin-rooms-css', get_template_directory_uri() . '/css/custom-admin-rooms.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');