ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る（２）

前回の物を若干変更しながら、どんどん進んでいきたいと思います。今回は管理画面の表示内容について行ってみます。ここには書いてなくても色々試しながらなので進むのが遅いのはご容赦くださいね。

前回の書き方だと、プラグインファイルが長くなりそうなのでクラスを使うようにしてみました。変更したのは表示部分の関数です。別途クラスファイルを用意して読み込む形にしてみました。

wp-contents/plugins/drtehotel/drtehotel.php

function show_text_option_page() {
		//オブション画面に表示する内容
		echo "TEST<br />";
		include_once "class/initialization.php";
		$io = new INIT();
		$io->test();
	}

wp-contents/plugins/drtehotel/class/initialization.php

<?php
	class INIT {
		function test() {
			echo plugins_url() . '/';
		}
	}

管理画面表示の基本的なCSSを調べる

題名の通り、表示用のCSSを調べてみます。まずは一般的な画面のサンプルとして「設定」の中の「メディア」を確認します。

左上にアイコンと題名。「画像サイズ」等のサブタイトル部分。左に文字で右側にインプット用の枠。そして蒼いボタンといったところでしょうか？それぞれをソースで確認してみます。

<div class="wrap">
<div id="icon-options-general" class="icon32"><br /></div><h2>メディア設定</h2>

wrapの中にアイコンとh2のタイトルが確認できます。

<h3>画像サイズ</h3>
<p>投稿本文に画像を挿入するときに使われる上限寸法を設定できます。</p>

サブタイトル部分はh3タグで特に技は使っていないようです。

<form action="options.php" method="post">
<input type='hidden' name='option_page' value='media' />
<input type="hidden" name="action" value="update" />
<input type="hidden" id="_wpnonce" name="_wpnonce" value="eb507bb354" />
<input type="hidden" name="_wp_http_referer"
 value="/wp-admin/options-media.php" />

formタグと隠しテキストが設定されています。詳細は後ほど確認しますが、今回は　name=”action” value=”update”　部分に注目しておきます。

<table class="form-table">
<tr valign="top">
<th scope="row">サムネイルのサイズ</th>
<td>
<label for="thumbnail_size_w">幅</label>
<input name="thumbnail_size_w" type="number" step="1" min="0"
 id="thumbnail_size_w" value="150" class="small-text" />
<label for="thumbnail_size_h">高さ</label>
<input name="thumbnail_size_h" type="number" step="1" min="0"
 id="thumbnail_size_h" value="150" class="small-text" /><br />
<input name="thumbnail_crop" type="checkbox" id="thumbnail_crop"
 value="1"  checked='checked'/>
<label for="thumbnail_crop">サムネイルを実寸法にトリミングする
 (通常は相対的な縮小によりサムネイルを作ります)</label>
</td>
</tr>

一見複雑に見えますが、table.fprm-tableでレイアウトしておけば大丈夫みたいです。

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

ここはそっくりコピーして使えそうです。新しく作ったクラスの中に書き込んでみます。

ソースの修正

wp-contents/plugins/drtehotel/class/initialization.php

<?php
	class INIT {
		public $scr =<<< EOF
<div class="wrap">
<div id="icon-options-general" class="icon32"><br /></div><h2>初期設定</h2>
EOF;
・・・・省略
function show_screen() {
			echo $this->scr;
・・・・省略

と言った感じでHTMLを記入しておく。もっとスマートなやり方ないのかな？^^;

wp-contents/plugins/drtehotel/drtehotel.php

function show_text_option_page() {
		//オブション画面に表示する内容
		include_once "class/initialization.php";
		$io = new INIT();
		$io->show_screen();
	}

と、こちらのファイルも調整しておく。そしてログインして管理画面で「空室管理」。

大丈夫みたいです。ここまでは特に問題はありません。が！！！form action は何処へ行くのが正しいのか…

続く。