WordPress의 멀티 사이트에서 관리 메뉴가 화면에서 눈에 띄는 문제 해결
TL;DR
WordPress의 멀티 사이트 환경에서 사이트 수가 일정 이상(화면 높이)을 넘으면 "참가 사이트"의 드롭다운 메뉴가 화면에서 넘어지는(스크롤할 수 없는) 문제를 CSS와 JS로 대응해요!
왜 썼는지
일에 상당한 수의 멀티 사이트 환경을 구축할 때, 이 문제에 부티 당해 머리를 안았기 때문에.
「아니 아니 설마… 농담을 w」라고 생각해 조사했지만, wordpress.org에서도 10년전부터 버그 취급인 채 소금 절임이 되어 있어 한층 더 머리를 안았기 때문에.
해결책
Sass의 breakpoint나 admin_enqueue_scripts의 path등은 좋다.
multisite_menu_patch.scss// メニューバー高さ
$height_menubar: 32px;
// 背景色
$background-dark: #32373c;
$background-light: #464b50;
// breakpoint
$breakpoint_pc: 783px;
@media screen and (min-width: $breakpoint_pc) {
#wp-admin-bar-my-sites {
> .ab-sub-wrapper {
overflow-y: auto;
margin-top: $height_menubar;
height: calc(100vh - #{$height_menubar});
// スクロールバー非表示
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
#wp-admin-bar-network-admin-default {
position: fixed;
background: $background-dark;
}
ul#wp-admin-bar-my-sites-list {
background-color: $background-light;
// 最下段のメニューが押下できないケースに備えpaddingを確保しておく
padding-bottom: $height_menubar !important;
li.menupop {
position: relative;
div.ab-sub-wrapper {
ul.ab-submenu {
position: fixed;
background-color: $background-light;
}
}
}
}
// サイトネットワークが1サイトしか存在しない場合
&.site_single {
height: auto;
ul#wp-admin-bar-my-sites-list {
padding-bottom: 6px !important;
}
}
}
}
}
multisite_menu_patch.jsjQuery(function ($) {
const breakpoint_pc = 783;
// サイトネットワークが1サイトしか存在しない場合
let sites = $('#wp-admin-bar-my-sites-list li.menupop').length;
if (sites === 1) {
$('#wp-admin-bar-my-sites').children('.ab-sub-wrapper').addClass('site_single');
}
// 画面幅取得
let is_pc;
$(window).on('load resize', function () {
let width = $(window).width();
if (width >= breakpoint_pc) {
is_pc = true;
} else {
is_pc = false;
}
});
// サブメニュー展開時のpositionをセット
$('#wp-admin-bar-my-sites-list > .menupop').on('hover', function () {
let top = $(this).offset().top;
let offsetTop = 6;
let subMenu = $(this).find('.ab-submenu');
if (is_pc === true) {
subMenu.offset({'top': top - offsetTop});
}
})
});
functions.php// multisite_menu_patch.css, multisite_menu_patch.jsを読み込み
function load_multisite_menu_patch() {
$path_style = 'PATH/TO/multisite_menu_patch.css';
$deps_style = array();
wp_register_style( 'multisite_menu_patch_style', $path_style, $depth_style, '1.0.0' );
wp_enqueue_style( 'multisite_menu_patch_style' );
$path_script = 'PATH/TO/multisite_menu_patch.js';
$deps_script = array('jquery');
wp_register_script( 'multisite_menu_patch_script', $path_script, $deps_script, '1.0.0' );
wp_enqueue_script( 'multisite_menu_patch_script' );
}
add_action( 'admin_enqueue_scripts', 'load_multisite_menu_patch' );
비고
WordPress.org - #15317 My Sites limited to 23 sites on Admin Bar
Reference
이 문제에 관하여(WordPress의 멀티 사이트에서 관리 메뉴가 화면에서 눈에 띄는 문제 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/zephyr7501/items/dd0967fddabd888b28c4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
일에 상당한 수의 멀티 사이트 환경을 구축할 때, 이 문제에 부티 당해 머리를 안았기 때문에.
「아니 아니 설마… 농담을 w」라고 생각해 조사했지만, wordpress.org에서도 10년전부터 버그 취급인 채 소금 절임이 되어 있어 한층 더 머리를 안았기 때문에.
해결책
Sass의 breakpoint나 admin_enqueue_scripts의 path등은 좋다.
multisite_menu_patch.scss// メニューバー高さ
$height_menubar: 32px;
// 背景色
$background-dark: #32373c;
$background-light: #464b50;
// breakpoint
$breakpoint_pc: 783px;
@media screen and (min-width: $breakpoint_pc) {
#wp-admin-bar-my-sites {
> .ab-sub-wrapper {
overflow-y: auto;
margin-top: $height_menubar;
height: calc(100vh - #{$height_menubar});
// スクロールバー非表示
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
#wp-admin-bar-network-admin-default {
position: fixed;
background: $background-dark;
}
ul#wp-admin-bar-my-sites-list {
background-color: $background-light;
// 最下段のメニューが押下できないケースに備えpaddingを確保しておく
padding-bottom: $height_menubar !important;
li.menupop {
position: relative;
div.ab-sub-wrapper {
ul.ab-submenu {
position: fixed;
background-color: $background-light;
}
}
}
}
// サイトネットワークが1サイトしか存在しない場合
&.site_single {
height: auto;
ul#wp-admin-bar-my-sites-list {
padding-bottom: 6px !important;
}
}
}
}
}
multisite_menu_patch.jsjQuery(function ($) {
const breakpoint_pc = 783;
// サイトネットワークが1サイトしか存在しない場合
let sites = $('#wp-admin-bar-my-sites-list li.menupop').length;
if (sites === 1) {
$('#wp-admin-bar-my-sites').children('.ab-sub-wrapper').addClass('site_single');
}
// 画面幅取得
let is_pc;
$(window).on('load resize', function () {
let width = $(window).width();
if (width >= breakpoint_pc) {
is_pc = true;
} else {
is_pc = false;
}
});
// サブメニュー展開時のpositionをセット
$('#wp-admin-bar-my-sites-list > .menupop').on('hover', function () {
let top = $(this).offset().top;
let offsetTop = 6;
let subMenu = $(this).find('.ab-submenu');
if (is_pc === true) {
subMenu.offset({'top': top - offsetTop});
}
})
});
functions.php// multisite_menu_patch.css, multisite_menu_patch.jsを読み込み
function load_multisite_menu_patch() {
$path_style = 'PATH/TO/multisite_menu_patch.css';
$deps_style = array();
wp_register_style( 'multisite_menu_patch_style', $path_style, $depth_style, '1.0.0' );
wp_enqueue_style( 'multisite_menu_patch_style' );
$path_script = 'PATH/TO/multisite_menu_patch.js';
$deps_script = array('jquery');
wp_register_script( 'multisite_menu_patch_script', $path_script, $deps_script, '1.0.0' );
wp_enqueue_script( 'multisite_menu_patch_script' );
}
add_action( 'admin_enqueue_scripts', 'load_multisite_menu_patch' );
비고
WordPress.org - #15317 My Sites limited to 23 sites on Admin Bar
Reference
이 문제에 관하여(WordPress의 멀티 사이트에서 관리 메뉴가 화면에서 눈에 띄는 문제 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/zephyr7501/items/dd0967fddabd888b28c4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
// メニューバー高さ
$height_menubar: 32px;
// 背景色
$background-dark: #32373c;
$background-light: #464b50;
// breakpoint
$breakpoint_pc: 783px;
@media screen and (min-width: $breakpoint_pc) {
#wp-admin-bar-my-sites {
> .ab-sub-wrapper {
overflow-y: auto;
margin-top: $height_menubar;
height: calc(100vh - #{$height_menubar});
// スクロールバー非表示
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
#wp-admin-bar-network-admin-default {
position: fixed;
background: $background-dark;
}
ul#wp-admin-bar-my-sites-list {
background-color: $background-light;
// 最下段のメニューが押下できないケースに備えpaddingを確保しておく
padding-bottom: $height_menubar !important;
li.menupop {
position: relative;
div.ab-sub-wrapper {
ul.ab-submenu {
position: fixed;
background-color: $background-light;
}
}
}
}
// サイトネットワークが1サイトしか存在しない場合
&.site_single {
height: auto;
ul#wp-admin-bar-my-sites-list {
padding-bottom: 6px !important;
}
}
}
}
}
jQuery(function ($) {
const breakpoint_pc = 783;
// サイトネットワークが1サイトしか存在しない場合
let sites = $('#wp-admin-bar-my-sites-list li.menupop').length;
if (sites === 1) {
$('#wp-admin-bar-my-sites').children('.ab-sub-wrapper').addClass('site_single');
}
// 画面幅取得
let is_pc;
$(window).on('load resize', function () {
let width = $(window).width();
if (width >= breakpoint_pc) {
is_pc = true;
} else {
is_pc = false;
}
});
// サブメニュー展開時のpositionをセット
$('#wp-admin-bar-my-sites-list > .menupop').on('hover', function () {
let top = $(this).offset().top;
let offsetTop = 6;
let subMenu = $(this).find('.ab-submenu');
if (is_pc === true) {
subMenu.offset({'top': top - offsetTop});
}
})
});
// multisite_menu_patch.css, multisite_menu_patch.jsを読み込み
function load_multisite_menu_patch() {
$path_style = 'PATH/TO/multisite_menu_patch.css';
$deps_style = array();
wp_register_style( 'multisite_menu_patch_style', $path_style, $depth_style, '1.0.0' );
wp_enqueue_style( 'multisite_menu_patch_style' );
$path_script = 'PATH/TO/multisite_menu_patch.js';
$deps_script = array('jquery');
wp_register_script( 'multisite_menu_patch_script', $path_script, $deps_script, '1.0.0' );
wp_enqueue_script( 'multisite_menu_patch_script' );
}
add_action( 'admin_enqueue_scripts', 'load_multisite_menu_patch' );
WordPress.org - #15317 My Sites limited to 23 sites on Admin Bar
Reference
이 문제에 관하여(WordPress의 멀티 사이트에서 관리 메뉴가 화면에서 눈에 띄는 문제 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/zephyr7501/items/dd0967fddabd888b28c4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)