Simplicityのスキン機能の仕様

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

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

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

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

ということで、洋服を着替えるような感覚で見た目を変更できる「スキン機能」の紹介です。

スキンの設定方法

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

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

スキンとテーマ（子テーマ）の違い

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

主な違いは以下です。

スキン機能

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

テーマ（子テーマ）

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

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

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

「skins」フォルダのファイルの構造は以下のようになっています（v2.5.3時点）。

スキンを追加する方法

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

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

これだけでOKです。

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

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

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

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

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

[wpdm_file id=8]

スタイルの優先度

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

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

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

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

スクリプトの優先度

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

1. Simplicity（親テーマ）のjavascript.js
2. 親テーマスキンのjavascript.js
3. 子テーマのjavascript.js
4. 子テーマスキンのjavascript.js

スキンのjavascript.jsを利用するかどうかは任意です。JavaScript（jQuery）を使用したい場合に利用してください。

javascript.jsが存在しないときは、スルーされるので無くても問題ないです。

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

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

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

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

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

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

スキン機能の使い道

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

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

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

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

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

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

実装方法

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

WordPressテーマにスキン機能を実装する、あまり意味がないっちゃー意味がないカスタマイズ方法

先日、自作のWordpressテーマにスキン機能を実装したのでその方法を紹介です。 スキン機能というのは、テー…

nelog.jp

※Simplicity初期時の実装方法です。今では、様々な変更が加えられています。