Simplicityのスキン機能の仕様

Simplicity20140907からスキン機能を追加しました。

テーマ、子テーマ自体がスキン機能みたいなもんなのですが、ウイジェットやメニューの再設定を必要とせず、手軽に外観を変更できる機能として追加してみました。

あと、子テーマのダウンロード状況からみて、Simplicityを子テーマなどでカスタマイズせず、そのまま使っている人の方が多いと考えられます。そんなライトユーザーの方向けに、手軽に外観を変更できる機能を追加したくて作ってみました。

あと、カスタマイズなどスタイルを変更しないで同じテーマを使用していると、途中で飽きてしまうような気もしまして、インストールとかなしに手軽に変更できればと思いました。

ということで、「スキン機能」の紹介です。

追記:Simplicity1.3.3から子テーマでもスキン管理ができるようになりました。

スキンの設定方法

スキンの設定は、Wordpress管理画面から「外観→カスタマイズ→スキンの設定」から行えます。

Simplicityのスキン機能

当然独自にスキンを追加して外観(スタイル)を変更するなんてこともできるようになっています。

スキンとテーマ(子テーマ)の違い

スキン機能は、主にSimplicityライトユーザー向けの外観変更機能です。

主な違いは以下です。

スキン機能

  • テーマカスタマイザーから変更する(ウイジェット・メニューなどを再設定せずに外観を手軽に変更できる)
  • Simplicity(親テーマ)のみをインストールすれば使用できる
  • スタイルシートでの外観変更
  • JavaScriptも利用可能
  • 主にスタイルシートでの変更なので比較的容易
  • 外観のみの変更限定

テーマ(子テーマ)

  • 「外観→テーマ」から変更する
  • Simplicity(親テーマ)とともに子テーマもインストールする必要がある
  • テンプレートを直接カスタマイズして変更できる
  • テンプレートをカスタマイズするときはPHPの知識が必要な時もある
  • 当然PHPをいじれるのでやれることが豊富、動作も変更できる

スキン機能のフォルダ構造

スキン機能に関するファイルは、Simplicityテーマフォルダ内の「skins」フォルダに格納されています。

「skins」フォルダのファイルの構造は以下のようになっています。

  • skins(スキン用のフォルダ)
    • skin-name(スキンフォルダ名.半角英数字と-_からなる名前なら何でも良い)
      • images(イメージ用フォルダ)
      • style.css(全体のスタイル設定用)
      • mobile.css(モバイルのスタイル設定用)
      • amp.css(AMPページ用のスタイル設定用)
      • javascript.js(JSコードを書く。ファイルがない場合は読み込まれない)
    • other-skin1
    • other-skin2
    • …(フォルダ名が違えば何個でも追加可能)

スキンを追加する方法

新たにスキンを追加する方法は、次の2手順です。

  1. skinsフォルダ内のskin-templateフォルダを複製して新たなフォルダ名をつける
  2. 新たなフォルダの中のstyle.cssファイルを開いてスキン名を変更

これだけでOKです。

style.cssの先頭部分は以下のようになっているのでName:以降を変更します。

/*
  Name: 好きな名前に変更
  Priority: 1000
*/

Priority:は、テーマカスタマイザーで表示される表示順です。優先度を設定します。0にすると一番先頭に表示されます。ただし、Priority:は特に設定しなくてもOKです。

スキンテンプレートのダウンロード

スキンテンプレートは、以下からもダウンロードできます。

スタイルの優先度

スキン機能のスタイルが呼び出される順番は以下のようになっています。

  1. Simplicity(親テーマ)のstyle.css
  2. Simplicity(親テーマ)のmobile.css (responsive.css)
  3. スキンのstyle.css
  4. スキンのmobile.css
  5. テーマカスタマイザーで変更したスタイル
  6. 子テーマのstyle.css
  7. 子テーマのmobile.css  (responsive.css)

スタイルシートは、同じセレクタなら後から呼び出されたもの、HTML内で指定されているものが優先されるので、1が最も優先度が低く、7が1番優先度が高くなります。

上記以外に、「margin: 0 !important;」のように!important宣言を行えば、それが最も優先されます。

子テーマのfunctions.phpのスキン関数について

子テーマ(無印)のfunctions.phpに以下のような関数を追加しました。

// 親skins の取得有無の設定
function include_parent_skins(){
  return true; //親skinsを含める場合はtrue、含めない場合はfalse
}

このinclude_parent_skins()関数について説明します。

子テーマを設定した状態で、この関数の返り値をtrueにしていると、カスタマイザーのスキン設定で親テーマを含めたリストが表示されます。

親テーマを含めたスキン一覧

返り値を、falseにしていると、カスタマイザーのスキン一覧には子テーマのものしか表示されません。

子テーマのみのスキン一覧

スキン機能の使い道

スキン機能の主な目的は、ライトユーザー向けの手軽な外観変更機能です。

しかし、新たなスキン作成が容易なので、「これから子テーマでカスタマイズする前の実験的スタイル変更」などにも便利です。

まず、スキン機能で実験的にあらかたスタイルシートの設定を行って、そのスタイルシートテキストを子テーマにコピペして実装するなんて使い方もできます。

また、「デザインの違いによる広告収益の違いテスト」、「マルチサイトのデザインを1つの子テーマで管理」みたいなことも簡単にできるようになります。

その他にも、他の人が作ったスキンでもskinフォルダにアップロードするだけで利用できるようになります。(当然親テーマはSimplicityである必要がある)

スキン機能は、テーマと似たようなものかもしれません。けれど使い方次第でSimplicityの管理がより楽になります。

実装方法

詳しい実装方法については、以下に書いてあります。

WordPressテーマにスキン機能を実装するカスタマイズ方法

Ptengine
初心者でも見やすいアクセス解析「Ptengine」。無料から使えて、Simplicityから手軽に設定することも可能です。
スポンサーリンク
アドセンス(大)
アドセンス(大)

Simplicityのスキン機能の仕様
最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク
アドセンス(大)