WordPress管理バーの表示/非表示を切り替えるカスタマイズ

WordPressにログインしていると出てくる上部のツールバー(管理バーとよく呼ばれる)、ぶっちゃけメチャクチャ邪魔!

だけどあったらあったで便利だし、必要なときだけサクッと消えてくれないかなーなんて方、ようこそいらっしゃい。

タイトル通り、ログイン中のツールバーを表示/非表示できるカスタマイズを公開します!

プログラムコード

カスタマイズ方法は大きく2通りあります。

  • FTPソフト等でファイルを編集してアップロードする
  • WordPressの管理画面上から直接編集する

どちらで行っても問題はありませんが、次の注意事項をよくご確認の上、安全に作業してください。

ご注意

こちらのカスタマイズは、テーマのfunctions.phpを編集します。

少しでも書き方を間違えるとブログの表示が真っ白になったり、壊れてしまう危険があります。

何かあった時に元に戻せるよう、作業前には必ずバックアップをとっておきましょう。

注意事項をよく確認してから、次のコードをfunctions.phpに貼り付けてください。以上!

functions.php
//アドミンバーを表示切替するよ
function kjk_toggle_adminbar() {
?>
<style>
.toggle_adminbar_btn {
  display: block;
  width: 60px;
  position: fixed;
  left: 20px;
  bottom: 60px;
  padding: 5px;
  background: #9ecfff;
  text-align: center;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 5px 10px -2px rgba(0,0,0,.2);
  z-index: 50;
  opacity: .6;
}
.toggle_adminbar_btn i {
  font-size: 30px;
  display: inline-block;
}
.toggle_adminbar_btn span {
  font-size: 11px;
  display: inline-block;
}
</style>
<script>
jQuery(function(){
  jQuery(document).on('click', '.toggle_adminbar_btn', function(){
    jQuery('#wpadminbar').toggleClass('toggle').animate( {height: 'toggle', opacity: 'toggle'}, 'nomal' );
    jQuery($(this).children('i')).toggleClass('fa-toggle-on');
    jQuery($(this).children('i')).toggleClass('fa-toggle-off');
  });
  function create_btn() {
    jQuery('.footer').after('<div class="toggle_adminbar_btn"><i class="fa fa-toggle-on" aria-hidden="true"></i><span>ToolBar</span></div>');
  }
  jQuery(window).load(function () {
    create_btn();
  });
});
</script>
<?php
}
add_action( 'wp', 'kjk_check_admin' );
function kjk_check_admin() {
  if ( current_user_can( 'administrator' ) && !wp_is_mobile() ) {
    add_action('wp_footer', 'kjk_toggle_adminbar');
  }
}

完成図

正しくカスタマイズが完了すると、画面左下あたりにボタンが追加されていると思います。

そいつをクリックしてあげると、ツールバーの表示/非表示が切り替えられるようになっているはずです!

ちなみにこの切り替えボタンは、ログイン中かつPCで見たときのみ表示されるようになっていますので、閲覧者に見られる心配はありません。

スマホでもボタン出したいよ!って方は、コードの最下部を少し改変すると表示させることもできますよ。

こいつを

functions.php
add_action( 'wp', 'kjk_check_admin' );
function kjk_check_admin() {
  if ( current_user_can( 'administrator' ) && !wp_is_mobile() ) {
    add_action('wp_footer', 'kjk_toggle_adminbar');
  }
}

こうする!

functions.php
add_action( 'wp', 'kjk_check_admin' );
function kjk_check_admin() {
  if ( current_user_can( 'administrator' ) ) {
    add_action('wp_footer', 'kjk_toggle_adminbar');
  }
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です