マルチサイトでサイトごとにCSSを変えたい

先日のマルチサイト運営の続編になります。無事マルチサイト化したサイトの、テーマを作成するにあたって、今回以下のような構成にしました。

1. メインサイト−−−−テーマA
2. サブサイト1−−−−テーマB（メインカラー：緑）
3. サブサイト2−−−−テーマB（メインカラー：青）

サブサイトは、同一テーマでメインカラーが異なるだけ。つまり、CSSでサイトごとのカラーについてだけ変更したいケースです。この場合、考えられる一般的な方法としては、

1. bodyにサイトごとのクラス名を付与する
2. サイトごとに、サイト固有のCSSを読み込ませる

bodyにクラスを付与する

こちらは、他サイトからコードを頂戴しております。上記のケースでは、メインサイトでは使わないテーマなので、分岐は不要ですが、あったほうが便利なのでそのままです。

//bodyにマルチサイトのサイトクラス名を追加
function add_multisite_class( $classes ) {
    global $current_blog, $current_site;
    if ( is_multisite() ) {
        if ( is_main_site() ) {
            $classes[] = 'main-site';
        } else {
            if ( is_subdomain_install() ) {
                $slug = substr( $current_blog->domain, 0, strpos( $current_blog->domain, '.' ) );
            } else {
                $slug = trim( $current_blog->path, '/' );
            }
            $classes[] = 'site-' . $slug;
        }
    }
    return $classes;
}
add_filter( 'body_class', 'add_multisite_class' );

サイトごとに固有のCSSを読み込む

上記のソースを少しいじっただけです。これで、「site-○○.css」を読み込んでくれます。

//サイトごとのCSS読み込み
if(is_multisite()){
global $current_blog, $current_site;
$slug = trim( $current_blog->path, '/' );
wp_enqueue_style( 'siteCSS', $dir.'/assets/css/site-'.$slug.'.css' );
}