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関数を用いて、カテゴリごとにスキンを変更する
  • コンバージョンページ用のスキンを適用する
  • 時間帯によってスキンを変更する

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

GitHubリポジトリ

不具合等ありましたらGitHubに、ご連絡いただけると幸いです。

yhira/simplicity2

スポンサーリンク
アドセンス(大)
アドセンス(大)

フォローする

スポンサーリンク
アドセンス(大)

コメント

  1. marine より:

    わいひら さま

    バージョンアップに取り入れていただいたのですね。
    ありがとうございます。

    当方のもやっとした要望をサクッと実装されるなんて、本当に素晴らしいです。
    しかも、素敵な記事まで作成されるなんて、流石です。

    あと、実装できたら良いな〜と思っている機能がありまして・・・

    記事のタグ欄に特殊なタグを入力したら、それで表示をコントロールするというものです。
    例えば、「@skin-m-tomato」というタグを入力すると、そのページにスキン「m-tomato」を適用するというものです。

    これは、MovableType で用いる方法なのですが、MTでは、@から始まるタグはシークレットタグといって、タグ一覧に表示されず、システム制御などに利用できるものとして利用されているんですよね。
    (わたし、MTタグは得意なんですけど、phpは全然判りません。)

    MTでは、テンプレート本体にif文を入れて制御するんですけど、Wordpress だったら、functions.phpに制御文を入れたら何とかならないかな〜って

    functions.phpにskinフォルダの位置を定義しておき、シークレットタグ「@skin-m-tomato」から m-tomato を抜き出して、合致するディレクトリ名がskin下にある場合、そこにある style.css を読み込むといった具合なんですが・・・

    phpは、まだ良く分かっていないので、これから勉強して頑張ってみたいと思います。

    • アバター画像 わいひら より:

      そういったタグでの制御は、WordpressでもPHPコードを書けば出来ないことはないような気がします。
      タグの出力をフックして@があれば、出力しない処理を書いて、あとは、入力したタグに応じた処理をPHPで書けばおそらく。
      実際にまだ試したことないので、断言はできないですけど^^;

  2. chan より:

    わいひらさん、すいません。
    フォーラムで質問を出しているスキン表示がやりたいですが、結論は出来ました!
    何故か、フォーラムで返信が出来ません。
    もう少し聞きたいことがあるのですが。

    試したパソコンは2台。IE、chrome、firefoxと試してみたのですがダメでした。
    締め切られているのでしょうか?