WordPress 관리 표시줄을 숨기는 방법

WordPress에 로그인한 사용자를 위한 관리 표시줄은 게시물 편집, 사이트 캐시 삭제 등의 일반적인 기능에 빠르게 액세스할 수 있는 편리한 방법을 제공합니다. 그러나 특히 새 웹사이트를 개발할 때 관리 표시줄에 대해 제가 항상 싫어했던 점 중 하나는 관리 표시줄이 너무 눈에 띄고 디자인과 콘텐츠에 집중하기 어렵게 만든다는 것입니다. 물론 완전히 숨길 수 있는 옵션도 있지만 때로는 페이지 편집으로 전환하는 등 일부 기본 기능에 빠르게 액세스해야 하는 경우도 있습니다.

관리 표시줄을 완전히 비활성화하려는 경우 전환 방법을 보여주는 스크린샷은 다음과 같습니다.

저는 쉬운 전환의 편리함을 좋아하기 때문에 이 솔루션을 좋아하지 않지만 동시에 좀 더 우아한 것을 원합니다. 나는 몇 년 전에 우연히 이 튜닝 방법을 발견했습니다. 그래서 저는 그것을 더 다듬고 몇 가지 수정을 거쳐 플러그인으로 패키징했습니다. 원래 관리 표시줄과 내 관리 표시줄을 비교해 보세요.

기본 관리 표시줄은 항상 표시됩니다

조정된 관리 표시줄은 빨간색 원 아래에 숨겨져 있습니다

원 위에 마우스를 올리면 수직 관리 바가 나타납니다

보시다시피 검은색 막대가 없습니다. 그 자리에는 작은 빨간색 원이 있습니다(색상과 아이콘은 변경 가능). 아이콘 위에 마우스를 올리면 세로 막대가 나타납니다. 따라서 모든 필수 링크는 액세스 가능한 상태로 유지되지만 필요할 때까지 숨겨집니다. 간결하고 명확하게 작성하세요.

제 솔루션은 완벽하지 않습니다. 아마도 가장 큰 단점은 다양한 플러그인의 긴 메뉴 헤더와 잘 작동하지 않을 수 있다는 것입니다. 플러그인 수를 적게 유지하기 때문에 이것은 나에게 중요하지 않습니다. 예를 들어, 이 웹사이트는 약 7개의 플러그인만 사용합니다.

관리 표시줄 위치를 변경하는 것 외에도 내 솔루션은 웹사이트 제목을 URL 주소로 변경합니다. 제목이 매우 긴 웹사이트에서 작업할 때 매우 편리합니다. 도메인 이름은 일반적으로 더 짧습니다.

설치방법

첫 번째 방법은 단일 파일 플러그인을 사용하여 /wp-content/plugins 폴더에 업로드하고 "플러그인" 섹션에서 활성화하는 것입니다. 내 원본 기사에서 플러그인을 다운로드할 수 있습니다: https://www.php.cn/link/bca314ed6a27eb1a7ce8434de54e3453

방법 2는 테마의 functions.php 파일에 코드를 추가하는 것입니다.

// 在管理栏中显示域名而不是网站标题
add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );
function customize_my_wp_admin_bar( $wp_admin_bar ) {
    $node = $wp_admin_bar->get_node('site-name');
    $new_site_name = preg_replace("(^https?://)", "", get_home_url() );
    $node->title = $new_site_name;
    $wp_admin_bar->add_node($node);
}

final class Kama_Collapse_Toolbar {

    public static function init(){
        add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] );
    }

    public static function hooks(){

        // remove html margin bumps
        remove_action( 'wp_head', '_admin_bar_bump_cb' );

        add_action( 'wp_head', [ __CLASS__, 'collapse_styles' ] );
    }

    public static function collapse_styles(){

        // do nothing for admin-panel.
        // Remove this if you want to collapse admin-bar in admin-panel too.
        if( is_admin() ){
            return;
        }

        ob_start();
        ?>

        <style>
            #wpadminbar {
                position: fixed !important;
                top: -32px !important;
                transition: top 0.3s ease;
            }
            #wpadminbar.expanded {
                top: 0 !important;
            }
            #wpadminbar #wp-admin-bar-site-name {
                display: none;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded {
                display: block;
            }
            #wpadminbar #wp-admin-bar-site-name .ab-item:before {
                content: "\f321"; /* Dashicons icon */
                font-family: 'dashicons';
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                color: red; /* Icon color */
                margin-right: 0.3em;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded .ab-item:before {
                display: none;
            }
        </style>

        <?php
        echo ob_get_clean();
    }
}

Kama_Collapse_Toolbar::init();

많은 웹사이트에서 재사용하기 때문에 첫 번째 방법을 사용하는 것이 더 편리하다고 생각합니다. 또한 내 functions.php 파일을 더 간결하게 만들어주는 것은 나에게 보너스입니다.

몇 가지 참고사항

아이콘 변경 방법

아이콘을 변경하려면 `wpadminbar #wp-admin-bar-site-name>.ab-item:before` 요소를 변경해야 합니다. 대시콘에서 아이콘을 선택하고 CSS에서 `content` 속성을 편집합니다.

아이콘 색상 변경 방법

코드를 다시 입력하고 `wpadminbar #wp-admin-bar-site-name>.ab-item:before` 요소의 색상을 찾아서 편집하세요. 나에게는 대비 때문에 빨간색이 잘 작동합니다.

관리바에 웹사이트 제목을 유지하는 방법

플러그인 파일이나 `functions.php` 파일에서 다음 코드를 제거하세요.
`add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );`
`functioncustom_my_wp_admin_bar( $wp_admin_bar ) {`
` $node = $wp_admin_bar->get_node('사이트 이름');`
` $new_site_name = preg_replace("(^https?://)", "", get_home_url() );`
` $node->title = $new_site_name;`
`$wp_admin_bar->add_node($node);`
`} ````

위 내용은 WordPress 관리 표시줄을 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!