管理画面に独自設定ページを追加する

ワードプレスのメモ

テーマにいろいろな機能を追加していくと、それらを一括して管理できる機能が欲しくなってきます。

以前記事にした内容ですが、も少し具体的にメモ。

ソース

//管理画面にメニュー追加
function add_site_settings_menu() {
	add_object_page('サイト設定ページ', 'サイトの設定', 'manage_options', 'site_settings.php', 'site_settings_page' );
}
add_action('admin_menu', 'add_site_settings_menu');

//データの保存
function site_settings_page() {
	if (isset($_POST['siteoption_keyword'])) {
		update_option('siteoption_keyword', wp_unslash($_POST['siteoption_keyword']));

	}
?>

//管理画面の表示
<div class="wrap">
<h2>サイトの設定</h2>
<?php
	if (isset($_POST['siteoption_keyword'])) {
		echo '<div id="setting-error-settings_updated" class="updated settings-error notice is-dismissible">
			<p><strong>設定を保存しました。</strong></p></div>';
	}
?>
<form method="post" action="">
<?php submit_button(); ?>
<table class="form-table setting-table">
	<tr>
		<th><label for="siteoption_keyword">サイトキーワード(keyword)</label></th>
		<td><input name="siteoption_keyword" type="text" id="siteoption_keyword" value="<?php form_option('siteoption_keyword'); ?>" class="regular-text" /></td>
	</tr>
</table>
<?php submit_button(); ?>
</form>
</div>

//関数
<?php
}
function siteoption_keyword() {
	echo esc_attr(get_option('siteoption_keyword'));
}

やっているのは、

  1. 「siteoption_keyword」というオプションを追加して、保存できるようにする
  2. 「サイトの設定」というメニューを追加
  3. 「サイトの設定」という管理画面ページを作成
  4. 「siteoption_keyword」を入力できるようにする
  5. 「siteoption_keyword」を出力できるようにする

こんな感じです。

※既にあるfunctions.phpの途中に書き込む、という前提です。

 

下記記事を参考に、というかほとんどコピペでうまく動いたので、たぶん上記で大丈夫なはず、、、(参照元はもっと詳しく書いてあります!)

【WordPressプラグイン開発】管理画面にメニュー・サブメニューを追加する方法

【WordPressプラグイン開発】独自設定ページでオプションを追加・変更する方法

出力

この例は簡単のため、単純なテキストの出力です。

<?php echo esc_attr(get_option('siteoption_keyword')); ?>

応用

テキストの出力ではあまり応用できませんが、チェックボックス、ラジオボタン、セレクトメニューを設定すると、条件分岐が使えるようになるのでグンと応用範囲が広がると思います。

//セレクトメニュー追加
update_option('siteoption_select1', $_POST['siteoption_select1']);

//セレクトメニュー管理画面表示
<select name="siteoption_select1" id="siteoption_select1">
	<option value="0" <?php selected( 0, get_option( 'siteoption_select1' ) ); ?> >選択肢0:デフォルト</option>
	<option value="1" <?php selected( 1, get_option( 'siteoption_select1' ) ); ?> >選択肢1</option>
	<option value="2" <?php selected( 2, get_option( 'siteoption_select1' ) ); ?> >選択肢2</option>
	<option value="3" <?php selected( 3, get_option( 'siteoption_select1' ) ); ?> >選択肢3</option>
</select>

//セレクトメニュー関数
function siteoption_select1() {
	echo esc_attr(get_option('siteoption_select1'));
}

//ラジオボタン追加
update_option('siteoption_radio1', $_POST['siteoption_radio1']);

//ラジオボタン管理画面表示
<label><input name="siteoption_radio1" type="radio" value="0" <?php checked( 0, get_option( 'siteoption_radio1' ) ); ?> />ラジオボタン1</label><br />
<label><input name="siteoption_radio1" type="radio" value="1" <?php checked( 1, get_option( 'siteoption_radio1' ) ); ?> />ラジオボタン2</label><br />
<label><input name="siteoption_radio1" type="radio" value="2" <?php checked( 2, get_option( 'siteoption_radio1' ) ); ?> />ラジオボタン3</label><br />
<label><input name="siteoption_radio1" type="radio" value="3" <?php checked( 3, get_option( 'siteoption_radio1' ) ); ?> />ラジオボタン4</label>

//ラジオボタン関数
function siteoption_radio1() {
	echo esc_attr(get_option('siteoption_radio1'));
}

//チェックボックス追加
update_option('siteoption_checkbox1', $_POST['siteoption_checkbox1']);
$siteoption_checkbox1 = isset($_POST['siteoption_checkbox1']) ? 1 : 0;
update_option('siteoption_checkbox1', $siteoption_checkbox1);

//チェックボックス追加管理画面表示
<label><input name="siteoption_checkbox1" type="checkbox" id="siteoption_checkbox1" value="1" <?php checked( 1, get_option('siteoption_checkbox1')); ?> />する</label>

//チェックボックス関数
function siteoption_checkbox1() {
	echo esc_attr(get_option('siteoption_checkbox1'));
}

セレクトメニュー、ラジオボタン、チェックボックスはこんな感じです。

あとは必要な数だけ関数名を変えてコピペ。

関数は全部同じ書き方でOK。

出力のパターン

//チェックボックスの利用例:チェックが入っていたら~
<?php $check1 = get_option( 'siteoption_checkbox1' ); if($check1 == 1): ?> 

//ラジオボタンの特定の選択肢なら~
<?php $radio1 = get_option( 'siteoption_radio1' ); if($radio1 == 3): ?>

//ラジオボタンの選択肢別
<?php $radio1 = get_option( 'siteoption_radio1' ); switch($radio1): ?><?php case ('0') : ?>
<?php break; ?><?php case ('1') : ?>
<?php break; ?><?php case ('2') : ?>
<?php break; ?><?php endswitch; ?>

//セレクトメニューで選んだCSSを読み込む
//ファイルがあるかどうか判断、強制的に再読み込みをさせる、なども組み込んであるのでちと長い
<?php 
  $select1 = get_option( 'siteoption_select1' );
  $skin_path = get_stylesheet_directory();
  $check_skin_file = $skin_path.'/css/skin'.$select1.'.css';
  if(file_exists($check_skin_file)): ?>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); echo '/css/skin'.$select1.'.css?' . filemtime( get_stylesheet_directory() . '/css/skin'.$select1.'.css'); ?>" type="text/css" type="text/css" />
<?php else: ?>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); echo '/css/skin'.'0'.'.css?' . filemtime( get_stylesheet_directory() . '/css/skin'.'0'.'.css'); ?>" type="text/css" type="text/css" />
<?php endif; ?>

基本的に、get_option()で値を取り出して比較する、というやり方です。

条件分岐で解決できることは何でも追加できちゃいますね。

  • トップページにニュースのサブループを表示する?表示数は?
  • サイドバーを表示する?
  • アニメーションのスクリプトを使う?
  • どのファイルを読み込む?

いろいろ出来ちゃうのでついつい詰め込みすぎてしまいます。ご利用は計画的に。

出来ずに困っていること

この設定画面に画像関連を組み込むこと、これが難しい。

幾つかの記事を見たのですが、上記例より急にハードルが高くなります。

画像アップロード、メディアライブラリの呼び出し、カラーホイールの呼び出しあたりが出来ると大満足なのですが。

いつかきっと、、、