この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


ワードプレスでオリジナルプラグインを作ってみよう その8 管理画面をデザインする

前回はの使い方をひと通り説明したので、今回は管理画面にデザインを適用してみます。
とりあえず、オリジナルプラグイン作りはここで一区切りつきます。
とはいっても、プラグインがシンプルであまりデザインする余地がないので、ワードプレスのデフォルトデザインとオリジナルデザインの2つを作ってみます。

まず、ワードプレスと同じデザインにする方法ですが、これは実は「JQuery UI」は使わずにできます。
ワードプレスのスタイルシートを使う方法ですが、フォームパーツであればそのままクラス名を指定してあげればワードプレスの基本デザインと同じになります。

参考までにフォームパーツの一覧を見てみましょう。

<!-- テキストフィールド -->
<input id="myID" class="regular-text ltr" type="text" value="" name="myName"></input>

<!-- テキストエリア -->
<textarea id="myID" class="large-text code" rows="3" name="myName"></textarea>

<!-- セレクトメニュー -->
<select id="myID" class="postform" name="myName">
	<option class="level-0" value="1">First</option>
	<option class="level-0" value="2">Secont</option>
</select>

<!-- チェックボックス -->
<fieldset>
	<label for="myID">
		<input id="myID" type="checkbox" value="1" name="myName"></input>
		チェックボックス1です
	</label>
	<label for="myID2">
		<input id="myID2" type="checkbox" value="1" name="myName"></input>
		チェックボックス2です
	</label>
</fieldset>

<!-- ラジオボタン -->
<fieldset>
	<label>
		<input type="radio" checked="checked" value="1" name="myName"></input>
		<span>ラジオボタン1</span>
	</label>
	<label>
		<input type="radio" value="2" name="myName"></input>
		<span>ラジオボタン2</span>
	</label>
</fieldset>

<!-- 送信ボタン -->
<p class="submit">
	<input id="myID" class="button button-primary" type="submit" value="変更を保存" name="myName"></input></p>

実際に動作しているサンプルを見るには管理画面にログインしてダッシュボードからサイドメニューの [ 設定 ] → [ 投稿設定 ] あたりをみると見ることが出来ます。

ポイントは各フォームパーツの「class」をそのまま指定してあげることです。
あと管理画面は「<div class=”wrap”></div>」で囲ってあげることです。
今までこのネタを書くために「<div class=”wrapper”></div>」としていたのはそのためです。

試しに適用してみたのがこちらです。

関連記事