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

はじめに

「フロントエンドに管理バーが表示されてデザインが崩れる」「一般ユーザーには管理バーを見せたくない」「特定のロールだけ管理バーを表示したい」——WordPressの管理バー制御はfunctions.phpの数行で実現できます。

症状・原因

管理バーはログイン中の全ユーザーにデフォルトで表示されます。購読者や顧客ロールのユーザーには不要なことが多く、またサイトのヘッダーCSSにmargin-top: 32pxが追加されてレイアウトが崩れる原因にもなります。

解決手順

ステップ1：ユーザープロフィールから管理バーを非表示にする

個人設定からの非表示手順（ユーザー自身が設定）：

1. ダッシュボード → ユーザー → プロフィール
2. 「ツールバー」セクションを確認
3. 「サイトを見るときにツールバーを表示する」のチェックを外す
4. 「プロフィールを更新」をクリック

管理者が他ユーザーの設定を変更：
1. ユーザー → ユーザー一覧
2. 対象ユーザーの「編集」をクリック
3. 同様にチェックを外して更新

ステップ2：functions.phpで全ユーザーの管理バーを非表示にする

// functions.php: 管理バーを全ユーザーで非表示
add_action( 'after_setup_theme', function() {
    show_admin_bar( false );
} );

// または show_admin_bar フィルターを使う
add_filter( 'show_admin_bar', '__return_false' );

// functions.php: ロール別に管理バーを制御
add_filter( 'show_admin_bar', function( $show ) {
    if ( ! is_user_logged_in() ) {
        return false;
    }

    $user = wp_get_current_user();

    // 管理者・編集者は表示、それ以外は非表示
    $roles_with_bar = [ 'administrator', 'editor' ];
    foreach ( $roles_with_bar as $role ) {
        if ( in_array( $role, (array) $user->roles, true ) ) {
            return true;
        }
    }

    return false;
} );

ステップ3：フロントエンドのみ管理バーを非表示にする

// functions.php: フロントエンドでのみ非表示（管理画面は維持）
add_filter( 'show_admin_bar', function( $show ) {
    if ( is_admin() ) {
        return $show; // 管理画面はそのまま
    }
    return false; // フロントエンドは非表示
} );

// functions.php: ページ種別で制御（特定ページのみ非表示）
add_filter( 'show_admin_bar', function( $show ) {
    if ( ! $show ) {
        return false;
    }

    // ランディングページ（テンプレートがpage-lp.php）では非表示
    if ( is_page_template( 'page-lp.php' ) ) {
        return false;
    }

    // WooCommerceのカート・チェックアウトページでは非表示
    if ( function_exists( 'is_cart' ) && ( is_cart() || is_checkout() ) ) {
        return false;
    }

    return true;
} );

ステップ4：CSSで管理バーを非表示にする（非推奨だが緊急時に有効）

// functions.php: 管理バーのCSSを出力しないようにする
// （show_admin_bar(false)が使えない場合の代替）
add_action( 'wp_head', function() {
    if ( ! is_user_logged_in() ) {
        return;
    }
    echo '<style>#wpadminbar { display: none !important; } html { margin-top: 0 !important; }</style>';
} );

/* style.css: CSSのみで非表示（管理バーは生成されるがDOMには残る） */
#wpadminbar {
    display: none !important;
}

/* 管理バーが追加するmargin-topを打ち消す */
html.wp-toolbar {
    padding-top: 0 !important;
}

/* レスポンシブ対応（600px以下では管理バーが自動で非表示になるため不要） */
@media screen and (max-width: 782px) {
    #wpadminbar {
        display: none !important;
    }
    html {
        margin-top: 0 !important;
    }
}

ステップ5：管理バーのメニュー項目をカスタマイズする

// functions.php: 管理バーから特定メニューを削除
add_action( 'wp_before_admin_bar_render', function() {
    global $wp_admin_bar;

    // WordPressロゴメニューを削除
    $wp_admin_bar->remove_node( 'wp-logo' );

    // コメントメニューを削除
    $wp_admin_bar->remove_node( 'comments' );

    // 新規追加メニューを削除
    $wp_admin_bar->remove_node( 'new-content' );

    // 更新通知メニューを削除（サイト管理者以外に見せない場合）
    if ( ! current_user_can( 'update_core' ) ) {
        $wp_admin_bar->remove_node( 'updates' );
    }
} );

// 管理バーにカスタムメニューを追加
add_action( 'admin_bar_menu', function( WP_Admin_Bar $wp_admin_bar ) {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }

    $wp_admin_bar->add_node( [
        'id'    => 'my-custom-link',
        'title' => 'マイツール',
        'href'  => admin_url( 'tools.php' ),
        'meta'  => [ 'class' => 'my-custom-node' ],
    ] );
}, 999 );

注意事項

• show_admin_bar( false )はafter_setup_themeフック以降で呼ぶ必要があります。functions.phpのトップレベルで直接呼ぶと期待どおりに動かない場合があります。
• CSS非表示はDOMに管理バーのHTMLが出力され続けるため、パフォーマンス上はshow_admin_bar(false)の方が優れています。管理バーのJS/CSSもエンキューされなくなります。
• show_admin_barフィルターは管理画面内のツールバーには影響しません（管理画面では常に表示されます）。

まとめ

管理バーの制御は「show_admin_bar(false)で全体非表示→show_admin_barフィルターでロール別・ページ別に切り替え→wp_before_admin_bar_renderで不要なノードを削除→admin_bar_menuでカスタムリンクを追加」の組み合わせで柔軟に対応できます。関連記事：WordPressのダッシュボードウィジェットをカスタマイズする方法、WordPressのログインページをカスタマイズする方法。