*

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

空室管理画面の2回目。今回は空室状況の入力欄と月が変わった時の処理を加えてみます。今回は一覧表示なの

記事を読む

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

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

記事を読む

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

空室情報のデータベース処理を一気に終えました。ごちゃごちゃしてきたので、もっとスッキリ書く方法が無い

記事を読む

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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

DJI Osmo Mobile 2 を少し使ってみた感想など

BlackMagicDesign URSA mini 4.

DJI Osmo Mobile 2 の少しディープなレビュー

DJI Osmo Mobile 2 を選んだのは「アクティブトラック」

スマホ用ジンバル比較=DJI OSMO mobile2 vs ZHIYUN Smooth 4 vs MOZA mini-mi

さて! 聞いて気になる見て欲しくなる。うれし恥ずかしスマホ用ジンバルの

【実験】Neewer 37mmクリップオンND 2-400 NDフィルタークリップ付きの性能を確認

前回の記事「FiLMiC pro 〜 iPhoneで動画撮影本気モード

FiLMiC pro 〜 iPhoneで動画撮影本気モード

俄然! iPhoneの有効活用が気になり始めました。 前回プレビ

→もっと見る




  •  

PAGE TOP ↑