ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(2)
前回の物を若干変更しながら、どんどん進んでいきたいと思います。今回は管理画面の表示内容について行ってみます。ここには書いてなくても色々試しながらなので進むのが遅いのはご容赦くださいね。
前回の書き方だと、プラグインファイルが長くなりそうなのでクラスを使うようにしてみました。変更したのは表示部分の関数です。別途クラスファイルを用意して読み込む形にしてみました。
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 は何処へ行くのが正しいのか…
続く。
Sponsored Link
関連記事
-
-
ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(11)空室管理画面 B
空室管理画面の2回目。今回は空室状況の入力欄と月が変わった時の処理を加えてみます。今回は一覧表示なの
-
-
ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(9)空室管理画面を考える
前回までで基本的なプラグインの制作方法を簡単に学びました。今回からは空室管理の画面を作ってみます。柔
-
-
ワードプレス用宿泊予約プラグイン開発「空室情報読み込み」
前回までに作ったカレンダーに空室状況を表示させます。最初に表示欄を作って確認してからデータベースの読
-
-
ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(1)
初心者が、あらためて WordPress のプラグインを一から作る経過報告。たぶん連載記事ですね。途
-
-
ワードプレス用宿泊予約プラグイン開発「空室情報の表示」とか
久しぶりのワードプレスネタ。全然完成しませんわ。今回は最初にブラウザのキャッシュを切る作業をしました
ご質問は掲示板へお願いいたします。