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


ワードプレスでオリジナルプラグインを作ってみよう その6 プラグインの管理画面をJQuery UIを使ってスマートにカスタマイズする

前回はセキュリティに考慮した管理画面を作りました。今回はデザイン面です。
もうちょっとデザインをなんとかしたいと思います。
というわけで、今回はプラグインの管理画面をJQuery UIを使ってスマートにカスタマイズする方法です。

ワードプレスには「JQuery」「JQuery UI」が最初からあります。
「JQuery」はJavaScriptを使いやすくしたフレームワークで、「JQuery UI」「JQuery」を拡張して「UI(画面デザイン)」をいろいろといじるためのライブラリです。頭のいい人達が作った難しいことがたった数行のコードで実現できるフリーライブラリです。
ライブラリというのはスクリプト(プログラム)を使いやすいようにまとめたものです。

フレームワークとライブラリの違いはどちらもプログラムをまとめたものなのですが、フレームワークはルールがあって、そのルールに従うニュアンスがあり、ライブラリは使えるものがあれば使ってやるというニュアンスがあります。似たようなものなのであまり意識することはないかも?

ワードプレスには「JQuery UI」は存在しているのですが「テーマ」は入っていません。
「テーマ」は自分で用意します。といっても、「JQuery UI」の公式サイトからダウンロードするだけです。

[browser-shot width=”600″ url=”http://jqueryui.com/themeroller/”]

▼JQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes bu

「JQuery」「JQuery UI」を使う方法なのですが、色々とクセがあるので説明します。
「JQuery」「JQuery UI」は使いますと宣言するだけで使えます。
ただし、みなさんのワードプレスにはプラグインを色々と入れていると思いますが、そのプラグインが既に「JQuery」「JQuery UI」を読み込んでいる場合は、二度手間です。
また、もしかしてワードプレスのバージョンによっては自動的に読み込まれているかもしれません。

「JQuery」「JQuery UI」には実は様々なバージョンが存在します。
バージョンによってできることが異なるので、今できたことが数年後には廃止されてできない、なんてことが多々あります。なのでワードプレスでは読み込むスクリプトをバージョンごとに管理する機能があります。
とりあえず、何が起きるか分からないのでワードプレスの「JQuery UI」を使わず自分で用意したものを使うことにします。

まずワードプレスにスクリプトを読み込む方法ですが、アクションフックの「admin_enqueue_scripts()」というフックが既に用意されているので利用します。

既にスクリプトが読み込まれたかどうか判定するには「wp_script_is()」関数を使います。
スクリプトを読み込ませるには「wp_enqueue_script()」を使います。

「wp_script_is()」の使い方は以下の通りです。

wp_script_is( 'スクリプトハンドル名' , '状態' );

「スクリプトハンドル名」はそのスクリプトが読み込まれた時に指定する識別子で、「JQuery」「JQuery UI」といったメジャーなスクリプトについては名前が決まっています。
ワードプレスのJQeuery関連のファイルは「/wp-includes/js/jquery/」フォルダに入っています。
このフォルダを見ると「スクリプトハンドル名」の法則性が分かります。
「wp_script_is()」関数の第二引数「状態」は4つのキーワードを指定します。

[note]registered ………スクリプトが wp_register_script() で登録されているか
enqueued / queue ……… スクリプトは読み込まれているか
done ……… スクリプトが出力されているか
to_do ……… スクリプトはまだ出力されていないか[/note]

例えば「enqueued」を指定するとそのスクリプトが読み込まれている場合は「真(true)」を返します。

wp_script_is( 'jquery' , 'enqueued' );

次にスクリプトを読み込む「wp_enqueue_script()」ですが、ワードプレスに最初からあるスクリプトを使う場合は「スクリプトハンドル名」だけ指定すればOKです。

wp_enqueue_script( 'jquery' );

もし、自分が用意したオリジナルスクリプトを読み込む場合は以下のようにします。

wp_enqueue_script
(
	'スクリプトハンドル名',
	'スクリプトまでの絶対パス',
	array( '依存するスクリプトがあれば配列でスクリプトハンドル名を指定' ),
	'バージョン',
	trueならヘッダーで読み込み false ならフッターで読み込み
);

例えば以下のように指定します。

wp_enqueue_script
(
	'myScript',
	plugins_url( 'myScript/js/original.js' ),
	array( 'jquery' , 'jquery-ui-core' ),
	'1.0',
	false
);

次にスタイルシートを読み込ませる方法です。
基本的には「wp_enqueue_script()」と同じです。スタイルを読み込ませるには「wp_enqueue_style()」を使います。
スタイルシートはワードプレスには用意されていないので基本的には自分で用意します。
以下のように指定します。

wp_enqueue_style
(
	'スタイルハンドル名',
	'スタイルファイルまでの絶対パス',
	array( '依存するスタイルがあれば配列でスタイルハンドル名を指定' ),
	'バージョン',
	'メディアタイプ'
);

例えば以下のように指定します。

wp_enqueue_style
(
	'myStyle',
	plugins_url( 'myScript/css/style.css' ),
	false,
	'1.0',
	'all'
);

「メディアタイプ」というのは端末ごとに適用させるオプションです。
「all」にすると全ての端末で適用されて「print」とすると印刷した時だけ適用されます。
「all」にしておけば間違いはないです。

▼メディアタイプ

CSSの基本解説・チュートリアル

因みにバージョンについては同名ファイルがある場合にかちあわないようにするために付けます。
おそらくかちあうことはない場合は、基本的になんでも構いません。

今回、スタイルシートは「JQuery UI」「テーマ」を読み込みます。
「JQuery UI」「テーマ」「JQuery UI」のオフィシャルとサイトで自分で選択してダウンロードします。
今のところテーマは24種類あります。ワードプレスの管理画面に似ているのは「Overcast」「Smoothness」というテーマでしょうか。

ダウンロードの方法ですが、ダウンロードする前にカスタマイズもできます。

▼JQuery UI テーマ
http://jqueryui.com/themeroller/

サイトにアクセスすると「Smoothness」のデモデザインを見ることが出来ます。

左側のサイドメニューで他のテーマを見ることが出来ます。

テーマローラーメニュー
テーマローラーメニュー

「Gallery」タブをクリックすると24種類のテーマリストが出てきます。好きなテーマを選んでみましょう。

テーマローラーギャラリーからテーマを選択できる
テーマローラーギャラリーからテーマを選択できる

「Roll Your Own」タブではフォントの大きさや角丸の角度、ドロップシャドウといった細かいオリジナル設定を変更できます。デフォルトで十分なのでいじる必要はないでしょう。

テーマを決めたら [ Download theme ] ボタンをクリックします。

ダウンロードボタンでダウンロードできる
ダウンロードボタンでダウンロードできる

するとダウンロードの選択画面が出てきます。これはテーマを必要な箇所だけ部分的にダウンロードするか、まとめて全てダウンロードするかを選択できます。まとめて全てダウンロードしておけば間違いはありません。
ただし、ボタンだけとかタブのデザインだけしか明らかに使わない場合はチェックを外しておきます。その分、ファイルの容量が減ります。

Download Builder - jQuery UI
Download Builder – jQuery UI

ダウンロードをする前にとても重要なことがあります。
実はこのままダウンロードしてしまうと「Smoothness」のようなみんなが使っているテーマだと、他のプラグインでも使っている場合があり、せっかく細かい設定をしても上書きされてしまう可能性があります。

そこで、画面下にある「CSS Scope」を設定します。何を設定するかなのですが、CSSのクラスやセレクタを設定します。
特にバッティングしても問題がなければ空欄にしておきます。

 

テーマがバッティングしないようにSCOPE名を設定する
テーマがバッティングしないようにSCOPE名を設定する

例えば「my_mail_notice」とクラスを設定すると、親クラスが「my_mail_notice」の時だけテーマが適用されます。

<div class="my_mail_notice">
	<div id="tabmenu">
		<ul>
			<li><a href="#tabs-1">メニュー 1</a></li>
			<li><a href="#tabs-2">メニュー 2</a></li>
			<li><a href="#tabs-3">メニュー 3</a></li>
		</ul>
		<div id="tabs-1">
			<p>メニュー 1 の内容。</p>
		</div>
		<div id="tabs-2">
			<p>メニュー 2 の内容。</p>
		</div>
		<div id="tabs-3">
			<p>メニュー 3 の内容。</p>
		</div>
	</div>
</div>

因みにダイアログや日付選択などfloat(フロート)するUI系は、body要素にタグが挿入されることが多いため、「<body>」タグに「CSS Scope」で指定したのクラスやIDを直接記述しておかないとうまくいかない場合があります。動かなかったら疑ってみてください。

ダウンロードしたファイルはZIP形式で圧縮されているので解凍します。
色々ファイルやらデモサンプルがありますが、必要なのは「jquery-ui.min.js」「jquery-ui.min.css」のファイルと「images」フォルダの中身全てです。
これをプラグインのフォルダにアップロードします。

今回は「/wp-content/plugins/my_mail_notice/」にアップロードすることになります。

テーマファイルがアップロードできたら「wp_enqueue_style()」関数で以下のように指定します。

//プラグインのベースフォルダを調べる
$plugin_base_path = plugin_basename( __FILE__ );

//プラグインフォルダ名だけ切り出す
preg_match( "/(.+)/(.+?)$/" , $plugin_base_path , $array );

//プラグインのフォルダ名を取得
$plugin_base_path = $array[1];

//JQuery UIを読み込み
wp_enqueue_script
(
	'jquery-ui.min',
	plugins_url( $plugin_base_path . '/jquery-ui.min.js' ),
	array( 'jquery' ),
	'1.11.0',
	false
);

//テーマスタイルを読み込み
wp_enqueue_style
(
	'jquery-ui.theme',
	plugins_url( $plugin_base_path . '/jquery-ui.min.css' ),
	false,
	'1.11.0',
	'all'
);

「1.11.0」というのはどこから来たのかと思うかもしれませんが、バージョンは「jquery-ui.min.css」の中に書いてあります。

以上をまとめると以下のようになります。

関連記事