WordPress 管理バーを非表示にする方法

WordPress にログインしているユーザーの管理バーは、投稿の編集やサイト キャッシュのクリアなどの一般的な機能にすばやくアクセスする便利な方法を提供します。ただし、特に新しい Web サイトを開発する場合、管理バーについて私がいつも嫌いな点が 1 つあります。それは、目立ちすぎてデザインやコンテンツに集中するのが難しくなるということです。もちろん、完全に非表示にするオプションもありますが、ページ編集への切り替えなど、基本的な機能にすばやくアクセスする必要がある場合もあります。

管理バーを完全に無効にしたい場合は、それを切り替える方法のスクリーンショットを次に示します:

簡単に切り替えられる便利さが気に入っているので、このソリューションは好きではありませんが、同時に、よりエレガントなものも必要です。私は数年前にこのチューニング方法に出会いました。そこで、さらに改良し、いくつかの調整を加えてプラグインにパッケージ化しました。元の管理バーと私の管理バーを比較してください:

デフォルトの管理バーは常に表示されます

調整された管理バーは赤い丸の下に隠れています

円の上にマウスを置くと、垂直の管理バーが表示されます

ご覧のとおり、黒いバーはありません。その代わりに小さな赤い円が表示されます (色とアイコンは変更できます)。アイコンの上にマウスを置くと、垂直 バーが表示されます。したがって、すべての重要なリンクはアクセス可能なままですが、必要になるまで非表示になります。簡潔かつ明確にしてください。

私の解決策は完璧ではありません。おそらく最大の欠点は、さまざまなプラグインの長いメニュー ヘッダーではうまく機能しない可能性があることです。私はプラグインの数を減らしているので、これは私にとっては問題ではありません。たとえば、この Web サイトでは約 7 つのプラグインのみを使用しています。

私のソリューションでは、管理バーの位置を変更するだけでなく、Web サイトのタイトルも URL アドレスに変更します。これは、非常に長いタイトルを持つ Web サイトで作業する場合に非常に便利です。通常、ドメイン名は短くなります。

インストール方法

方法 1 は、単一ファイルのプラグインを使用し、それを /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();

私は多くの Web サイトでこれを再利用しているため、最初の方法を使用する方が便利だと感じています。また、functions.php ファイルの容量も減り、私にとっては嬉しいことです。

いくつかのメモ

アイコンの変更方法

アイコンを変更するには、「wpadminbar #wp-admin-bar-site-name>.ab-item:before」要素を変更する必要があります。ダッシュアイコンから任意のアイコンを選択し、CSS の「content」プロパティを編集します。

アイコンの色を変更する方法

コードを再度入力し、`wpadminbar #wp-admin-bar-site-name>.ab-item:before` 要素の色を見つけて編集します。私にとっては、コントラストがある赤がよく似合います。

Web サイトのタイトルを管理バーに保持する方法

プラグイン ファイルまたは `functions.php` ファイルから次のコードを削除します:
`add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );`
`関数 Customize_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 中国語 Web サイトの他の関連記事を参照してください。