自分専用に作成したプラグインであればそれほど気になるものでもないような気がしますが、プラグインの設定画面、特にチェックボックスって素っ気ない感じがしますね。
例えば私が自分用に作った「Hima Art Utility」というプラグインの一部の設定画面。普通にチェックボックスで設定を出すとこんな感じです。
やっぱりちょっとアレですね（笑）．．．。
そこで、ON/OFFのスイッチ風にすると同じ画面でもこんなにいい感じになります。
本当にスイッチを入れたり切ったりしてるみたいで、チェックが入っているかどうかだけの違いではあるものの、設定していても楽しくなります。
実はこれ、簡単なCSSだけで変更できるんです。
私のようにプラグイン作りに挑戦していて、ちょっとアレンジしたいなという方、参考にしてみてください。
本ページでは、プラグインの設定画面やチェックボックス項目の追加自体が問題なくできていることを前提として、チェックボックスのデザイン変更のみを紹介します
プラグイン設定画面のチェックボックスをスイッチ風にする方法
チェックボックスのデザイン変更は、以下の手順で行います。
- プラグイン設定画面用のスタイルシートを作る
- プラグイン設定画面用のスタイルシートを読み込む
- プラグイン設定画面用のスタイルシートにボタン風のスタイルコードを追加する
- チェックボックスの入力項目に、CSSクラスを付与する
すでに自作プラグインに設定画面用のスタイルシートがある場合には、コードの追加部分まで読み飛ばしてください
プラグイン設定画面用のスタイルシートを作る
パソコン上で「admin-style」というファイル名、「.css」という拡張子のファイル「admin-style.css」を作成します。
プラグインのルートフォルダ（プラグイン名のphpファイルのある場所）へ「admin-style.css」をアップロードします。
プラグイン設定画面用のスタイルシートを読み込む
プラグインの基本となるphpファイル（通常は「プラグイン名.php」）へ以下のコードを追加します。
function sample_enqueue_plugin_admin_style(){
//スタイルシートの登録
wp_register_style( 'sample-admin-style', plugin_dir_url( __FILE__ ) .'admin-style.css', array(),'', 'all' );
//スタイルシートの読み込み
wp_enqueue_style('sample-admin-style', '', array(), '1.0', false);
}
add_action('admin_enqueue_scripts','sample_enqueue_plugin_admin_style');チェックボックス用のスタイルコードを追加
追加した「admin-style.css」へ以下のスタイルコードを追加します。
/***** チェックボックス *****/
/* 外枠 */
input[type="checkbox"].wppd-ui-toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
width: auto;
height: auto;
vertical-align: middle;
position: relative;
border: 0;
outline: 0;
cursor: pointer;
margin: 0 4px;
background: none;
box-shadow: none;
}
input[type="checkbox"].wppd-ui-toggle:focus {
box-shadow: none;
}
/* 無効化時の文字列の位置 */
input[type="checkbox"].wppd-ui-toggle:after {
content: '';
font-size: 16px;
font-weight: 400;
line-height: 20px;
text-indent: 12px;
color: #ffffff;
width: 60px;
height: 22px;
display: inline-block;
background-color: #a7aaad;
border-radius: 72px;
box-shadow: 0 0 12px rgb(0 0 0 / 15%) inset;
}
/* 無効化時の文字列の位置 */
input[type="checkbox"].wppd-ui-toggle:checked:after {
text-indent: -14px;
}
/* 無効化時の〇印 */
input[type="checkbox"].wppd-ui-toggle:before {
content: '';
width: 18px;
height: 18px;
display: block;
position: absolute;
top: 2px;
left: 2px;
margin: 0;
border-radius: 50%;
background-color: #ffffff;
}
/* 有効化時の〇印 */
input[type="checkbox"].wppd-ui-toggle:checked:before {
left: 40px;
}
/* 有効化時の文字列 */
input[type="checkbox"].wppd-ui-toggle:checked:after {
content: 'ON';
background-color: #04ab04;
}
/* 無効化時の文字列 */
input[type="checkbox"].wppd-ui-toggle:after {
content: 'OFF';
background-color: #a7aaad;
}
/* 有効化・無効化時の遅延処理 */
input[type="checkbox"].wppd-ui-toggle,
input[type="checkbox"].wppd-ui-toggle:before,
input[type="checkbox"].wppd-ui-toggle:after,
input[type="checkbox"].wppd-ui-toggle:checked:before,
input[type="checkbox"].wppd-ui-toggle:checked:after {
transition: ease .15s;
}チェックボックスの入力項目にCSSクラスを付与する
プラグイン設定画面のチェックボックスは、以下のような感じになっていると思います。
「思います」としているのは、いろいろな記述方法があるためですので、自身のコードをよく読解してから作業を行ってください
<input name="$name" type="checkbox" id="$id" value="1" <?php checked( '1', get_option( '$option_name' ) ); ?> />上記のチェックボックス用コードに以下のCSSクラス（赤文字部分）を追加します。
<input name="$name" class="wppd-ui-toggle" type="checkbox" id="$id" value="1" <?php checked( '1', get_option( '$option_name' ) ); ?> />既にCSSクラスが存在する場合には「 wppd-ui-toggle」というクラスのみ追加してください
終わったら、クラスを追加した部分のプラグイン設定画面を開き、スイッチ風になっているかを確認します。
CSSクラスの追加は、まず一部のチェックボックス項目に対してテスト的に追加し、表示が変わるかを確認してからすべてに．．という手順で行うと間違いないでしょう
スイッチ風にならない場合には、一度ブラウザキャッシュをクリアしてみます（設定画面を表示した状態で、キーボードの「Ctrl」＋「F5」）。それでもスイッチ風にならない場合は、以下の点を確認してください。
- プラグイン設定画面用のスタイルシートは読み込まれているか？
- チェックボックス項目へのCSSクラス付与に間違いはないか？
プラグイン設定画面用のスタイルシートが読み込まれているかは、以下の方法で確認できます。
- 設定画面を表示させ、デベロッパーツールを起動します（キーボードの「F12」）
- 出てきた画面の「ネットワーク」タブをクリックします
- 設定画面を再読み込みします
- フィルタ欄にある「CSS」をクリックします
- 追加したIDを持つスタイルシートが存在し、ステータスが200になっているかを確認します
本ページの実装方法については「On/Off Toggle Replacement for WordPress Checkboxes」はを参考にさせていただきました。
