このブログはWordPressテーマ「THE SONIC」を使用しています

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

3 min

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

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

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

この記事のコンテンツ

プログラムコード

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

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

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

ご注意

こちらのカスタマイズは、テーマの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で見たときのみ表示されるようになっていますので、閲覧者に見られる心配はありません。

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

こいつを

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');
  }
}

こうする!

add_action( 'wp', 'kjk_check_admin' );
function kjk_check_admin() {
  if ( current_user_can( 'administrator' ) ) {
    add_action('wp_footer', 'kjk_toggle_adminbar');
  }
}
未経験からITエンジニアになりました!

今までは趣味としてプログラミングを独学してきたけど、やっぱりこれを仕事にしたい……!

そう思い立ったはいいものの、世間の情勢などもあり未経験でのエンジニア職の中途採用が絶望的な状況

大手転職エージェントを通して何社も面接を受けては落ちてを繰り返し、諦めかけていたのですが……。

気分転換で登録した転職サービスで、とある企業から内定をいただくことができました

同じように未経験からITエンジニアを目指している方へ、どんなに厳しくても可能性がゼロではないことを伝えたい。

ポイントは、IT業界に精通した転職サービスを利用すること。
これだけで少なくとも面接へ進める可能性がグッと高くなります。

あなたがもしIT特化の転職サービスに未登録で苦しんでいるなら、ぜひ利用してみてください。きっと可能性が広がりますよ!

\無料のIT系転職サービス/

/優良案件がたくさん\

関連記事
はるしか

はるしか

ゲーム・漫画・アニメ・クルマ・ガジェットなど多趣味な雑食系で、趣味でプログラミングをポチポチしてたら本業エンジニアになってしまった人。
動物占いは子鹿。
忘れっぽい自分へのメモ代わりの記事が多めです。

FOLLOW

カテゴリー:

コメントを残す

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