ワードプレスで独自の管理画面に追加したBUTTONのデザインを変更する方法

WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。

ワードプレスで独自テーマや独自プラグインを自作している方に向けた技術記事です。もし「独自メニューとして追加したボタンのデザインが管理画面にマッチしていなくて困っている」方は本記事で即解決。

ワードプレスで独自管理画面に追加したBUTTONデザインを変更する
まとめ

ワードプレスで独自管理画面に追加したBUTTONデザインを変更する

ワードプレスでは便利なCSSが後ろに準備されているため新しく追加したボタン（html）にもclassを適用するだけでボタンのデザインがカンタンに整えられます。ちなみにinputのtype="button"に限らずあらゆる要素に適用できるCSSが準備されていますので必要に応じてclassを適用ください。

htmlの差し込み例

まずは何も装飾をしていない状態のhtml。

<input name="name" type="text" value="" />
<input type="button" name="select" value="選択" />
<input type="button" name="clear" value="クリア" />

上記のソースでは以下のフォームが表示。

classを差し込んだ例

type="button"に対して装飾を行ないます。

<input name="name" type="text" value="" />
<input class="button button-primary" type="button" name="select" value="選択" />
<input class="button button-secondary" type="button" name="clear" value="クリア" />

選択とクリアのボタンにclassを追記。classを追加するだけでtype="button"の見た目が綺麗に整いました。

ちなみにclassを追加すれば「マウス選択時（hover）」なども諸々自動で動作するので安心です。以下の挙動も全部実装されていますので使い勝手も大幅改善されます。作り込み度合いはさすがワードプレス。

:hover
マウスをリンクのうえに置いたときの状態

:active
リンクがアクティベート（実行）されたときの状態

:focus
デバイスでタップしたり、キーボードのtabキーで移動したときの状態

さらにもう一歩仕上げる方法

こだわり派のあなたへさらに美しく整える方法を伝授。一番左側のフォームを「選択」「クリア」と同じようなバランスに仕上げられると最高ですよね。そんなときはBootstrapの外部CSSを読み込ませます。

bootstrapのCSSをダウンロードして管理画面内で読み込ませればOK。以下が記述例。

<link rel="stylesheet" type="text/css" href="<?php echo plugin_dir_url( __FILE__ ); ?>/css/bootstrap.css">

bootstrap.cssは2.3.2が公式サイト（Bootstrap）からダウンロードできるのでプラグインディレクトリに入れて独自の管理画面から読み込ませるだけでOK。inputのtype="text"に自動レイアウト調整がかかります。

注意点としてはBootstrapの4系ではinputのtype="text"に自動でCSSが効かないようなので、2.3.2（2系の最終バージョン）をダウンロードして利用するのがベストです。軽量にするなら「圧縮済みのbootstrap.min.css」を使いましょう。ちなみにminファイルは軽量化の都合で行がすべて詰められている分ソースが見辛いです。

上記デザインはWordPress4系で検証したのでボタンが少しだけ立体的になっています。WordPress5系になってから平面でフラットなデザインに変更されました。念のためフラットなデザインも掲載しておきます。

プラグインで追加した独自メニュー全体で見ると以下となります。

レイアウト調整ではWordPressが公式に準備しているCSSを流用しながら、不足している部分のみBootstrapで補ったりすれば効率的かつ美しく管理画面を作り込めます。独自テーマや独自プラグインを作成されている方はぜひ本記事を参考にしてくださいませ。細部まで作り込めば製品としての精度もどんどん向上します。

参考までにワードプレスで準備されているボタンに対するCSSは以下で読み込まれています。ワードプレス本体ではすでに以下のCSSが適用されているためclassを適用するだけでデザインが使えるという仕組みです。

/wp-includes/css/buttons.css

ちなみにbuttons.cssを下記の命令文で読み込ませる方法を思いつく人もいるはずですが、あまり良い方法とはいえません。ワードプレスの管理画面ではすでにbuttons.cssが読み込まれているというのが一番の理由で個別読込みさせるシチュエーションは限られているからです。さらに言えばもし今後ワードプレス上でCSSファイルの保存場所が変わったらファイルが読み込まれなくなるという点もあります。

💻SEOに強いWordPressテーマ

⇒ 大人気のワードプレステーマ「賢威」 ※ 2万を超えるお客様がご使用中！

function admin_panel_load_wp_button_styles() {
	wp_enqueue_style( 'admin_panel_wp_button_styles', includes_url() . 'css/buttons.css', array(), get_bloginfo( 'version' ) );
}
add_action( 'wp_enqueue_scripts', 'admin_panel_load_wp_button_styles' );

上記はCSSを読み込ませる使い方の１つとして参考程度に覚えておきましょう。アイデアは使い方が重要です。

まとめ

ワードプレスで独自テーマや独自プラグインを作るときはユーザーの使い勝手を考慮して設計する工夫が重要です。選択ボタンとクリアボタンが小さければマウスの操作がしづらかったり、色が同じだとユーザー側で誤操作をしてしまいやすくなります。重要なボタンと優先度を落としたボタンとは色を分けておいたり、各フォーム同士を綺麗に配置するなどわずかな改善の繰り返しでユーザビリティ（使いやすさ）は徐々に向上していきます。

もしワードプレスで独自メニューを追加してhtmlの見た目が寂しくなっていた方はぜひお試しくださいませ。