先日、自作のWordpressテーマにスキン機能を実装したのでその方法を紹介です。
スキン機能というのは、テーマカスタマイザーから、オプションを選択するだけで、あらかじめ用意されているスタイルシートを呼び出して手軽にテーマの外観を変更する機能です。
とは言っても、Wordpressテーマ自体がスキン機能みたいなもんなので、あまり意味がないと言えば意味がないカスタマイズなんですが、思いのほか手軽にできたので紹介です。
目次
スキン機能のメリット・デメリット
スキンとテーマを比較して、外観を変更するという機能に変わりはないのですが、その中でも使用する利点と難点です。
メリット
- テーマカスタマイザーから設定変更気分で手軽に選べる
- テーマが変わるわけではないので、ウィジェット、メニューなどの設定を再設定する必要はない
- 同じテーマの場合、他の人が作ったスキンでもフォルダに放り込むだけで利用できる
デメリット
- スタイルシート(CSS)のみしか変更できない
- テンプレートのカスタマイズはできない
- テーマとスキン機能が似たようなものなのでややこしい
そこまでの利点もないかもしれませんが、たまにはこんなカスタマイズも暇な時に試すと楽しいかもしれません;
スキンフォルダの準備
まずは、テーマフォルダ(子テーマフォルダ)内に以下のような階層のファイル構造を作ります。
- skins(スキン用のフォルダ)
- skin-name(スキンフォルダ名、半角英数字と-_からなる名前なら何でも良い)
- images(イメージ用フォルダ)
- style.css(全体のスタイル設定用)
- mobile.css(モバイルのスタイル設定用)
- other-skin1
- other-skin2
- …(フォルダ名が違えば何個でも追加可能)
- skin-name(スキンフォルダ名、半角英数字と-_からなる名前なら何でも良い)
ただ、作るのは面倒くさいと思うのでファイル構造の出来上がったサンプルフォルダを作ってみました。以下からダウンロードできます。
[wpdm_file id=4]
これを解凍をして使っているテーマ(子テーマ)のフォルダ直下にコピペします。
新しいスキンの追加方法
新しく、スキンを追加する場合は、skin-nameなどのフォルダをコピペして新たにフォルダを作り、フォルダ名を好きなものに変更します。
その後、作成したフォルダ内のstyle.cssを開いて、以下の部分の名前を変更します。
/* Name: スキンテンプレート名前 Priority: 1000 */
それぞれの設定項目についてはこんな感じです。
- Name:スキン名を入力する。(必須)
- Priority:優先度(順番)を入力する。テーマカスタマイザーでの表示順。0が最も優先度が高い。
functions.phpの編集
テーマ(子テーマ)フォルダを開いてfunctions.phpに以下を追記します。
//スキンファイルリストの並べ替え用の関数 function skin_files_comp($a, $b) { //優先度(priority)で比較する if ($a['priority'] == $b['priority']) { return 0; } return ($a['priority'] < $b['priority']) ? -1 : 1; } //スキンとなるファイルの取得 function get_skin_files(){ $dir = dirname(__FILE__) . '/skins/';//skinsフォルダ内を検索 $iterator = new RecursiveIteratorIterator( new RecursiveDirectoryIterator( $dir, FilesystemIterator::SKIP_DOTS |FilesystemIterator::KEY_AS_PATHNAME |FilesystemIterator::CURRENT_AS_FILEINFO ), RecursiveIteratorIterator::LEAVES_ONLY ); $results = array(); foreach($iterator as $pathname => $info){ $pathname = str_replace('\\', '/', $pathname); $this_dir = str_replace('\\', '/', dirname(__FILE__)); if (preg_match('/([a-zA-Z\-_]+).style\.css$/i', $pathname, $matches)){//フォルダ名の正規表現が[a-zA-Z\-_]+のとき $dir_name = $matches[1]; $css = file_get_contents($pathname);//CSSファイルを開く if (preg_match('/Name: *(.+)/i', $css, $matches)) {//CSSファイルの中にName:の記述があるとき if (preg_match('/Priority: *(.+)/i', $css, $m)) {//優先度(順番)が設定されている場合は順番取得 $priority = intval($m[1]); } else { $priority = 9999; } //返り値の設定 $results[] = array( 'name' => $matches[1], 'dir' => $dir_name, 'priority' => $priority, 'path' => str_replace($this_dir, get_stylesheet_directory_uri(), $pathname), //親テーマをカスタマイズする時はこちらを使う //'path' => str_replace($this_dir, get_template_directory_uri(), $pathname), ); } } } uasort($results, 'skin_files_comp');//スキンを優先度順に並び替え return $results; } //テーマカスタマイザーの設定 add_action( 'customize_register', 'my_theme_customize_register' ); function my_theme_customize_register($wp_customize) { //スキン設定項目の追加 $wp_customize->add_section( 'skin_section', array( 'title' =>'スキンの設定', 'priority' => 88, )); //スキンの種類 $wp_customize->add_setting('skin_options[skin_file]', array( 'default' => '',//デフォルト値 'type' => 'option', )); $skins = get_skin_files();//スキンファイル情報の取得 $radio_items = array( '' => '選択しない(デフォルト)',//デフォルト値 ); foreach ($skins as $skin) { $radio_items += array($skin['path'] => $skin['name']); } $wp_customize->add_control( 'skin_file_radio', array( 'settings' => 'skin_options[skin_file]', 'label' =>'スキン選択(色指定などが優先)', 'section' => 'skin_section', 'type' => 'radio', 'choices' => $radio_items, 'priority' => 10, //優先度(並び順) )); } //スキンファイルを取得 //スキンファイルを設定している場合はスタイルシート名(パス/style.css)を返す //設定していない場合は偽(空文字)を返す function get_skin_file(){ $o = get_option('skin_options'); return $o['skin_file']; }
skin_files_comp()は、スキンファイルデータを格納した配列を並び替える用の関数です。
get_skin_files()は、skinsフォルダ内のスキンファイルデータを格納した配列を返します。
以下の部分は、親テーマを直接カスタマイズする場合は、コメント部分を使用してください。
'path' => str_replace($this_dir, get_stylesheet_directory_uri(), $pathname), //親テーマをカスタマイズする時はこちらを使う //'path' => str_replace($this_dir, get_template_directory_uri(), $pathname),
my_theme_customize_register()は、テーマカスタマイザーに設定項目を追加する関数です。
get_skin_file()は、テーマカスタマイザーで設定した値(スキンのstyle.cssのパス)を取得する関数です。
header.phpの編集
header.phpの<head></head>内に以下を挿入します。
<?php if ( get_skin_file() ): //設定されたスキンがある場合?> <link rel="stylesheet" href="<?php echo get_skin_file(); ?>"> <?php endif; ?> <?php if (wp_is_mobile()): //モバイル?> <?php if ( get_skin_file() ): //設定されたスキンがある場合モバイルのスタイルシートを呼び出す?> <link rel="stylesheet" href="<?php echo str_replace('style.css', 'mobile.css', get_skin_file()); ?>"> <?php endif; ?> <?php endif; ?>
get_skin_file()は、スキンが設定されている場合は、「スキンのstyle.cssのパス」が返されます。設定されていない場合は、空文字(偽)が返ります。
動作確認
ここで動作確認をします。
WordPress管理画面から「外観→カスタマイズ」へ移動します。すると、「スキンの設定」という項目が追加されていると思います。
上にあるサンプルスキンフォルダをダウンロードした場合は、以下のようになります。
背景がクリーム色のスキンを選択して「保存して公開」ボタンを押すと指定したスキンが適用されます。
まとめ
これで、スキンフォルダの準備を除けば、2回のコピペでスキン機能を実装することができるようになります。
ただ、使いどころがあるかどうかはまた別の話です。けれど、この方法を応用すればテーマカスタマイザーで設定ファイルを読み込んで、その設定情報からテーマを変更するなんてこともできるようになると思います。