管理画面のチェックボックスをトグルボタンに変える方法

WordPressの管理画面ってなんだか素っ気ないですよね。チェックボックスをトグルに変えて少しでも華やかになるようにするコード例です。

以下のような感じで表示されるようになります。

※上図のスタイルは以下の方法で背景画像なども設定しています。

管理画面のチェックボックスをトグルボタンに変えるコード

以下のコードを追加するだけで、WordPress標準の設定などにあるチェックボックスがトグルボタンに変わります。

function pwcn_admin_toggle_design_init(){
?>
<style>
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;

</style>
<?php
}
add_action('admin_head','pwcn_admin_toggle_design_init');

function pwcn_change_admin_checkbox_to_toggle(){
?>
<script>
jQuery(function () {
	/* 設定 */
	/* options-general */
	jQuery('#users_can_register').addClass('wppd-ui-toggle');
	/* options-reading */
	jQuery('#blog_public').addClass('wppd-ui-toggle');
	/* options-discussion */
	jQuery('#default_pingback_flag').addClass('wppd-ui-toggle');
	jQuery('#default_ping_status').addClass('wppd-ui-toggle');
	jQuery('#default_comment_status').addClass('wppd-ui-toggle');
	jQuery('#require_name_email').addClass('wppd-ui-toggle');
	jQuery('#comment_registration').addClass('wppd-ui-toggle');
	jQuery('#close_comments_for_old_posts').addClass('wppd-ui-toggle');
	jQuery('#show_comments_cookies_opt_in').addClass('wppd-ui-toggle');
	jQuery('#thread_comments').addClass('wppd-ui-toggle');
	jQuery('#page_comments').addClass('wppd-ui-toggle');
	jQuery('#comments_notify').addClass('wppd-ui-toggle');
	jQuery('#moderation_notify').addClass('wppd-ui-toggle');
	jQuery('#comment_moderation').addClass('wppd-ui-toggle');
	jQuery('#comment_previously_approved').addClass('wppd-ui-toggle');
	jQuery('#show_avatars').addClass('wppd-ui-toggle');
	/* options-media */
	jQuery('#thumbnail_crop').addClass('wppd-ui-toggle');
	jQuery('#uploads_use_yearmonth_folders').addClass('wppd-ui-toggle');

	/* ツール */
	/* export-personal-data */
	jQuery('#send_confirmation_email').addClass('wppd-ui-toggle');
});
</script>
<?php
}
add_action('admin_head','pwcn_change_admin_checkbox_to_toggle');

やっていることは、wppd-ui-toggleというクラスの付いた要素にスタイルを反映させるという単純なもの。

結構簡単にトグル化できるんですね。