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.js
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});
        }
    })
});


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

좋은 웹페이지 즐겨찾기