ワードプレスの自作プラグインにcssを追加する

ワードプレスの自作プラグインにそのプラグイン専用のcssを追加する場合について記載する。

CSSの配置場所

wp-content/plugins/[プラグインのフォルダ名]/css/[CSSのファイル名].css

上記のようになるようにプラグインフォルダに「css」というフォルダを作成しそこにスタイルシートを配置する。スタイルシート（拡張子css)のファイル名は好きに決めてよい。

また、スタイルシートは複数ファイルを追加することができる。

プラグインにcssを追加するコードを記述する。

以下のコードを自作プラグインに追加する。

function add_plugin_css() {
    $plugin_url = plugin_dir_url( __FILE__ );
		
    wp_enqueue_style( 'style_1', $plugin_url . 'css/style_1.css' );
    wp_enqueue_style( 'style_2', $plugin_url . 'css/style_2.css' );
}

add_action( 'wp_enqueue_scripts', 'add_plugin_css' );

※関数名「add_plugin_css」は好きなように変更してよい。
※スタイルシートを二つ（style_1.cssとstyle_2.css）追加する場合の例である。スタイルシート名は好きに変更してよい。
※wp_enqueue_style()関数の第一引数はタグのidとして出力されるのでこれも好きに変更してよい。
※スタイルシートを一つ追加するだけの場合は5行目の「wp_enqueue_style( ‘style_2’, $plugin_url . ‘css/style_2.css’ );」を削除すればよい。

プラグインをオブジェクト指向（クラス）で作っている場合

もしプラグインをクラス（Class）で作っているのであれば、先ほどの8行目のコード「add_action( ‘wp_enqueue_scripts’, ‘add_plugin_css’ );」のコードは関数「__construct()」内に以下のように変更して記述すればよい。

// __construct()関数に追加する
add_action( 'wp_enqueue_scripts', array(&$this, 'add_plugin_css') );

CSSにバージョンを追加する

関数wp_enqueue_style()の第四引数にcssバージョンを指定することができる。
例えば最終更新日付をバージョンとする場合は「function add_plugin_css()」関数を以下のコードとすればよい。

function add_plugin_css() {
    $plugin_url = plugin_dir_url( __FILE__ );
		
    $plugin_path = plugin_dir_path( __FILE__ );
		
    $style1_time =  date('Ymd', filemtime( $plugin_path . 'css/style_1.css' ));
    $style2_time =  date('Ymd', filemtime( $plugin_path . 'css/style_2.css' ));
		
    wp_enqueue_style( 'style_1', $plugin_url . 'css/style_1.css', array(), $style1_time );
    wp_enqueue_style( 'style_2', $plugin_url . 'css/style_2.css', array(), $style2_time );

こうすると以下の画像のようにcssにバージョンが付加されるので更新があった場合、ブラウザがキャッシュを使わずに再読み込みするようになる。

cssにバージョンを付加した時に出力されるHTML

タイトルとURLをコピーしました