styleswitcher＊複数のテーマをトップページから変更

WordPressには、ThemeSwitcherというプラグインがあり、このプラグインを入れると、管理画面からわざわざスタイルを変更せずに済みます。

ただ、１つ問題なのは、配布されているテーマの場合は問題ないと思いますが、自分で作成したテーマの場合、CSSで1つのテーマから複数のスタイルを変更することによって作成できるのに、上記のプラグインを使うとわざわざフォルダを作ってファイルもコピーしなければならないことです。

ここでは、1つのテーマフォルダの中に複数のスタイルシートを入れることによって、テーマフォルダ１つでスタイルを変更できる方法を書いていきたいと思います。
※プラグインではありません。
※MovableTypeを使用していた経験がある人の場合、知っているかもしれません(*´∇｀*)

1.

フォルダ構成

１つのテーマフォルダを元に複数のスタイルシートを作成する。

スタイルシートで使用するイメージファイルなどは、他のスタイルシートで使用しているファイルと区別をつけるために、分けておくと良い。

例：

theme–default–style.css
　　　　　　　　
　　　　　　　　　　└style-ver1.css
　　　　　　　　
　　　　　　　　　　└style-ver2.css
　　　　　　　　
　　　　　　　　　　└style-ver3.css
　　　　　　　　
　　　　　　　　　　 └ver1（style-ver1.cssのイメージ用フォルダ）
　　　　　　　　
　　　　　　　　　　└ver2（style-ver2.cssのイメージ用フォルダ）
　　　　　　　　
　　　　　　　　　　└ver3（style-ver3.cssのイメージ用フォルダ）
　　　　　　　　
　　　　　　　　　　 └index.php
　　　　　　　　
　　　　　　　　　　 └header.php
　　　　　　　　
　　　　　　　　　　└footer.php
　　　　　　　　
　　　　　　　　　　└以下略（他必要なファイルです。）

2.

styleswitcher.jsをダウンロードする。

A List Apart様のサイトからstyleswitcher.jsをダウンロードする。
ダウンロードファイルは、かなり下のほうにあります。
リンクにマウスオーバーを当てて、右クリックし、名前を付けてリンク先を保存してください。
ファイルは、テーマファイルの直下に入れてください。
デフォルトのテーマの場合：defaultのフォルダの中へ。

3.

header.phpを編集

header.phpを開き、ファイルを編集します。
まず、<head></head>の中に、

<script language=”JavaScript” type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/styleswitcher.js” charset=”utf-8″></script>

を入れる。charsetはWordpressの環境に合わせること。
次に、作成した複数のスタイルシートを<head></head>の中にリンクする。

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/style.css” type=”text/css” title=”Ver1″ />
<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/style-ver2.css” type=”text/css” title=”Ver2″ />
<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/style-ver3.css” type=”text/css” title=”Ver3″ />

ここで、各スタイルシートに、上記のようにtitleを付けておく。

4.

sidebar.phpの編集。

sidebar.phpを開き、なるべく目立つところに、以下の内容を付け足す。

<a href=”#” onclick=”setActiveStyleSheet(‘Ver1′); return false;”>Style Ver.1</a>
<a href=”#” onclick=”setActiveStyleSheet(‘Ver2′); return false;”>Style Ver.2</a>
<a href=”#” onclick=”setActiveStyleSheet(‘Ver3′); return false;”>Style Ver.3</a>

ここで大事なことは、hearder.phpで編集した時の、それぞれのスタイルシートのリンクに挿入したtitle=
○○をsetActiveStyleSheet(‘○○’)と対応しておくこと。
またsidebar.phpの環境に合わせて編集しておくこと。
私の場合：

<li>
<h2 class=”side-header”>Style Change</h2>
<ul>
<li><a href=”#” onclick=”setActiveStyleSheet(‘Ver1′); return false;”>Style Ver.1</a></li>
<li><a href=”#” onclick=”setActiveStyleSheet(‘Ver2′); return false;”>Style Ver.2</a></li>
<li><a href=”#” onclick=”setActiveStyleSheet(‘Ver3′); return false;”>Style Ver.3</a></li>
</ul>
</li>

全て終えたら、保存する。