SettingsAPIを使って自作プラグインや独自の設定画面にCSSを反映する場合、その設定画面だけにCSSを読み込む方法をまとめてます。
ポイントはwp_register_style()を実行する時に使うフック。
（wp_enqueue_scripts か admin_enqueue_scripts か）
ここを押さえてないと、あれ？フックされないぞ、CSSが読み込まれない、とネットの海をさまようことになり結構大変。^-^;）
Contents
CSSを読み込むための基本
CSSをプラグインや独自の関数に読み込むには以下を使います。
（具体例は下方参照）
- wp_register_style()：CSSファイルを登録する
- wp_enqueue_style()：登録したCSSファイルを追加する
関数リファレンス/wp_register_style（ワードプレス公式）
関数リファレンス/wp_enqueue_style（ワードプレス公式）
まず読み込みたいCSSを wp_register_style() でワードプレスに登録し、
その登録したCSSを読み出したい場面で wp_register_style() を使って読み込む。
こうすることで表示するページのヘッダに以下のようにCSS読み込み用のlinkタグが挿入されます。
|
1 |
<link rel='stylesheet' id='test_css_id-css' href='http://localhost/jin-test/wp-content/themes/cocoon-child-master/my-func/test.css?ver=5.8.2&fver=20211207082341' media='all' /> |
注意が必要なのは、フロントエンド（ユーザーが見る画面）と、設定など管理画面（バックエンド）ではwp_register_style() の呼び出し方（フック）が異なること。
|
1 2 3 4 5 |
// スタイルシートの登録【フロントエンド】 function register_styles() { wp_register_style( $handle, $src ); } add_action( 'wp_enqueue_scripts', 'register_styles' ); |
フロントエンドでは wp_enqueue_scripts フックを使う。
関数リファレンス：wp_enqueue_scripts（英語）
|
1 2 3 4 5 |
// スタイルシートの登録【バックエンド（設定などの管理画面）】 function register_styles() { wp_register_style( $handle, $src ); } add_action( 'admin_enqueue_scripts', 'register_styles' ); |
バックエンドでは admin_enqueue_scripts フックを使う。
関数リファレンス：admin_enqueue_scripts（英語）
ここを間違うと、なぜかCSSが読み込まれない、フックしない．．．
と延々と悩むことになる。（私のように 笑）
個別ページにCSSを読み込む
ワードプレスの管理画面内に作る個別の設定画面にCSSを読み込ませるには、wp_register_style() で登録したCSSファイルを 個別ページ用のコードの中でwp_enqueue_style()を使って呼び出せばOK。
Settings APIを使った設定画面の基本形は以下のようになると思いますが．．．
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php // // 以下Settings APIを使った設定画面 // // メニュー登録 add_action( 'admin_menu', 'test_menu' ); // メニュー内容 function test_menu(){ add_options_page( 'ページタイトル', 'メニュー名', 'manage_options', // メニューが表示されるユーザー権限 'menu-slug', 'setting_func' //設定画面表示の関数 ); } // 設定画面の表示 function setting_func(){ ?> <div class="wrap"> <h1>設定画面タイトル</h1> <form method="post" action="options.php"> <?php settings_fields( 'field-group' ); ?> <?php do_settings_sections( 'menu-slug' ); ?> <?php submit_button(); ?> </form> </div> <?php }; ?> |
ここにCSSファイルの読み込むを入れると、以下のような感じになりますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php // スタイルシートの登録 // $handle: ワードプレスに登録するスタイルシートの個別ID // $src：スタイルシートのURL function register_styles() { wp_register_style( $handle, $src ); } add_action( 'admin_enqueue_scripts', 'register_styles' ); // スタイルシートの読み込み // register_styles()で設定した $handle を指定して読み込む function load_test_styles() { wp_enqueue_style( $handle ); } // // 以下Settings APIを使った設定画面 // // メニュー登録 add_action( 'admin_menu', 'test_menu' ); // メニュー内容 function test_menu(){ $page_hook = add_options_page( 'ページタイトル', 'メニュー名', 'manage_options', // メニューが表示されるユーザー権限 'menu-slug', 'setting_func' //設定画面表示の関数 ); add_action( 'admin_print_styles-'.$page_hook , 'load_test_styles'); } // function setting_func(){ ?> (省略) <?php }; ?> |
wp_register_style（5行目～8行目）
|
1 2 3 4 |
function register_styles() { wp_register_style( $handle, $src ); } add_action( 'admin_enqueue_scripts', 'register_styles' ); |
管理画面なのでadmin_enqueue_scriptsフックで呼び出し、
wp_register_style()でスタイルシートのURL（$src）を「あるID」（$handle）としてまずはワードプレスに登録。
wp_enqueue_style（12行目～14行目）
|
1 2 3 |
function load_test_styles() { wp_enqueue_style( $handle ); } |
上でワードプレスに登録した $handle（に対するスタイルシート）をwp_enqueue_style()によって実際のページに追加する。
これでCSSファイルの読み込みができますが、
個別のページにCSSファイルを追加する場合には、その個別ページが呼び出される時にこのwp_enqueue_style()が実行されるようにすれば良いですね。
admin_print_styles（25行目と32行目）
|
1 |
add_action( 'admin_print_styles-'.$page_hook , 'load_test_styles'); |
フックの「'admin_print_styles-'.$page_hook」が分かりづらいですが、ここが「個別ページの場合には」としているところ。
まずadmin_print_stylesフックは、ワードプレスの管理画面のHTML ヘッダーでスタイルシートを追加するときに実行されるもの。
関数リファレンス：admin_print_styles（英語）
このフックの最後にハイフン「-」を付けてその後にadd_submenu_page()やadd_options_page()の戻り値として得られる「ページフック」というものを付けると、その個別ページの場合だけフックされる。
関数リファレンス：admin_print_styles-{$hook_suffix}（英語）
関数リファレンス：add_submenu_page（英語）
関数リファレンス：add_options_page（ワードプレス公式）
ということでここでは25行目の以下。
|
1 |
$page_hook = add_options_page( |
ここで add_options_pageの戻り値として $page_hook を得て、この$page_hookをハイフンつけてセットしている、ということになります。
ちなみにこのページフック、
実際に echo で表示させてみると以下のようなものになってます。
- settings_page_menu-slug
「settings_page」にadd_options_page内で指定しているスラッグ「menu-slug」がついている形
具体例）
自作プラグインの設定画面にCSSを読み込む
ではちょっと具体例を見てみましょう。
まずは自作プラグインで設定画面を持つ場合ですが、
以下のように「plugins」フォルダー内にプラグイン「test-plugin」があり、その中にスタイルシートの test.css がある場合。
親テーマフォルダー
├ images
├ css
├ plugins
├ test-plugin
├ test-plugin.php
├ test.css
├ index.php
├ functions.php
├ ・・・・・
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php // スタイルシートの登録 // 'test_css_id': ワードプレスに登録するスタイルシートの個別ID function register_styles() { wp_register_style( 'test_css_id', plugins_url('test.css', __FILE__ ) ); } add_action( 'admin_enqueue_scripts', 'register_styles' ); // スタイルシートの読み込み // register_styles()で設定した 'test_css_id' を指定して読み込む function load_test_styles() { wp_enqueue_style( 'test_css_id' ); } // // 以下Settings APIを使った設定画面 // // メニュー登録 add_action( 'admin_menu', 'test_menu' ); // メニュー内容 function test_menu(){ $page_hook = add_options_page( 'ページタイトル', 'メニュー名', 'manage_options', // メニューが表示されるユーザー権限 'menu-slug', 'setting_func' //設定画面表示の関数 ); add_action( 'admin_print_styles-'.$page_hook , 'load_test_styles'); } // function setting_func(){ ?> (省略) <?php }; ?> |
5行目では $handle を「test_css_id」とかにして、
$src をplugin_url()や マジック定数の __FILE__ を使ってるのが異なるのみ。
12行目は、5行目で指定した $handle（test_css_id）に変えた。
plugin_url() は、プラグインフォルダまでのパスを返し、
plugin_url( 'URLを得たいファイル（のパス）', パスの起点とする親ディレクトリー)
という形で、CSSファイルのURLが得られます。
関数リファレンス/plugins url（ワードプレス公式）
__FILE__ はマジック定数と呼ばれるもので、実行されているファイルのフルパスが入っている定数。
具体的にどんな文字列が入っているのか調べてみると
以下のようなものが入ってます。
（テーマはcocoonの子テーマ（cocoon-child-master）を使用時）
PC上のローカル環境（XAMPP）で functions.php 内に「echo __FILE__」を記述：
C:\xampp8-0-7\htdocs\jin-test\wp-content\themes\cocoon-child-master\functions.php
ネット上の functions.php で「echo __FILE__」を記述：
/home/xxx/jin-test.com/public_html/wp-content/themes/cocoon-child-master/functions.php
また以下のように
スタイルシートの test.css がフォルダー「test-css」の中にある場合。
親テーマフォルダー
├ images
├ css
├ plugins
├ test-plugin
├ test-plugin.php
├ test-css
├ test.css
├ index.php
├ functions.php ├ ・・・・・
CSSファイルのパスが違うだけなので、上の例と異なる点は以下のみ。
|
1 2 3 4 5 6 |
// スタイルシートの登録 // 'test_css_id': ワードプレスに登録するスタイルシートの個別ID function register_styles() { wp_register_style( 'test_css_id', plugins_url('/test-css/test.css', __FILE__ ) ); } add_action( 'admin_enqueue_scripts', 'register_styles' ); |
plugins_url()の中で、'/test-css/test.css' となっているのが違うだけになりますね。
具定例）
自作関数の設定画面にCSSを読み込む
自作の関数の場合も基本同じで、CSSファイルの指定が異なるだけ。
テーマフォルダー
├ images
├ css
├ plugins
├ index.php
├ functions.php
├ test-func.php
├ test-func.css
├ ・・・・・
まずこのようにテーマフォルダーの直下に「test-func.css」がある場合を考えてみると、以下のようになりますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?php // スタイルシートの登録 // test_css_id: ワードプレスに登録するスタイルシートの個別ID function register_styles() { wp_register_style( test_css_id, get_theme_file_uri( 'test-func.css' ) ); } add_action( 'admin_enqueue_scripts', 'register_styles' ); // スタイルシートの読み込み // register_styles()で設定した test_css_id を指定して読み込む function load_test_styles() { wp_enqueue_style( test_css_id ); } // // 以下Settings APIを使った設定画面 // // メニュー登録 add_action( 'admin_menu', 'test_menu' ); // メニュー内容 function test_menu(){ $page_hook = add_options_page( 'ページタイトル', 'メニュー名', 'manage_options', // メニューが表示されるユーザー権限 'menu-slug', 'setting_func' //設定画面表示の関数 ); add_action( 'admin_print_styles-'.$page_hook , 'load_test_styles'); } // function setting_func(){ ?> (省略) <?php }; ?> |
5行目でCSSファイルをワードプレスに登録し、
その登録したCSSファイルを31行目で個別ページのフックで読み込む。
5行目ではCSSファイル（test-func.css）のパスを得るために、
get_template_directory_uri()（親テーマノパスを取得）や get_stylesheet_directory_uri()（子テーマのパスを取得）を使うのではなく、親テーマ子テーマ共通で使える便利なget_theme_file_uri()を使ってます。
get_theme_file_uri() について詳しくは以下
親テーマ子テーマのパス（URL）取得！共通で使える関数は？
読み込みたいCSSファイルの場所が変わればパスを変えるだけ。
例えば以下のようにテーマフォルダーの下に「myfunc」というフォルダーがあり、その中に読み込みたいCSSファイル（test-func.css）がある場合。
テーマフォルダー
├ images
├ css
├ plugins
├ myfunc
├ test-func.php
├ test-func.css
├ index.php
├ functions.php
├ ・・・・・
CSSファイルの場所が変わっただけなので、１つ上の例の5行目のみの変更でOK.
|
1 2 3 4 5 6 7 |
<?php // スタイルシートの登録 // test_css_id: ワードプレスに登録するスタイルシートの個別ID function register_styles() { wp_register_style( test_css_id, get_theme_file_uri( '/myfunc/test-func.css' ) ); } add_action( 'admin_enqueue_scripts', 'register_styles' ); |
以下のように「myfunc」の中に「test-css」というフォルダーがあり、
その中にある「test-func.css」を読み込む場合。
テーマフォルダー
├ images
├ css
├ plugins
├ myfunc
├ test-func.php
├ test-css
├ test-func.css
├ index.php
├ functions.php ├ ・・・・・
この場合も単にCSSファイルのパスを以下のよう変えればよいですね。
|
1 2 3 4 5 6 7 |
<?php // スタイルシートの登録 // test_css_id: ワードプレスに登録するスタイルシートの個別ID function register_styles() { wp_register_style( test_css_id, get_theme_file_uri( '/myfunc/test-css/test-func.css' ) ); } add_action( 'admin_enqueue_scripts', 'register_styles' ); |
ポイントまとめ
CSSファイルを自作プラグインの設定画面、自作関数の設定画面に読み込むには以下を使う。
- １）wp_register_style()でCSSファイルをワードプレスに登録する
（管理画面の場合には、admin_enqueue_scripts フックを使う） - ２）登録したCSSファイルは、wp_enqueue_style()を使って個別画面に追加する
（そのページのヘッダに CSSファイル追加用のリンクタグが挿入される） - ３）個別ページへのCSSファイルの追加では、
「’admin_print_styles-‘.$page_hook」フックを使って２）のwp_enqueue_style()を実行する - ４）ページフック（$page_hook）は add_options_page()の返り値としてゲットできる
分かってみればなんてことはないんですが、
分かるようになるまでが一苦労ですね。^-^;）
ネットビジネスに興味がある、ブログの収益化をしてみたい、という場合には、以下のメルマガにも登録してみてくださいね。
