「cocoon」でカテゴリ毎に違うスキンを適用する

「cocoon」には、豊富なスキンが同梱されています。

せっかく幾つもあるのだから、欲張って1つのサイトで複数のスキンを適用してみようと思いました。

今回は、カテゴリ毎に、和色ベースの「Fuwari和色」シリーズ4色「海老茶(えびちゃ)、海松茶(みるちゃ)、褐色(かちいろ)、御召茶(おめしちゃ)」を適用してみようと思います。（そのカテゴリに属する個別記事にも適用されます。）

スキンファイルのコピー

後々編集することもあるかもしれないので、子テーマを使用することにしました。

スキンのファイルは、親テーマの「skins」フォルダ内にあります。

この中から必要なスキンを、ftpソフトなどで子テーマの「skins」フォルダに丸ごとコピーします。

子テーマの方にコピーすると、管理画面「Cocoon設定」の「スキン」タブの一覧に以下のように追加されます。

カスタマイズが必要であれば、通常のカスタマイズと同様に、「外観」→「テーマの編集」から編集できます。

これまで使用していたstyle.cssのバックアップ

今まで自分でカスタマイズしていたstyle.cssがある場合はバックアップしておきます。

例えば、適当な名前のフォルダを作り、その中に該当の.cssファイルを入れます。このフォルダを子テーマの「skins」フォルダに移動させます。

こうすると、自分でカスタマイズしていたstyle.cssがスキンの様に使えます。

コード

カテゴリ毎にスキンを適用するために、以下のコードをfunction.phpに追記します。

ここでは、一例として

カテゴリID1,2　…海老茶
カテゴリID3　　…海松茶
カテゴリID4,5　…御召茶
それ以外　　　 …褐色

と指定してみます。

function get_skin_url() {
if( in_category( array( 1,2 ) ) ) {
return 'http://test.com/wp-content/themes/cocoon-child-master/skins/skin-fuwari-ebicha/style.css';
} elseif( in_category( array( 3 ) ) ) {
return 'http://test.com/wp-content/themes/cocoon-child-master/skins/skin-fuwari-mirucha/style.css';
} elseif( in_category( array( 4,5 ) ) ) {
return 'http://test.com/wp-content/themes/cocoon-child-master/skins/skin-fuwari-omeshicha/style.css';
}else {
return 'http://test.com/wp-content/themes/cocoon-child-master/skins/skin-fuwari-kachiiro/style.css';
}
}

「in_category」はカテゴリ指定で、数字はカテゴリIDです。

ここを「is_single」にすると、個別記事毎に違うスキンを適用できるかと思います。

URLはスキンの.cssファイルまでの絶対パスです。お使いの環境によって変わってきます。