ツールバーをフロントエンドから表示・非表示に切り替える方法

はじめに

WordPressを使ってサイトを制作・運用していると、フロントエンド（公開画面）での表示確認をする際に画面上部のツールバーがデザインの邪魔になることがあります。

ネット上にはツールバーを画面下に移動させるカスタマイズも散見されますが、表示されたままである以上、場所が変わっても邪魔なことに変わりはありません。
しかし、ユーザー→プロフィールで完全に非表示にしてしまうと、今度は管理画面への移動が不便になってしまいます。

そこで、画面の右下に切り替えボタンを配置し、クリックするだけでツールバーの表示・非表示をいつでも切り替えられるようにします。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// ツールバーを表示
add_filter('show_admin_bar', function ($show) {
  if (!is_user_logged_in()) {
    return false;
  }

  // 表示状態をクッキーから取得
  if (isset($_COOKIE['my_admin_bar'])) {
    return $_COOKIE['my_admin_bar'] === '1';
  }

  return $show;
}, 999);


// ツールバー切り替えボタンを追加
add_action('wp_footer', function () {
  if (is_admin() || !is_user_logged_in()) {
    return;
  }

  $is_showing = is_admin_bar_showing();
  $show_val = $is_showing ? '1' : '0';
  $class = $is_showing ? 'is-on' : 'is-off';
  $text  = $is_showing ? 'ツールバー：ON' : 'ツールバー：OFF';

  ?>
  <button id="adminbar-toggle" class="<?= esc_attr($class); ?>" data-show="<?= esc_attr($show_val); ?>">
    <?= esc_html($text); ?>
  </button>
  <?php
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  if (is_admin() || !is_user_logged_in()) {
    return;
  }

  ob_start();
  ?>
  #adminbar-toggle {
    align-items: center;
    background-color: #333;
    border: none;
    border-radius: 100vmax;
    bottom: 60px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    gap: 5px;
    padding: 10px 15px;
    position: fixed;
    right: 10px;
    z-index: 999999;
  }

  #adminbar-toggle:hover {
    opacity: 0.9;
  }

  #adminbar-toggle::before {
    color: #aaa;
    content: "●";
    font-size: 20px;
  }

  #adminbar-toggle.is-on::before {
    color: #00ff66;
  }
  <?php

  $handle = 'adminbar-toggle';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());

  ob_start();
  ?>
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.getElementById('adminbar-toggle');
    if (!button) {
      return;
    }
    button.addEventListener('click', function () {
      const show = this.dataset.show === '1' ? 0 : 1;
      document.cookie = 'my_admin_bar=' + show + ';path=/;max-age=604800';
      location.reload();
    });
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});

さいごに

今回紹介した方法を使えば、WordPressのツールバーを必要に応じて瞬時にフロントエンドで切り替えることが可能になります。
「デザインを細部までチェックしたいけれど、管理画面へのアクセス性も落としたくない」という開発時やサイト運用時のジレンマを、ボタン一つで解消できます。