WordPress管理画面に読み込まれるJavaScriptとCSSの設定

Create：2022-06-20

Update：2022-09-16

Category：WordPressサイト毎の設定

Series：WordPressサイト毎の設定

[ Version.19 ]

［Series］WordPressサイト毎の設定

概要

WordPress管理画面でルーティングや権限により、読み込まれるJavaScript、CSSを設定

functions.php には設定値のみ記載して functions_setup.php に記述しinclude。

JavaScriptやCSSは別途テーマ内の asset ディレクトリに配置。

functions.php

設定定数「WPADMIN_JSCSS」をfunctions.phpに記載します。

const WPADMIN_JSCSS = [
	'css' => [
		[
			'user' => 'all',
			'post_type' => 'all',
			'fname' => 'admin_all.css'
		],
		[
			'user' => 'all',
			'post_type' => 'all',
			'fname' => 'admin_wp55_adjust.css'
		],
		[
			'user' => 'user',
			'post_type' => 'all',
			'fname' => 'admin_user_common.css'
		],
		[
			'user' => 'user',
			'post_type' => 'page',
			'fname' => 'admin_user_page.css'
		],
	],
	'js' => [
		[
			'user' => 'user',
			'post_type' => 'all',
			'fname' => 'admin_user_common.js'
		],
		[
			'user' => 'user',
			'post_type' => 'page',
			'fname' => 'admin_user_page.js'
		],
		[
			'user' => 'all',
			'post_type' => 'news',
			'fname' => 'admin_user_news.js'
		],
		[
			'user' => 'all',
			'post_type' => 'all',
			'fname' => 'admin_menu_current.js'
		],
	]
];
include_once 'xxx/functions_setup.php';

user

下記から選択

all　※ 全ユーザー
user　※ 管理者を除くユーザー
数値（user->id）　※ 特定ユーザー

post_type

カスタム投稿タイプslug、page、post から選択

fname

asset ディレクトリ以下のファイル名

functions_setup.php

add_action('admin_head', function () {
	global $post_type;
	$arr = WPADMIN_JSCSS;
	$current_user_id = get_current_user_id();
	$tag = '';
	foreach ($arr as $k => $v) {
		foreach ($v as $kk => $vv) {
			if (
				// user
				(
					$vv['user'] === 'all'
					||
					($vv['user'] === 'user' && !current_user_can('manage_options'))
					||
					in_array($current_user_id, explode(',', $vv['user']))
				)
				&&
				// post_type
				(
					$vv['post_type'] === 'all'
					||
					$vv['post_type'] === $post_type
					||
					(isset($_GET['taxonomy']) && $_GET['taxonomy'] === $vv['post_type'])
				)
			) {
				if ($k === 'css') {
					$tag .= '<link rel="stylesheet" href="' . get_bloginfo('template_directory') . '/wpoo/asset/' . $vv['fname'] . '" type="text/css" media="screen">' . "\n";
				} elseif ($k === 'js') {
					$tag .= '<script src="' . get_bloginfo('template_directory') . '/wpoo/asset/' . $vv['fname'] . '"></script>' . "\n";
				}
			}
		}
	}
	echo $tag;
});

管理画面で読み込まれるCSS

admin_all.css

WordPress管理画面のサイドメニュー設定に記載しているダッシュボード設定はこちらと連動しています。

advanced_custom_fields_pro で管理画面内に表示される画像サイズやカテゴリの入力欄もあわせて調整しています。

/* ダッシュボード：一覧メニュー */
ul.oo_dashboard_navi {
	display: flex;
	flex-wrap: wrap;
	margin: 12px 0 0;
	width: 100%;
}
ul.oo_dashboard_navi * {
	box-sizing: border-box;
}
ul.oo_dashboard_navi li {
	flex-basis: 100%;
}
@media screen and (min-width: 600px) {
	ul.oo_dashboard_navi li {
		flex-basis: 50%;
	}
}
@media screen and (min-width: 960px) {
	ul.oo_dashboard_navi li {
		flex-basis: 33.3%;
	}
}
ul.oo_dashboard_navi li.separate {
	flex-basis: 100%;
	margin: 30px 0 10px;
	padding: 0 20px 10px;
	border-bottom: 1px dashed #ddd;
	font-weight: bold;
}
ul.oo_dashboard_navi li a {
	box-sizing: border-box;
	display: block;
	margin: 2%;
	padding: 8%;
	border-radius: 5px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	text-align: center;
	font-weight: bold;
	color: #fff;
}
ul.oo_dashboard_navi li a:hover {
	opacity: 0.85;
}

/* ダッシュボード ラップの自動伸縮解除 */
#wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container {
	width: 100% !important;
}

/* 投稿：acf 画像表示サイズ */
.has-value .image-wrap img {
	width: 160px;
	height: 120px;
	object-fit: contain;
}

/* 投稿：カテゴリ入力欄*/
.categorydiv div.tabs-panel {
	max-height: none;
}
.form-field.term-name-wrap > p,
.form-field.term-slug-wrap > p,
.form-field.term-parent-wrap > p,
.form-field.term-description-wrap,
.categorydiv .category-tabs,
.categorydiv div[id$='-adder'] {
	display: none !important;
}

/* サイドメニューの区切り線 */
.wp-menu-separator {
	border-bottom: 1px solid #555;
}

admin_wp55_adjust.css

WordPress version 5.5から管理画面に表示される余白を削除（6.0でも継続利用）

#adminmenuback {
    bottom: 0;
}
.php-error #adminmenuback,
.php-error #adminmenuwrap {
	margin-top: 0;
}

admin_user_common.css

クリックしていただきたくない箇所や編集不可の箇所は非表示に。

管理画面は「No Manual！No Rule！」

advanced_custom_field_pro でuser_disabledクラスを付与した箇所は、管理者のみ編集可。

#wp-admin-bar-wp-logo,
#wp-admin-bar-my-sites,
#wp-admin-bar-edit-profile,
#wp-admin-bar-comments,
#wp-admin-bar-new-content,
#wp-admin-bar-edit,
#contextual-help-link-wrap,
#menu-comments,
#menu-settings,
#menu-users,
#content-html,
#content-tmce,
#adv-settings .metabox-prefs,
#preview-action,
#wpfooter,
#menu-posts {
	display: none !important;
}

/* acf : user_disable
	ユーザー編集の制御
*/
.user_disabled label:not(.acf-label) {
	pointer-events: none;
	color: #999;
}
.user_disabled input[type="radio"],
.user_disabled input[type="checkbox"],
.user_disabled select {
	pointer-events: none;
}
.user_disabled input[type="text"],
.user_disabled input[type='email'],
.user_disabled input[type^='tel'],
.user_disabled input[type='url'],
.user_disabled input[type='search'],
.user_disabled input[type='search'],
.user_disabled input[type^='num'],
.user_disabled input[type='number'],
.user_disabled input[type='date'],
.user_disabled input[type='datetime'],
.user_disabled input[type='month'],
.user_disabled input[type='week'],
.user_disabled input[type='time'],
.user_disabled input[type='password'] {
	pointer-events: none;
	color: #999;
	background-color: #eee;
}

admin_user_page.css

固定ページでもクリックしていただきたくない箇所や編集不可の箇所は非表示に。

ここでも「No Manual！No Rule！」

.add-new-h2,
.page-title-action,
#pageparentdiv,
#edit-slug-buttons,
#minor-publishing-actions,
#misc-publishing-actions,
#delete-action,
#titlediv {
	display: none !important;
}

管理画面で読み込まれるJavaScript

admin_user_common.js

※ 現在使用していません。

admin_user_page.js

管理画面として設定された固定ページのタイトルは編集できないようにしています。

(function ($) {
	function titleReflection() {
		$('#title').attr('disabled', 'disabled');
	}
	$(function () {
		titleReflection();
	});
})(jQuery);

admin_user_news.js

カスタムフィールドの textarea に入力されたお知らせをそのままタイトルとして保存

(function ($) {
	const acfTitleField = '#acf-field_' + '50x0x0x0x0x0x';
	function titleReflection() {
		// event
		$(document).on('change', acfTitleField, function () {
			$('input#title').val($(this).val());
		});
		// init
		$('#titlediv').hide();
	}
	$(function () {
		titleReflection();
	});
})(jQuery);

admin_menu_current.js

管理画面のサイドメニューで現在表示されているページの調整。

こちらは、WordPress管理画面のサイドメニュー設定と連動しています。

(function ($) {
	/* var */
	const pathInUrl = window.location.href.match('.+/(.+?)?$')[1];
	function setup() {
		let $adminMenu = $('#adminmenu');
		$adminMenu.find('.wp-submenu > li > a').each(function () {
			if ($(this).attr('href') === pathInUrl) {
				$(this).addClass('current').parent('li').addClass('current');
				$(this).closest('.wp-submenu').closest('li').removeClass('wp-not-current-submenu').addClass('wp-has-current-submenu').addClass('wp-menu-open').children('a').removeClass('wp-not-current-submenu').addClass('wp-has-current-submenu').addClass('wp-menu-open');
			}
		});
	}

	$(function () {
		setup();
	});
})(jQuery);