hijiriworld Web

ここで言う サイト設定 とは、「サイトのタイトル」、「キャッチフレーズ」など、サイト全体の共通情報として設定しておくべき内容を指しています。

また、WordPressの構築・テンプレート作成などを行う制作者のことを管理者ユーザ、WordPressで構築されたサイトを管理・運用する人のことを一般ユーザと呼ぶことにします。
基本的に一般ユーザは技術スキルがないものとします。

さて、WordPressでサイト設定を行うページと言えば「管理画面 > 設定 > 一般設定」でしょうか。

しかしこのページには、サイト設定だけではなく、WordPressのシステム設定も混在しています。一般ユーザには開放しない方がよさそうです。

ということで、このページの中のサイト設定に該当する部分（サイトのタイトル、キャッチフレーズ）の編集のみ、一般ユーザに開放する方法を考えます。

加えて、他の項目もサイト設定として追加したいところです。

とりあえず、サイトタイトル、キャッチフレーズに加えて、Twitterアカウント、FaceBookアカウントを「サイト設定」として、一般ユーザが編集できるようにしてみます。

管理画面にカスタムメニューを設置

システム設定が混在する”設定メニュー”そのものを一般ユーザには開放しませんので、サイト設定のページはカスタムメニューとして追加します。

カスタムメニューページの準備

テーマフォルダ内に「admin」フォルダを作成し、その中に「site_settings.php」というファイルを作成します。
これがサイト設定画面になる部分です。
まずは中身は空でいいです。

カスタムメニューの作成

管理画面にカスタムメニューを設置するには、admin_menuアクションにフックして、add_menu_page関数を使います。

> テーマフォルダ/functions.php

// admin_menu にフック
add_action('admin_menu', 'register_custom_menu_page');
function register_custom_menu_page() {
	// add_menu_page でカスタムメニューを追加
	add_menu_page('サイト設定', 'サイト設定', 0, 'site_settings', 'create_custom_menu_page', '', 3);
}
function create_custom_menu_page() {
	// カスタムメニューページを読み込む
	require TEMPLATEPATH.'/admin/site_settings.php';
}

add_menu_page関数の書式はこちら: Function Reference/add menu page

カスタムメニューの位置はダッシュボードの下にしたかったので”3″を指定しています。

管理画面のメニューに『サイト設定』というカスタムメニューが追加されました↓

カスタムメニューページの作成

まず最初に全貌を示します。

> テーマフォルダ/admin/site_settings.php

<?php
// add_option
add_option('twitter');
add_option('facebook');

// update_option
if ($_REQUEST['blogname']) update_option('blogname', $_REQUEST['blogname']);
if ($_REQUEST['blogdescription']) update_option('blogdescription', $_REQUEST['blogdescription']);
if ($_REQUEST['twitter']) update_option('twitter', $_REQUEST['twitter']);
if ($_REQUEST['facebook']) update_option('facebook', $_REQUEST['facebook']);
?>

<div id="icon-options-general" class="icon32"></div>
 
<h2>サイト設定</h2>

<form method="post" action="admin.php?page=site_settings">

	<table class="form-table">
	<tr valign="top">
		<th scope="row"><label for="blogname">サイトのタイトル</label></th>
		<td><input name="blogname" type="text" value="<?php echo get_option('blogname'); ?>" class="regular-text"></td>
	</tr>
	<tr valign="top">
		<th scope="row"><label for="blogdescription">キャッチフレーズ</label></th>
		<td><input name="blogdescription" type="text" value="<?php echo get_option('blogdescription'); ?>" class="regular-text">
		<p class="description">このサイトの簡単な説明</p></td>
	</tr>
	<tr valign="top">
		<th scope="row"><label for="twitter">Twitterアカウント</label></th>
		<td><input name="twitter" type="text" value="<?php echo get_option('twitter'); ?>" class="regular-text">
	</tr>
	<tr valign="top">
		<th scope="row"><label for="facebook">Facebookアカウント</label></label></th>
		<td><input name="facebook" type="text" value="<?php echo get_option('facebook'); ?>" class="regular-text">
	</tr>
	</table>

	<p class="submit">
		<input type="submit" name="submit" id="submit" class="button-primary" value="変更を保存">
	</p>

</form>

マークアップ構造については、他の管理画面のディフォルトのスタイルを踏襲しているので気にしないでください。

こうなります↓

WordPressオプション設定機構

WordPressには、独立したデータをWordPress データベースに保存・更新・読出をする機構があります。

独立したデータということは、つまり、サイト全体の設定ということになります。

オプション設定関係の関数は以下の通り。

<input name="twitter" type="text" value="<?php echo get_option('twitter'); ?>" class="re>

add_option

add_option('twitter');
add_option('facebook');

add_option関数で、カスタム設定（Twitterアカウント、FaceBookアカウント）を追加しています。
サイトのタイトルとキャッチフレーズは、ディフォルトで用意されている設定なのでadd_optionする必要はありません。

update_option

if ($_REQUEST['blogname']) update_option('blogname', $_REQUEST['blogname']);
 ...

ポストされたら、update_option関数で設定データを更新しています。

フォーム

<input name="blogname" type="text" value="<?php echo get_option('blogname'); ?>" />
 ...

get_option関数で設定データを取得して value として出力しています。

サイトのタイトルとキャッチフレーズは、ディフォルトで用意されているものをそのまま使いたいので、フィールド名はディフォルトの名前を使います。
そうすることで「管理画面 > 設定 > 一般設定」のデータとも連動します。

テンプレートでサイト設定を出力

get_option関数で設定データを取得して出力すればOK

<?php echo get_option('twitter'); ?>

一般ユーザ向けの「サイト設定」

管理者ユーザ（管理者権限でログイン）

一般ユーザ（投稿者権限でログイン）

一般ユーザ向けの「サイト設定」メニューが実装できました。

おまけ – 一般設定画面を拡張する

> テーマフォルダ/functions.php

// whitelist_optionsにフックして項目を追加
function add_custom_general_options($whitelist_options) {
	$whitelist_options['general'][] = 'twitter';
	$whitelist_options['general'][] = 'facebook';
	return $whitelist_options;
}
add_filter('whitelist_options', 'add_custom_general_options');

// add_settings_field関数で項目を追加
function add_custom_general_fields() {
	add_settings_field('twitter', 'Twitterアカウント', 'display_twitter_field', 'general');
	add_settings_field('facebook', 'FaceBookアカウント', 'display_facebook_field', 'general');
}
add_action('admin_init', 'add_custom_general_fields');

// twitterフィールド生成
function display_twitter_field() {
?>
	<input type="text" name="twitter" value="<?php echo get_option('twitter'); ?>" class="regular-text" />
<?php
}

// facebookフィールド生成
function display_facebook_field() {
?>
	<input type="text" name="facebook" value="<?php echo get_option('facebook'); ?>" class="regular-text" />
<?php
}