【WordPress】SettingsAPIの設定画面をCSSでデザインカスタマイズ

/* ------------------------------------
① 設定全体を囲って分かりやすく
------------------------------------ */
.wrap {
    max-width: 600px;			/* 横の最大幅 */
    border: 1px solid gray;	/* 線：1dot、gray色	*/
    padding: 2em;				/* 内側余白：2文字分 */
}

/* ------------------------------------
② セクション名を区別
------------------------------------ */
.wrap h2 {
    background: gray;		/* 背景色 */
    color: white;			/* 文字色 */
    padding: 0.5em 1em;	/* 内側余白）縦：.5文字文、横：1文字分 */
}

/* ------------------------------------
③ 設定項目名の幅を調整
------------------------------------ */
.wrap .form-table th {
    width: 90px;		/* 幅：少し狭める*/
}

/* ------------------------------------
④ 入力box（input, textarea）
------------------------------------ */
.wrap td input[type=text],
.wrap td textarea {
    width: 100%;		/* 横幅）外枠目いっぱいに広げる */
    max-width:400px;	/* 横幅）その中で最大400pxとしておく */
}

/* ------------------------------------
⑤ ガイド文言を控えめに
------------------------------------ */
.wrap td p {
    font-size:90%;	/* フォントサイズ：一回り小さく */
    color:gray;		/* 文字色をグレーにして控えめに */
}

/* ------------------------------------
⑥ ラジオボタン、チェックボックス
------------------------------------ */
.wrap td label{
    margin-right:1em;		/* 各項目の右側余白を1文字分空ける */
}

.wrap input[type="radio"],
.wrap input[type="checkbox"] {
	/* ボタンの右余白を設けて項目ラベルとの間を少し空ける */
    margin-right:0.5em!important;
	
	/* 使っているテーマですでに決められているようなので
	important を付けて優先させる */
}

<?php
// ------------------------------------
// １）「メニュー情報」の関数名を指定（関数Bを指定）
// ------------------------------------
add_action( 'admin_menu', 'jin_test' );

// ------------------------------------
// ２）「メニュー情報」の関数の具体的内容（関数B）
// ------------------------------------
function jin_test(){
	add_options_page(
		'JIN Test Settings',		// ① ページタイトル
		'JINテスト用設定',			// ② メニュー名
		'manage_options',			// ③ メニューが表示されるユーザー権限
		'jin-test-setting-slug',	// ④ メニューのスラッグ
		'jin_test_setting_func'	// ⑤ 「設定画面」表示の関数名（関数Aを指定）
	);
}

// ------------------------------------
// ３）「設定画面」表示関数の具体的内容（関数A）
// ------------------------------------
function jin_test_setting_func(){


//以下省略

?>

<?php

// ★ 手順1：CSSファイルを「ワードプレスに登録」
function jin_register_test_styles() {
    wp_register_style( 
        'jin_func1_style', 
        get_theme_file_uri( 'myfunc/func1-style.css' ), 
        array(), 
        filemtime( get_theme_file_path( 'myfunc/func1-style.css' ) ) 
    );
}
add_action( 'admin_enqueue_scripts', 'jin_register_test_styles' );


// ★ 手順2：登録したCSSの「読み込み関数を用意」
function jin_load_test_styles() {
    wp_enqueue_style( 'jin_func1_style' );
}

// ------------------------------------
// １）「メニュー情報」の関数名を指定（関数Bを指定）
// ------------------------------------
add_action( 'admin_menu', 'jin_test' );

// ------------------------------------
// ２）「メニュー情報」の関数の具体的内容（関数B）
// ------------------------------------
function jin_test(){
        $page_hook = add_options_page(
                'JIN Test Settings',
                'JINテスト用設定',
                'manage_options',
                'jin-test-setting-slug',
                'jin_test_setting_func'
        );

        // ★ 手順3：設定ページで「実際にCSSの読み込み」
        // 管理画面のスクリプト読み込み時に実行
        add_action( 'admin_enqueue_scripts', function( $current_hook ) use ( $page_hook ) {
                // この設定画面の時だけ、手順2の関数を呼び出す
                if ( $current_hook === $page_hook ) {
                        jin_load_test_styles();
                }
        });
}

// ------------------------------------
// ３）「設定画面」表示関数の具体的内容（関数A）
// ------------------------------------
function jin_test_setting_func(){


//以下省略

?>

// ★ 手順1：CSSファイルを「ワードプレスに登録」
function jin_register_test_styles() {
    wp_register_style( 
        'jin_func1_style', 
        get_theme_file_uri( 'myfunc/func1-style.css' ), 
        array(), 
        filemtime( get_theme_file_path( 'myfunc/func1-style.css' ) ) 
    );
}
add_action( 'admin_enqueue_scripts', 'jin_register_test_styles' );

// ★ 手順2：登録したCSSの「読み込み関数を用意」
function jin_load_test_styles() {
    wp_enqueue_style( 'jin_func1_style' );
}

function jin_test(){
        $page_hook = add_options_page(
                'JIN Test Settings',
                'JINテスト用設定',
                'manage_options',
                'jin-test-setting-slug',
                'jin_test_setting_func'
        );
 
        // ★ 手順3：設定ページで「実際にCSSの読み込み」
        // 管理画面のスクリプト読み込み時に実行
        add_action( 'admin_enqueue_scripts', function( $current_hook ) use ( $page_hook ) {
                // この設定画面の時だけ、手順2の関数を呼び出す
                if ( $current_hook === $page_hook ) {
                        jin_load_test_styles();
                }
        });
}