WordPressで自作プラグイン独自のCSSを読み込ませたい

前回作成したプラグインで、一つ気になるのは、スタイルシートをテーマの追加CSSに記述していることです。

これは、テーマを変更する度に忘れずにCSSを貼ってスタイルを設定しなくてはいけないのか？という心配がつきまといます。

これをなんとか、プラグイン自身で保持できないかどうか調べてみました。

wp_enqueue_styleを使えば良い

いろいろ調べていくと、wp_enqueue_styleやwp_enqueue_scriptを使えば良いみたいなことがわかりました。がしかし、一つ気になる点が出てきました。

CSSファイルは、このプラグインファイルの有るディレクトリに、サブディレクトリcssを作ってその中に入れるということでいいとして、そのCSSファイルへのパスはどのようにして出すのか、ということです。

自サイトだけであれば、決め打ちでプラグインの中でハードコーディングしてしまえばいいでしょうが、自サイトだけでなく他のサイトでも使えるようにする可能性が万が一にもあれば、このあたりはよく考えないと・・という強迫観念に襲われます。

あちこちぐぐってみた結果、stack overflowのWordPress load a stylesheet through pluginに答えがありました。

実際にプラグインのphpファイルに追記した部分は以下の通り。

function regist_faimbox_styles() {
    $plugin_url = plugin_dir_url( __FILE__ );
    wp_enqueue_style('faimbox_style', $plugin_url . 'css/faimbox.css' );
}

add_action( 'wp_enqueue_scripts', 'regist_faimbox_styles' );

plugin_dir_url

plugin_dir_url( string $file )

パラメータで渡されたプラグインファイルのディレクトリを、URLのディレクトリで返す関数（末尾にスラッシュが付きます）。

__FILE__は、そのプラグイン自身を指す定数。

wp_enqueue_style

wp_enqueue_style( $handle, $src, $deps, $ver, $media )

パラメータ

WordPress Codex 日本語版によると以下の通り。

$handle

(必須)ハンドル名

$src

(オプション)スタイルシートのURL

$deps

(オプション)このスタイルシートが読み込まれる前に読まれて置く必要のあるスタイルシートがあれば、そのハンドル名を配列として渡す。

$ver

(オプション)バージョン文字列。指定しないと、Wordpressのバージョン番号がクエリストリングとして付与されます。

$media

(オプション)スタイルシートが定義されているメディアを指定。

ここでは、$handleに任意のハンドル名と、$srcにスタイルシートのURLを渡し、add_action()でアクションのフックと、先の関数(tegist_faimbox_click)を紐付ければOKです。