*

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(2)

公開日: : 最終更新日:2013/06/16 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を調べてみます。まずは一般的な画面のサンプルとして「設定」の中の「メディア」を確認します。

スクリーンショット 2013-06-13 23.13.41

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

<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();
	}

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

スクリーンショット 2013-06-14 1.28.10

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

続く。


Sponsored Link


 
 

関連記事

WordPress用プラグインで使う宿泊予約用カレンダーをPHPで書くぜ

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作るシリーズで使う、空き部

記事を読む

ワードプレス用宿泊予約プラグイン開発「空室カレンダー表示」

前回ネットで検索して見つけた calendar($year = "", $month = "") 関

記事を読む

ワードプレス用宿泊予約プラグイン開発「空室情報読み込み」

前回までに作ったカレンダーに空室状況を表示させます。最初に表示欄を作って確認してからデータベースの読

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(8)セキュリティ対策

前回紹介したホームページを参考にソースを書き換えてみました。特に標準の option テーブルにレコ

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(10)空室管理画面 A

さっそく空室管理画面を作っていきます。今回は画面設計中心です。部屋タイプの選択と、空き情報を更新する

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑