WordPress ACFのタクソノミーフィールドでラジオボタンを横並びにする方法

WordPressのカスタムフィールドを便利に拡張できるプラグイン Advanced Custom Fields（ACF） を利用して、タクソノミーフィールドのラジオボタンを横並びにする方法をご紹介します。

通常、ACFのタクソノミーフィールドで ラジオボタン を利用すると、デフォルトでは縦並びになっています。しかし、管理画面を見やすくするために、 横並びにしたい というケースもあります。

今回は、管理画面のみ適用されるように CSSを適用する方法 を解説します。

1. 必要なファイルとディレクトリ構成

今回の方法では、管理画面専用のCSSを適用するために、以下のディレクトリにCSSファイルを配置します。

wp-content/themes/your-theme/
├── assets/
│   ├── css/
│   │   ├── admin/
│   │   │   ├── style.css  ← ここに管理画面用のCSSを記述
├── functions.php  ← ここにCSSを読み込むコードを追加

ポイント: admin/ ディレクトリを作成し、その中に style.css を格納することで、一般サイトのCSSと分けて管理しやすくなります。

2. functions.php に CSS 読み込みを追加

管理画面専用のCSSを適用するために、functions.php に以下のコードを追加します。

<?php
/**
 * WordPress管理画面専用のCSSを読み込む関数
 */
function enqueue_custom_admin_style()
{
    // 管理画面専用のCSSファイルを読み込む
    wp_enqueue_style(
        'custom-admin-style', // ハンドル名（CSSを識別するための名前）
        get_template_directory_uri() . '/assets/css/admin/style.css', // CSSのパス
        array(), // 依存関係（なし）
        false, // バージョン（キャッシュ対策が必要なら変更）
        'all' // メディアタイプ（全ての画面）
    );
}
// WordPress管理画面でのみ適用
add_action('admin_enqueue_scripts', 'enqueue_custom_admin_style');

解説:

• wp_enqueue_style() を使用して、管理画面専用のCSSを読み込む。
• get_template_directory_uri() を使って、テーマフォルダ内の assets/css/admin/style.css を指定。
• admin_enqueue_scripts フックを利用することで、管理画面のみCSSを適用。

3. style.css にラジオボタンを横並びにするCSSを追加

次に、assets/css/admin/style.css に以下のコードを追加します。

/* ACFのタクソノミーフィールドのラジオボタンを横並びにするCSS */
.acf-checkbox-list {
    display: flex; /* フレックスボックスで横並びにする */
    gap: 15px; /* 各ラジオボタンの間隔を調整 */
    list-style: none; /* リストのデフォルトスタイルを無効化 */
    padding: 0; /* 余白をリセット */
    margin: 0; /* 余白をリセット */
}

解説:

• .acf-checkbox-list に display: flex; を適用することで、 横並び にする。
• gap: 15px; で、 ボタン同士の間隔を調整。
• list-style: none; で、 リストの黒丸（•）を非表示 にする。

4. 動作確認

1. WordPress管理画面にログイン
2. 投稿タイプの編集画面などで、ACFの タクソノミーフィールド を含む設定画面を開く
3. ラジオボタンが 横並び になっていることを確認！ 🎉

まとめ

この方法を使えば、 管理画面のACFラジオボタンを簡単に横並びにできる ので、編集画面の 視認性が向上 します。