WordPress カスタムカラーズ 管理画面からサイトの配色を変えられるテーマの作成

WordPress カスタムヘッダーとカスタム背景 の応用編。

オリジナルのテーマオプションを作成して、サイトを動的に変更できるテーマを作成してみます。

題材として、管理画面から配色を設定すると、サイト全体の配色が変えられるテーマを作成してみました。

実装

順を追って説明していきます。

管理メニューと設定ページを作成するには?

まず、テーマフォルダ内に admin-option.php という名前で、設定ページのテンプレートを作成します。
中身については後述。

次に管理メニューを作成します。

管理メニューを作成するには、

 ① メニューを作成する関数
 ② admin_menu アクションにフックして、①の関数を登録
 ③ メニューがクリックされた時に表示される設定ページの出力

という3つの関数が必要になります。

> functions.php

add_action('admin_menu', 'option_menu_create');
function option_menu_create() {
	add_theme_page('配色', '配色', 'edit_themes', basename(__FILE__), 'option_page_create');
}
function option_page_create() {
	require TEMPLATEPATH.'/admin-option.php';
}

概観メニューのサブメニューとして「配色」の項目が追加されました。

管理メニューの追加/WordPress Codex 日本語版

オプションを作成するには?

配色の値を保存しておく「オプション」を作成します。
これは、自分用の設定値で、WordPressに自動的に保存されます。

add_option 関数で、新しいオプションを作成します。

add_option('color', 'blue');

オプションの値の取得は、get_option 関数です。

get_option('color');

add_option WordPress 設定機構/WordPress Codex 日本語版

設定ページからオプション値を保存するには?

設定ページから get でオプション値を送り、それを functions.php で受け取り、保存する流れにします。

> 設定ページ(admin-option.php)

<a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=red">Red</a>

> functions.php

update_option('color', $_REQUEST['color']);

で、サイトの配色を変更する方法は?

保存されているオプション値に応じて、body 要素にクラス名を出力して、CSSでコントロールします。
いわゆる、CSSシグネチャと呼ばれるテクニックですね。

> header.php

<body class="<?php echo get_option('color'); ?>">

> style.css

例えば、配色設定によって、header の背景色を変えたければ、以下のようになるでしょう。

/* ディフォルト */
#header { background: #ccc; }
	/* カスタムカラーズ */
	.red #header { background: red; }
	.orange #header { background: orange; }
	.yellow #header { background: yellow; }
	.green #header { background: green; }
	.blue #header { background: blue; }
	.purple #header { background: purple; }

まとめ

> functions.php

add_action('init', 'rainbow');

function rainbow() {
	add_option('color'); // オプション追加
	add_action('admin_menu', 'option_menu_create'); // 管理メニュー追加
	function option_menu_create() {
		add_theme_page('配色', '配色', 'edit_themes', basename(__FILE__), 'option_page_create'); // 概観メニューのサブメニューとして追加
	}
	function option_page_create() { // 設定ページ生成
		$saved = save_option();
		require TEMPLATEPATH.'/admin-option.php';
	}
}
function save_option() { // オプション保存
	if (empty($_REQUEST['color'])) return;
	$save = update_option('color', $_REQUEST['color']);
	return $save;
}

> admin-option.php

<div id="icon-themes" class="icon32"></div>

<h2>カスタムカラーズ</h2>

<p>現在の配色は、<b><?php echo get_option('color'); ?></b> です。</p>

<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=red">Red</a></p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=orange">Orange</a></p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=yellow">Yellow</a></p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=green">Green</a></p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=blue">Blue</a></p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=purple">Purple</a></p>

> header.php

<body class="<?php echo get_option('color'); ?>">

> css

お好みで