SettingsAPIを使って自作プラグインや独自の設定画面にCSSを反映する場合、その設定画面だけにCSSを読み込む方法をまとめてます。

ポイントはwp_register_style()を実行する時に使うフック。
(wp_enqueue_scripts か admin_enqueue_scripts か)

ここを押さえてないと、あれ?フックされないぞ、CSSが読み込まれない、とネットの海をさまようことになり結構大変。^-^;)

⇒「Settings APIの使い方まとめ」に戻る

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タグが挿入されます。

注意が必要なのは、フロントエンド(ユーザーが見る画面)と、設定など管理画面(バックエンド)ではwp_register_style() の呼び出し方(フック)が異なること。

フロントエンドでは wp_enqueue_scripts フックを使う。

関数リファレンス:wp_enqueue_scripts(英語)

バックエンドでは admin_enqueue_scripts フックを使う。

関数リファレンス:admin_enqueue_scripts(英語)

ここを間違うと、なぜかCSSが読み込まれない、フックしない...
と延々と悩むことになる。(私のように 笑)

個別ページにCSSを読み込む

ワードプレスの管理画面内に作る個別の設定画面にCSSを読み込ませるには、wp_register_style() で登録したCSSファイルを 個別ページ用のコードの中でwp_enqueue_style()を使って呼び出せばOK。

Settings APIを使った設定画面の基本形は以下のようになると思いますが...

ここにCSSファイルの読み込むを入れると、以下のような感じになりますね。

wp_register_style(5行目~8行目)

管理画面なのでadmin_enqueue_scriptsフックで呼び出し、
wp_register_style()でスタイルシートのURL($src)を「あるID」($handle)としてまずはワードプレスに登録。

wp_enqueue_style(12行目~14行目)

上でワードプレスに登録した $handle(に対するスタイルシート)wp_enqueue_style()によって実際のページに追加する。

これでCSSファイルの読み込みができますが、
個別のページにCSSファイルを追加する場合には、その個別ページが呼び出される時にこのwp_enqueue_style()が実行されるようにすれば良いですね。

admin_print_styles(25行目と32行目)

フックの「’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行目の以下。

ここで 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
├ ・・・・・

5行目では $handle を「test_css_id」とかにして、
$src をplugin_url()や マジック定数の __FILE__ を使ってるのが異なるのみ。

12行目は、5行目で指定した $handle(test_css_id)に変えた。

plugin_url, __FILE__ について詳しく

plugin_url() は、プラグインフォルダまでのパスを返し、
plugin_url( ‘URLを得たいファイル(のパス)’, パスの起点とする親ディレクトリー)
という形で、CSSファイルのURLが得られます。

関数リファレンス/plugins url(ワードプレス公式)

__FILE__ はマジック定数と呼ばれるもので、実行されているファイルのフルパスが入っている定数。

マジック定数(PHPマニュアル)

具体的にどんな文字列が入っているのか調べてみると
以下のようなものが入ってます。
(テーマは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ファイルのパスが違うだけなので、上の例と異なる点は以下のみ。

plugins_url()の中で、’/test-css/test.css’ となっているのが違うだけになりますね。

具定例)
自作関数の設定画面にCSSを読み込む

自作の関数の場合も基本同じで、CSSファイルの指定が異なるだけ。

テーマフォルダー
images
css
plugins
├ index.php
├ functions.php
test-func.php
test-func.css
├ ・・・・・

まずこのようにテーマフォルダーの直下に「test-func.css」がある場合を考えてみると、以下のようになりますね。

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ファイルの場所が変わっただけなので、1つ上の例の5行目のみの変更でOK.

以下のように「myfunc」の中に「test-css」というフォルダーがあり、
その中にある「test-func.css」を読み込む場合。

テーマフォルダー
images
css
plugins
myfunc
  ├ test-func.php
  ├ test-css
    ├ test-func.css
├ index.php
├ functions.php ├ ・・・・・

この場合も単にCSSファイルのパスを以下のよう変えればよいですね。

⇒「Settings APIの使い方まとめ」に戻る

ポイントまとめ

CSSファイルを自作プラグインの設定画面、自作関数の設定画面に読み込むには以下を使う。

  • 1)wp_register_style()でCSSファイルをワードプレスに登録する
    (管理画面の場合には、admin_enqueue_scripts フックを使う)
  • 2)登録したCSSファイルは、wp_enqueue_style()を使って個別画面に追加する
    (そのページのヘッダに CSSファイル追加用のリンクタグが挿入される)
  • 3)個別ページへのCSSファイルの追加では、
    「’admin_print_styles-‘.$page_hook」フックを使って2)のwp_enqueue_style()を実行する
  • 4)ページフック($page_hook)は add_options_page()の返り値としてゲットできる

分かってみればなんてことはないんですが、
分かるようになるまでが一苦労ですね。^-^;)

ネットビジネスに興味がある、ブログの収益化をしてみたい、という場合には、以下のメルマガにも登録してみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短で月収10万円稼げるようになる方法 ~

お名前(全角文字)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる!