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