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
お好みで
Comments
[…] WordPress カスタムカラーズ 管理画面からサイトの配色を変えられる […]
初めまして。カッシーと申します。
テーマ専用の設定画面の作り方を探していてコチラにたどり着きました。
無事やりたいこと実現できそうで助かりました^^
記事中にですが
「admin-option.php 」と
「admin-options.php 」が混在していましたのでご報告までに。
カッシーさん
ご指摘ありがとうございます!
さっそく修正させていただきました ^^;
そしてお役に立てたようで良かったです。