WordPressにログインした状態でサイトを表示すると、画面上部に黒い管理バーが表示されます。

管理バーには、WordPressアイコン、カスタマイズ、コメント、新規追加、SEO、検索、ユーザー名などが並びます。便利な反面、項目が多いと横幅を圧迫し、サイト確認時に見た目がごちゃついてしまうことがあります。

特に右上の「こんにちは、〇〇さん」という表示は、ユーザー名が長い場合に右側へはみ出したり、改行されて表示が崩れたりする原因になります。

この記事では、Code Snippetsプラグインを使って、WordPressの管理バーをすっきり整理する方法を紹介します。

最終的には、以下のような状態を目指します。

・WordPressアイコンを非表示にする
・カスタマイズを非表示にする
・コメントを非表示にする
・「＋ 新規」を非表示にする
・All in One SEOの「SEO」を非表示にする
・検索アイコンを非表示にする
・「こんにちは、〇〇さん」を非表示にする
・右上はユーザーアイコンだけにする
・ユーザーアイコンのプルダウンも表示しない

WordPress管理バーを整理すると見た目がすっきりする

WordPressの管理バーは、管理者にとって便利なショートカットです。

ただし、サイトのデザイン確認をしているときには、管理バーの項目が多すぎると邪魔に感じることがあります。

たとえば、以下のような状態です。

・右上のユーザー名が長くて表示が崩れる
・「こんにちは、〇〇さん」がはみ出す
・管理バーの項目が多くて見づらい
・検索アイコンやSEOメニューを普段使わない
・プレビュー時に画面上部がごちゃついて見える

管理バーそのものを完全に消す方法もありますが、ログイン中であることが分かる表示は残しておいたほうが便利です。

そこで今回は、管理バー自体は残しつつ、不要な項目だけを消して、右上にはユーザーアイコンだけを表示する形にします。

今回の完成イメージ

変更前の管理バーには、以下のような項目が表示されます。

・WordPressアイコン
・サイト名
・カスタマイズ
・コメント
・新規
・SEO
・こんにちは、〇〇さん
・検索アイコン

変更後は、以下のように整理します。

・サイト名は残す
・必要なメニューだけ残す
・右上はユーザーアイコンだけ表示する
・ユーザーアイコンにマウスを乗せてもプルダウンは出さない
・検索アイコンも消す

管理バーの余計な表示を減らすことで、サイトの見た目を確認しやすくなります。

Code Snippetsを使う理由

WordPressの管理バーをカスタマイズする方法はいくつかあります。

代表的な方法は、テーマのfunctions.phpにコードを追加する方法です。

ただし、functions.phpを直接編集すると、コードを間違えたときにサイトが真っ白になったり、管理画面に入れなくなったりする可能性があります。

そのため、初心者の場合はCode Snippetsプラグインを使う方法が安全です。

Code Snippetsを使うメリットは以下です。

・管理画面からコードを追加できる
・スニペット単位で有効化、無効化できる
・エラーがある場合に自動で無効化されやすい
・テーマを変更してもコードを管理しやすい
・functions.phpを直接編集しなくて済む

今回のような管理バーのカスタマイズは、Code Snippetsで管理すると扱いやすいです。

作業前に確認しておくこと

コードを追加する前に、以下を確認しておきます。

・WordPressに管理者権限でログインしている
・Code Snippetsプラグインが有効化されている
・以前に入れた管理バー用スニペットがあれば無効化しておく
・PHPスニペットとして追加する
・先頭に「<?php」は入れない

特に重要なのは、管理バー関連のスニペットを複数同時に有効化しないことです。

似たようなコードを複数入れていると、ユーザーアイコンが二重に表示されたり、プルダウンの位置が崩れたり、文字が一部だけ残ったりすることがあります。

管理バーを整理するコードは、1つのスニペットにまとめて管理するのがおすすめです。

Code Snippetsでスニペットを追加する手順

WordPress管理画面にログインします。

左メニューから「スニペット」を開きます。

「新規追加」をクリックします。

タイトルには、分かりやすく以下のように入力します。

管理バーをすっきり整理

コード欄に、この記事で紹介しているコードを貼り付けます。

スニペットの種類は、PHPスニペットにします。

実行場所は、サイト全体で実行を選びます。

保存して有効化します。

保存後、サイトの表側を開いて、管理バーの表示を確認します。

管理バーを整理する完成コード

以下のコードを、Code Snippetsにそのまま貼り付けます。

先頭に「<?php」は入れないでください。

// All in One SEO の管理バー「SEO」を非表示
add_filter('aioseo_show_in_admin_bar', '__return_false');


// WordPress管理バーの不要項目を非表示
add_action('admin_bar_menu', function ($wp_admin_bar) {

    // WordPressアイコンを非表示
    $wp_admin_bar->remove_node('wp-logo');

    // カスタマイズを非表示
    $wp_admin_bar->remove_node('customize');

    // コメントを非表示
    $wp_admin_bar->remove_node('comments');

    // 「＋ 新規」全体を非表示
    $wp_admin_bar->remove_node('new-content');

    // 念のため「新規投稿」も非表示
    $wp_admin_bar->remove_node('new-post');

    // 検索アイコンを非表示
    $wp_admin_bar->remove_node('search');

    // All in One SEO 系を念のため非表示
    $wp_admin_bar->remove_node('aioseo-main');
    $wp_admin_bar->remove_node('aioseo');

    // 右上の標準アカウントメニューを削除
    $wp_admin_bar->remove_node('my-account');
    $wp_admin_bar->remove_node('user-actions');
    $wp_admin_bar->remove_node('user-info');
    $wp_admin_bar->remove_node('edit-profile');
    $wp_admin_bar->remove_node('logout');

    // ユーザーアイコンだけを右上に表示
    if (is_user_logged_in()) {

        $avatar = get_avatar(get_current_user_id(), 24, '', 'ユーザーアイコン');

        $wp_admin_bar->add_node(array(
            'id'     => 'eg-user-icon-only',
            'parent' => 'top-secondary',
            'title'  => '<span class="eg-user-icon-only-wrap">' . $avatar . '</span>',
            'href'   => false,
            'meta'   => array(
                'class' => 'eg-user-icon-only'
            ),
        ));
    }

}, 9999);


// 管理画面側の表示調整
add_action('admin_head', function () {
    echo '<style id="eg-adminbar-user-icon-only-css">
#wpadminbar #wp-admin-bar-eg-user-icon-only > .ab-item {
    width: 30px !important;
    min-width: 30px !important;
    padding: 0 3px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    cursor: default !important;
    box-sizing: border-box !important;
}

#wpadminbar #wp-admin-bar-eg-user-icon-only img.avatar {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: block !important;
    float: none !important;
}

#wpadminbar #wp-admin-bar-eg-user-icon-only .ab-sub-wrapper {
    display: none !important;
}

#wpadminbar #wp-admin-bar-search {
    display: none !important;
}
</style>';
});


// サイト表示側の表示調整
add_action('wp_head', function () {
    echo '<style id="eg-adminbar-user-icon-only-css-front">
#wpadminbar #wp-admin-bar-eg-user-icon-only > .ab-item {
    width: 30px !important;
    min-width: 30px !important;
    padding: 0 3px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    cursor: default !important;
    box-sizing: border-box !important;
}

#wpadminbar #wp-admin-bar-eg-user-icon-only img.avatar {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: block !important;
    float: none !important;
}

#wpadminbar #wp-admin-bar-eg-user-icon-only .ab-sub-wrapper {
    display: none !important;
}

#wpadminbar #wp-admin-bar-search {
    display: none !important;
}
</style>';
});

コードで非表示にしている項目

このコードでは、WordPress管理バーの不要な項目を個別に非表示にしています。

WordPressアイコンを非表示

管理バー左上にあるWordPressのロゴを非表示にしています。

$wp_admin_bar->remove_node('wp-logo');

WordPressの公式メニューや関連リンクを開かない場合は、非表示にしても問題ありません。

カスタマイズを非表示

テーマカスタマイザーへのリンクを非表示にしています。

$wp_admin_bar->remove_node('customize');

普段から外観カスタマイズを使わない場合、管理バーに表示しておく必要はあまりありません。

コメントを非表示

コメントアイコンを非表示にしています。

$wp_admin_bar->remove_node('comments');

コメント機能を使っていないサイトでは、管理バーに表示されていても使う機会が少ない項目です。

「＋ 新規」を非表示

投稿や固定ページを追加するための「＋ 新規」を非表示にしています。

$wp_admin_bar->remove_node('new-content');
$wp_admin_bar->remove_node('new-post');

投稿作成は管理画面から行うことが多い場合、管理バーから消しても大きな問題はありません。

All in One SEOの「SEO」を非表示

All in One SEOを使っていると、管理バーに「SEO」という項目が表示されることがあります。

add_filter('aioseo_show_in_admin_bar', '__return_false');
$wp_admin_bar->remove_node('aioseo-main');
$wp_admin_bar->remove_node('aioseo');

SEO設定は必要なときだけ管理画面から開けばよいため、管理バーからは消しておくと見た目がすっきりします。

検索アイコンを非表示

管理バー右上に表示される検索アイコンを非表示にしています。

$wp_admin_bar->remove_node('search');

サイト表示中に管理バーから検索を使わない場合は、消しても問題ありません。

「こんにちは、〇〇さん」を非表示

標準のアカウントメニューを削除しています。

$wp_admin_bar->remove_node('my-account');
$wp_admin_bar->remove_node('user-actions');
$wp_admin_bar->remove_node('user-info');
$wp_admin_bar->remove_node('edit-profile');
$wp_admin_bar->remove_node('logout');

これにより、「こんにちは、〇〇さん」という文字や、プロフィール編集、ログアウトなどのプルダウンメニューをまとめて消しています。

ユーザーアイコンだけを表示

標準のアカウントメニューを消したうえで、ユーザーアイコンだけを新しく表示しています。

$avatar = get_avatar(get_current_user_id(), 24, '', 'ユーザーアイコン');

右上に小さなユーザーアイコンだけを表示することで、ログイン中であることは分かりつつ、管理バーの見た目をすっきり保てます。

プルダウンを表示しない理由

WordPress標準のユーザーメニューには、以下の項目があります。

・ユーザー情報
・プロフィールを編集
・ログアウト

ただ、管理バーをコンパクトにしたい場合、このプルダウンが残っていると余白が目立つことがあります。

さらに、CSSで無理に幅を縮めると、文字が途中で切れたり、メニューの位置がずれたりする原因になります。

そのため、今回はプルダウンを調整するのではなく、プルダウン自体を表示しない形にしています。

ログアウトしたい場合は、WordPress管理画面の右上メニューやログアウトURLから操作できます。日常的に管理バーのログアウトを使わない場合は、非表示にしても問題ありません。

エラーが出たときの確認ポイント

Code Snippetsでコードを保存したときに、エラーが出る場合があります。

よくある原因は以下です。

・先頭に「<?php」を入れている
・以前の管理バー用スニペットが残っている
・コードの一部だけを貼り付けている
・CSS部分をPHPの外に直接書いている
・全角記号が混ざっている
・コピー時に一部の記号が欠けている

特に、以下のようなエラーが出る場合があります。

syntax error, unexpected identifier px

これは、CSSの「24px」や「30px」などがPHPコードとして読まれているときに起こりやすいエラーです。

この記事のコードでは、CSSをechoで出力する形にしているため、Code Snippetsでも扱いやすくしています。

エラーが出た場合は、コードを部分的に修正するよりも、スニペット全体を削除して、完成コードを丸ごと貼り直すほうが安全です。

表示が崩れる場合の確認ポイント

コードを入れたあとに表示が崩れる場合は、以下を確認してください。

・管理バー関連のスニペットが複数有効になっていないか
・以前のCSSが残っていないか
・キャッシュ系プラグインが影響していないか
・ブラウザのキャッシュが残っていないか
・テーマ側で管理バーを独自に調整していないか

特に多いのは、過去に追加したスニペットが残っているケースです。

「こんにちは、〇〇さん」を消すコード、プルダウンを縮めるCSS、検索アイコンを消すCSSなどを別々に入れていると、処理が重複して崩れやすくなります。

管理バーのカスタマイズは、1つのスニペットにまとめるのが安定します。

ユーザーアイコンをクリックできるようにしたい場合

今回のコードでは、ユーザーアイコンは表示だけにしています。

'href' => false,

クリックしてプロフィール編集画面へ移動させたい場合は、以下のように変更します。

'href' => get_edit_profile_url(get_current_user_id()),

ただし、クリックできるようにすると、見た目はアイコンだけでもリンクとして動作します。

完全に飾りとして表示したい場合は、hrefをfalseのままにしておくとよいです。

ログアウトだけ残したい場合

プルダウンは不要でも、ログアウトだけは残したい場合もあります。

その場合は、今回のように右上をアイコンだけにするのではなく、ログアウト専用のリンクを別で作る方法もあります。

ただし、管理バーをすっきり見せる目的であれば、ログアウトは管理画面側から行う運用にしたほうがシンプルです。

サイト表示時の管理バーは、あくまで確認用として最低限の表示にするのがおすすめです。

管理バーを整理するときの注意点

管理バーを整理すると、画面上部はかなり見やすくなります。

ただし、消しすぎると操作が不便になる場合もあります。

たとえば、以下の項目をよく使う場合は、非表示にしないほうがよいこともあります。

・新規投稿
・固定ページを編集
・カスタマイズ
・プロフィール編集
・ログアウト

今回のコードは、サイト確認時の見た目を優先した整理方法です。

管理画面での作業効率を重視する場合は、よく使う項目だけ残す形に調整すると使いやすくなります。

記事を分ける場合の構成案

この内容をブログ記事として分ける場合は、以下の2記事に分けると読みやすくなります。

WordPress管理バーの不要項目を非表示にする方法

扱う内容は、WordPressアイコン、カスタマイズ、コメント、新規追加、SEO、検索アイコンを消す方法です。

初心者向けに、管理バーの基本とCode Snippetsの使い方を中心に説明すると分かりやすくなります。

WordPress管理バーの「こんにちは、〇〇さん」を消してユーザーアイコンだけにする方法

扱う内容は、右上のユーザー名表示を消す方法、プルダウンを消す方法、ユーザーアイコンだけ残す方法です。

今回のように、表示崩れや余白の問題まで含めて解説すると、実際に困っている読者に届きやすい記事になります。

1本の記事にまとめる場合は、今回のように「管理バー全体の整理」として書くと自然です。

まとめ

WordPressの管理バーは便利ですが、項目が多いとサイト確認時に見づらくなることがあります。

特に「こんにちは、〇〇さん」の表示は、ユーザー名が長い場合に右側へはみ出したり、改行されたりして、見た目が崩れる原因になります。

Code Snippetsを使えば、functions.phpを直接編集せずに、管理バーの不要な項目を安全に非表示にできます。

今回のコードでは、以下の項目を整理しました。

・WordPressアイコン
・カスタマイズ
・コメント
・新規追加
・All in One SEOのSEO表示
・検索アイコン
・こんにちは、〇〇さん
・ユーザーアイコンのプルダウン

右上にはユーザーアイコンだけを残すため、ログイン中であることは分かりつつ、管理バー全体をすっきり見せることができます。

管理バーの表示崩れを防ぎたい場合は、複数のスニペットに分けず、1つのスニペットにまとめて管理することが大切です。