*

ペンション・民宿・プチホテル用 宿泊予約 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 プラグインを作る(10)空室管理画面 A

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

記事を読む

WordPressのプラグイン開発を効率的にするフレームワークたち

Wordpressでプラグインを作っていて「フレームワーク使えないのかな?」と疑問を持ちました。そこ

記事を読む

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

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

記事を読む

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

前回のソースがイマイチだったので若干書き直しました。しかし、これで正しいのかも疑問なんですが、取り敢

記事を読む

新バーチャル歌姫デビュー CeVIO Creative Studio は期待して良さそう

既にサンプル曲がガンガンアップされています。噂の歌声合成ソフト CeVIO Creative Stu

記事を読む

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

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 ↑