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

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

スキン機能というのは、テーマカスタマイザーから、オプションを選択するだけで、あらかじめ用意されているスタイルシートを呼び出して手軽にテーマの外観を変更する機能です。

とは言っても、Wordpressテーマ自体がスキン機能みたいなもんなので、あまり意味がないと言えば意味がないカスタマイズなんですが、思いのほか手軽にできたので紹介です。

スポンサーリンク
レクタングル(大)広告

スキン機能のメリット・デメリット

スキンとテーマを比較して、外観を変更するという機能に変わりはないのですが、その中でも使用する利点と難点です。

メリット

  • テーマカスタマイザーから設定変更気分で手軽に選べる
  • テーマが変わるわけではないので、ウイジェット、メニューなどの設定を再設定する必要はない
  • 同じテーマの場合、他の人が作ったスキンでもフォルダに放り込むだけで利用できる

デメリット

  • スタイルシート(CSS)のみしか変更できない
  • テンプレートのカスタマイズはできない
  • テーマとスキン機能が似たようなものなのでややこしい

そこまでの利点もないかもしれませんが、たまにはこんなカスタマイズも暇を時に試すと楽しいかもしれません;

スキンフォルダの準備

まずは、テーマフォルダ(子テーマフォルダ)内に以下のような階層のファイル構造を作ります。

  • skins(スキン用のフォルダ)
    • skin-name(スキンフォルダ名.半角英数字と-_からなる名前なら何でも良い)
      • images(イメージ用フォルダ)
      • style.css(全体のスタイル設定用)
      • mobile.css(モバイルのスタイル設定用)
    • other-skin1
    • other-skin2
    • …(フォルダ名が違えば何個でも追加可能)

ただ、作るのは面倒くさいと思うのでファイル構造の出来上がったサンプルフォルダを作ってみました。以下からダウンロードできます。

これを解凍をして使っているテーマ(子テーマ)のフォルダ直下にコピペします。

新しいスキンの追加方法

新しく、スキンを追加する場合は、skin-nameなどのフォルダをコピペして新たにフォルダを作り、フォルダ名を好きなものに変更します。

その後.作成したフォルダ内のstyle.cssを開いて、以下の部分の名前を変更します。

それぞれの設定項目についてはこんな感じです。

  • Name:スキン名を入力する。(必須)
  • Priority:優先度(順番)を入力する。テーマカスタマイザーでの表示順。0が最も優先度が高い。

functions.phpの編集

テーマ(子テーマ)フォルダを開いてfunctions.phpに位以下を追記します。

skin_files_comp()は、スキンファイルデータを格納した配列を並び替える用の関数です。

get_skin_files()は、skinsフォルダ内のスキンファイルデータを格納した配列を返します。

以下の部分は、親テーマを直接カスタマイズする場合は、コメント部分を使用してください。

my_theme_customize_register()は、テーマカスタマイザーに設定項目を追加する関数です。

get_skin_file()は、テーマカスタマイザーで設定した値(スキンのstyle.cssのパス)を取得する関数です。

header.phpの編集

header.phpの<head></head>内に以下を挿入します。

get_skin_file()は、スキンが設定されている場合は、「スキンのstyle.cssのパス」が返されます。設定されていない場合は、空文字(偽)が返ります。

動作確認

ここで動作確認をします。

WordPress管理画面から「外観→カスタマイズ」へ移動します。すると、「スキンの設定」という項目が追加されていると思います。

上にあるサンプルスキンフォルダをダウンロードした場合は、以下のようになります。

スキンの設定

背景がクリーム色のスキンを選択して「保存して公開」ボタンを押すと指定したスキンが適用されます。

スキンが適用された状態

まとめ

これで、スキンフォルダの準備を除けば、2回のコピペでスキン機能を実装することができるようになります。

ただ、使いどころがあるかどうかはまた別の話です。けれど、この方法を応用すればテーマカスタマイザーで設定ファイルを読み込んで、その設定情報からテーマを変更するなんてこともできるようになると思います。