advanced custom fields入力フィールドの幅を調整するcss(全投稿タイプの投稿編集画面対象)

Filed under: css,functions.php — kdcs @ 25年8月30日 土曜日

以前、特定のカスタム投稿タイプの編集画面にあるacf入力フィールドについてcssを適用する方法(こちら)を書いたが、今回は全投稿タイプの投稿編集画面対象。

あらかじめcssフォルダ内に「custom-admin-acf.css」を作成しておく
※こちらの記述では固定ページ、投稿ページ共にcustom-admin-acf-cssが出力される
copilot

function custom_admin_styles() {
    $screen = get_current_screen();
    if ($screen->base === 'post') {
        wp_enqueue_style('custom-admin-acf-css', get_template_directory_uri() . '/css/custom-admin-acf.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');

「投稿編集画面だけ」に限定したいので、get_current_screen() を使って画面の種類を判定

固定ページを除外したい場合
※こちらの記述では投稿ページのみcustom-admin-acf-cssが出力される

function custom_admin_styles() {
    $screen = get_current_screen();
    if ($screen->post_type !== 'page') {
        wp_enqueue_style('custom-admin-acf-css', get_template_directory_uri() . '/css/custom-admin-acf.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');

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

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

サイト内検索

カテゴリー

最近の投稿

« |advanced custom fields入力フィールドの幅を調整するcss(全投稿タイプの投稿編集画面対象)| »
↑上に戻る