Simplicityでページごとにスキン表示を操るカスタマイズ方法

Simplicity2.5.6から子テーマのfunctions.phpからget_skin_file関数をオーバーライド(上書き)すれば、ある程度自由にスキン表示をカスタマイズ出来るように仕様変更しました。

当ページも、今回実装された仕様を利用して、SKY POPスキンが適用されています。
スポンサーリンク

スキン表示を制御する方法

古いSimplicityを使用している場合は、まずv2.5.9以降にアップデートしてください。

あとは、子テーマのfunctions.phpに以下のように記述すれば、特定のページに対してのみスキンを適用することが可能です。

function get_skin_file(){
  //特定の投稿でスキンを指定する(style.cssのURLを指定)
  if (is_single( 100, 777 )) {//投稿IDを指定する
    return 'https://wp-simplicity.com/wp-content/themes/simplicity2/skins/sky-pop/style.css';
  } else {//それ以外はカスタマイザーで選択したスキン
    return get_selected_skin_file();
  }
}

上記コードは、Simplicity2.5.9以降で利用する必要があります。

スキンファイルのURLは、テーマカスタマイザーのスキン項目でスキンを適用し、ソースコードなどを表示して確認してください。

返り値には必ずスキンのstyle.cssへのURLを記述してください。返り値に、nullもしくは、falseが返るとスキンが適用されない仕様になっています。

使用例

例えば、当サイトではいろいろなスキンを紹介しています。

それぞれのページに対して、スキンを適用させるのに、以下のようなコードを子テーマのfunctions.phpに記入してみました。

function get_skin_file(){
  //特定の投稿でスキンを指定する(style.cssのURLを指定)
  if (is_single('flower-pop')) {//投稿スラッグでも可
    return 'https://wp-simplicity.com/wp-content/themes/simplicity2/skins/flower-pop/style.css';
  } elseif (is_single('simple-black')) {
    return 'https://wp-simplicity.com/wp-content/themes/simplicity2/skins/simple-black/style.css';
  } elseif (is_single('gingham-check')) {
    return 'https://wp-simplicity.com/wp-content/themes/simplicity2/skins/gingham-clean/style.css';
  } elseif (is_single('uc-mod')) {
    return 'https://wp-simplicity.com/wp-content/themes/simplicity-child2-simplicity/skins/uc-mod/style.css';
  } elseif (is_single('simple-ultramarine')) {
    return 'https://wp-simplicity.com/wp-content/themes/simplicity-child2-simplicity/skins/simple-ultramarine/style.css';
  } elseif (is_single('get_skin_file')) {
    return 'https://wp-simplicity.com/wp-content/themes/simplicity2/skins/sky-pop/style.css';
  } else {//それ以外はカスタマイザーで選択したスキン
    return get_selected_skin_file();
  }
}

上記コードは、Simplicity2.5.9以降で利用する必要があります。

is_single関数の引数には、スラッグを適用してもOKです。投稿IDよりこっちの方がわかりやすいかもしれません。

すると、それぞれのスキン紹介ページに対して、紹介してるスキンが適用されて表示されます。

今回は、第0版を運営されているとみーさんが作成されたスキン「Flower Pop」の紹介です。 Simplicityの最新版である2.1安...
今回は、NEKO LIFEを運営されているアオイ(ΦωΦ)さんが作成されたスキン「SIMPLE BLACK」の紹介です。 見た目は、こんな...
Simplicityのスキンが3種類も公開されていたので紹介です。 今回紹介するスキンは、RYUS blogのumoto mikaさんが、...
今回は、unlimited ch@osを運営されているch@osさんが作成されたスキン「uc-mod」の紹介です。 見た目は、以下のような...
Photo credit: Nick Kenrick. Simplicityのスキンを見つけたので紹介です。 今回紹介するス...

もちろん、トップページは何もスキンが適用されていない状態です。

条件分岐で、is_category関数や、is_tag関数などを利用すれば、カテゴリやタグに対してスキンを適用することも可能かと思います。

当然、フロントページのみに、スキンを適用させるなんてことも可能です。

まとめ

今回、フォーラムに要望をいただいたおかげで、面白い実装をすることができました。

ページごとに違うスキンが適用出来ると面白そうだな〜とか思ってます。
例えば、ある固定ページにあるスキンを適用できると、ひとつのサイトでスキンを適用した状態を紹介出来たりするので、良いんじゃないかな〜なんて。

このカスタマイズ方法を応用すれば、以下のような使い方をすることも可能かと思います(有用かどうかはまた別として)。

  • in_category関数を用いて、カテゴリごとにスキンを変更する
  • コンバージョンページ用のスキンを適用する
  • 時間帯によってスキンを変更する

是非、面白いスキンの使い方などを考えてみていただければ幸いです。

スポンサーリンク