• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

設定ページの作成

提供: WordPress Codex 日本語版
2009年2月25日 (水) 23:39時点におけるTakahashi Fumiki (トーク | 投稿記録)による版 (en:Creating_Options_Pages2009/2/20 Ronnie268)

(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先: 案内検索

はじめに

WordPressにカスタムの設定パネルを作ることは比較的簡単です。

メニューアイテムと新しいページを作るには、まず管理メニューの追加を見てください。

この構造に従う限りは、WordPressがあなたの代わりに作成、更新、保存、リダイレクトといった設定を行ってくれます。パーミッションをチェックし、裏側で起きているすべてを魔法のように執り行うのです。

ページを開く

プラグインのPHPファイルにコードを直接書いても構いませんし、例えばoptions.phpなどの追加ファイルを作成して、phpのinclude関数で読み込んでも構いません。- http://www.w3schools.com/PHP/php_includes.asp〔訳注:日本語情報では(http://php.benscom.com/manual/ja/function.include.php)が参考になります。〕

既存のWordPress設定ページと印象を合わせたければ、次のように始めてください:

<div class="wrap">
	<h2>Your Plugin Name</h2>

formタグ

ページを作ったら、HTMLフォームを作る必要があります。このコードを使ってください:

<form method="post" action="options.php">

nonceの魔法

formタグを開始したら、このPHPコードを挿入してください:

<?php wp_nonce_field('update-options'); ?>

このコードは二つのhiddenフィールドを挿入することで、自動的にユーザが設定を更新できるかどうかをチェックし、ユーザを正しい管理ページ(formのaction先は違うページだからです)にリダイレクトします。

フォームテーブル

ほとんどの設定ページは設定を表示するために"form-table"クラスのテーブルを利用します。このページの見栄えを統一するために、新しいテーブルを作ってください:

<table class="form-table">

新しく作った設定(optionsテーブルに保存されています)を呼び出したければ、それを同じ名前をフィールドに使用してください。以下のようになります:

<tr valign="top">
	<th scope="row">New Option Name</th>
		<td><input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" /></td>
	</tr>

<input>要素も見てみましょう:

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

フィールドのvalue属性値としてget_option()関数を使う時は、設定が保存されるときに自動的に更新されるということに注意してください。

設定の列を追加したら、tableを閉じましょう:

</table>

actionフィールド

続いて、value属性値にupdateを持つactionと呼ばれるhiddenフィールドを作りましょう。

<input type="hidden" name="action" value="update" />

page_optionsフィールド

最後に、page_optionsと呼ばれるhiddenフィールドを作りましょう。これは保存時に上書きされるページ設定のリストをカンマ区切りで持っています。

<input type="hidden" name="page_options" value="new_option_name,some_other_option,option_etc" />

タグを閉じる

それでは、その他の設定を入力して、formタグを閉じましょう。WordPressのデフォルトである"設定を更新"ボタンを使うこともできます。

	<p class="submit">
		<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
	</p>
</form>
</div>

テキストを翻訳対応にするためには、_e()関数を使うようにしてください。詳しくはWordPress の翻訳を参照のこと。


総復習

<div class="wrap">
	<h2>Your Plugin Name</h2>

<form method="post" action="options.php">
	<?php wp_nonce_field('update-options'); ?>

	<table class="form-table">

		<tr valign="top">
			<th scope="row">New Option Name</th>
			<td><input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" /></td>
		</tr>
 
		<tr valign="top">
			<th scope="row">Some Other Option</th>
			<td><input type="text" name="some_other_option" value="<?php echo get_option('some_other_option'); ?>" /></td>
		</tr>

		<tr valign="top">
			<th scope="row">Options, Etc.</th>
			<td><input type="text" name="option_etc" value="<?php echo get_option('option_etc'); ?>" /></td>
		</tr>
 
	</table>

	<input type="hidden" name="action" value="update" />
	<input type="hidden" name="page_options" value="new_option_name,some_other_option,option_etc" />

	<p class="submit">
	<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
	</p>

</form>
</div>