wordpressテーマにCSSを追加する方法（通常画面や管理画面に）

良く忘れるのでメモ。

この例は「親テーマ」の場合。子テーマの場合は、4行目と5行目を変更sるう必要がある。（記事「wordpressテンプレートでホームURLとかテーマURLを表示する方法」の「子テーマの場合」を参照。）

テーマフォルダ内の functions.php 内に書く。wp_enqueue_style() 関数のバージョン項目のところに、ファイルの最終更新日時を追加するようにしているので、更新した場合には最新のCSSが適用されるし、更新しない場合にはキャッシュが聞いて効率が良いよね、っていう風にしています。

// 使い回せるようにグローバル変数を定義。
define('THEME_ID', 'hogehoge'); 
define('THEME_PATH', get_template_directory()); // 親テーマへのパス。末尾のスラッシュ無し。
define('THEME_URI', get_template_directory_uri()); // 親テーマへのURL。末尾のスラッシュ無し。

/* ------------------------------------------------------------ */

// 通常画面にCSS追加。
function theme_wp_enqueue_scripts()
{
    wp_enqueue_style(THEME_ID . '-sub', THEME_URI . '/css/sub.css', array(), date('Y-m-d_H-i-s', filemtime(THEME_PATH . '/css/sub.css')));
}
add_action('wp_enqueue_scripts', 'theme_wp_enqueue_scripts');

// 管理画面にCSS追加。
function theme_admin_enqueue_scripts()
{
    wp_enqueue_style(THEME_ID . '-admin', THEME_URI . '/css/admin.css', array(), date('Y-m-d_H-i-s', filemtime(THEME_PATH . '/css/admin.css')));
}
add_action('admin_enqueue_scripts', 'theme_admin_enqueue_scripts');

通常画面（フロントエンド側）にCSSを追加するのにはアクションフック「wp_enqueue_scripts」、管理画面（バックエンド側）にCSSを追加するときにはアクションフック「admin_enqueue_scripts」を使います。

それぞれのアクションフックに関数を割り当てて、その関数内でCSSを読み込むようにします。

それ以外の方法でも一応CSSを読み込めるのですがこの方法を使うとCSSの依存関係や読み込みタイミングを調整できるので便利です。