ほぼ自分用メモです。

プラグインを作ったりとか、テーマの独自オプションページを作るときに便利そうな、WordPressの管理画面などで利用されている汎用的なクラスをすこし調べてみました。

ボタンとかメッセージボックスって別にそこまでデザインを凝るつもりはないにしても、ただ字をだすだけでは味気がなさすぎるよな…というときに使えるかもしれません。

はじめに

WordPress3.8.1 で自分がつかってるなかで見つけたものです。これらのIDやクラスはもしかしたら将来的にバージョンアップで変更になる可能性もあり、そうなった場合はまたIDやクラスを調べる必要があるかもしれません。

また、今回は自分が作業してる中で偶然見つけたものとかをメモってるだけですので、もしかしたら公式とかどこかにちゃんとしたドキュメントがある…かもわからないです。
（あんま時間がなくてしっかりとは調べてないですが、ざっと見た感じでは自分ではみつけられませんでした…）

１．ページ上部のメッセージボックス

メッセージボックスは通常ページの上の方に有ります。投稿したときとか、設定を保存した時に出てくるアレです。トリミングが雑とか言ってはいけませんｗ

この部分は、DIV要素に message というIDと、メッセージの種別を表すクラス（updated,errorなど）が入り、セットで使用します。

 ページ上部と書きましたが、別に場所はどこでもいいかもしれません。

また、#message だけでなく、 .message にもスタイルがかかっているようなので、

としてもOKそうです。 

DIVの中に p を入れないと、余白がちょっとおかしくなるかもしれません。

WordPressでは更にその中に strong 要素を入れて強調していました。

帯の色の出しわけですが、#message(または .message )がある要素に更に updated クラスがあると緑の帯が、error クラスがあると赤い帯が出るようです。他にもあるかもしれませんが、多分よく使うのはこの2個だと思います。

他の色が欲しかったり、もっとデザインを凝りたいなら自分でスタイル書きましょうｗ

ほかにも、アップデートのお知らせの時にでてくる黄色い帯の .update-nag （これは message クラスやIDはなし）なんてのもありましたが、たぶんこいつは名前の付け方などからしても多分アップデート通知専用な感じなのでこれを使うくらいなら自分でCSS拡張したほうがいいかもしれません。デザインも微妙に違うし。

ただ、全体の統一感という意味でも、この2個にしておくのがいいのかも。

2.ボタン

ボタンも同様に、button と button-??? というクラスをセットで与えると良いみたいです。

 button-primary はあのWordPress色の青いボタン（初期状態なら）が現れます。
どうもここはユーザープロフィールで設定した管理画面の配色と連動しているようなので、そこで色を変更しているとそれに応じて色が変化します。

プライマリがあるってことはセカンダリもあるんでしょ？っておもいますよね？
一応ありました。が、これは白っぽい控えめなボタンになります。こっちは配色にかかわらず同じ色みたいです。

プライマリ、セカンダリときたらその次もあるの？って思いますが、そもそも次ってなんていうのかすら知らないのでわかりません。 ((しらべたら tertiary っていうらしいです。または普通に third なんだそう。いずれにしてもこのクラスはないようです。))

3.フォーム用のテーブル

設定画面では設定用のフォームがありますよね。

大体ラベルがあって、入力欄があって…という感じです。
dl 要素や table 要素を使うことになりますが、結構幅とか調整するの面倒だったりしますよね。

そんな時は、 .form-table というクラスを持つテーブルを作ってあげるといい感じにらくできるかもしれません。

その際にラベル側を th で、インプットフィールド側を td とすると更にベターな感じです。（ラジオボタンやチェックボックスなど、要素の右にラベルが来るのが一般的なものの場合は別ですが）

ただ、このままだと padding が結構広めに取られてるので、オプション項目が多い場合はだらーっと間延びして使いにくくなるかもしれませんので、更にクラスを付けてうまく調整するのがいいとおもいます。

おまけ

ほかにも面白いものないかと調べていたら .ui-autocomplete-loading というものも見つけました。このクラスを持ってるインプットフィールドは灰色になって右側にアニメーションするくるくるがあらわれます。

入力補完スクリプトを使うときとかに、スクリプトが動作してる間それを知らせるためにアイコンを出したい時はこのクラスをつけてあげるとちょっとだけ楽できるかもしれません。

ただ、入力補完系のスクリプト使うと、はじめからそういうのが付いている可能性もありますが…。

まとめ

オプションページ作りながらざざーっとだけ調べてメモったものをもとにかいてるということもあり、あんまり面白いのとかは見つけられませんでしたが、ボタンとかメッセージボックスみたいな地味に面倒くさい系はうまく流用してあげることで楽しつつ全体の統一感も保てるので有効活用していけるといいかなーと思いました。

ボタンだけでも他のオプションページと統一されてると、なんとなくまとまった感がしないでもないですし、地味にボタンスタイルって面倒ですからねｗ

まぁ、管理画面の中のセクションですし、基本的には自分しか見ない場所ですから（クライアントワークなら別かもしれませんが）、そこまでがっつり拘る必要はないのかもしれませんけどね。。まぁ、見えないところのオシャレ（）もたまにはいいかな。