【WordPress】管理バーが消える(上部の黒いバー)

WEBデザイナーの桑島です。
WordPress関連を本日も書かせていただきます。

WordPressで管理バーが消える(上部の黒いバー)現象です。

WordPressはログインした状態でサイトを見ると、上部に管理バーという
黒い帯が表示され、WordPressの管理メニューが表示されます。

このサイトで言えばこんな感じ↓

CMSでサイトを作る目的って修正や更新を簡単にスピーディーにできる事なので
このバーがあると便利。
しかし…表示されない!と言う現象が。


ちなみに一般的に、上部の管理バーが表示されない場合

・head.phpに wp_head() の記載がない
・footer.phpに wp_footer()の記載がない
・管理画面 → ユーザー → 「サイトを見るときにツールバーを表示する」チェック無
・ログアウトして、ログインすると解消
・キャッシュのクリアーで解消

と、されています。
参考サイト/bl6.jp http://bl6.jp/web/wordpress/hide-toolbar-wp/

これら全てクリアーしているけど
上部の管理バーが表示されない!!誰か助けて~~

今日はそんな方のへの記事です。

管理バーが出なくなったサイトの環境

・ドメインの1つ下のフォルダにWPはインストール

・同サーバでテスト構築→ドメイン直下で本番化
 (リニューアルの為、旧WPとは別にWPをインストール)

・オリジナルテンプレート作成

・サーバーはさくら様

・管理画面(wp-admin直下)、404ページは管理バーが表示される

・テスト構築の時は、管理バーは正常表示されていた

管理バー(ツールバー)が表示されているかどうかを確認する 

そもそも、管理バーはデフォルトでは表示される機能。
そこで、管理バーを出力するスクリプトは動作しているのか?を調べる方法として

functions.phpにスクリプトを記載して確認します。

<?php
add_filter( ‘show_admin_bar’, ‘my_adminbar_setting_check’ );
function my_adminbar_setting_check( $adminbar ) {
  var_dump( $adminbar );
  return $adminbar;
}
var_dump( is_admin_bar_showing() );
?>

実行するとサイトの上部に確認のプログラムが吐き出されます

管理バーを出力するスクリプトが正常な場合
bool(true) bool(true) bool(true)

管理バーを出力するスクリプトが出力されてない場合
bool(false)bool(false)bool(false)

私の場合は bool(false)bool(false)bool(false) でした。
完全に動作していない。

ちなみに、管理バーを出力するスクリプトは
wp-includes/admin-bar.php
に格納されており、サーバー上にはありました。

functions.phpにスクリプトを書いて管理バーを出力しよう!

私は正直、調べたり、検証に私はかなり時間がかかりました。
管理バーを出力するデフォルトのスクリプトが出力されていないなら
functions.phpで管理バーを表示して、必要な管理メニューを作るコトが
一番早い解決方法だと思います。

functions.phpに管理バーを追加する手順

①管理バーの黒いエリアを表示

②必要なメニューを作成
(私の場合は「管理画面」「固定・投稿新規作成」「このページを編集」)

③管理画面(ダッシュボード)では自作の管理バーのメニューを非表示
(自作のメニュー項目がデフォルトメニューと重複するので)

①管理バーの黒いエリアを表示

functions.phpに下記を追加

add_filter( ‘show_admin_bar’, ‘__return_true’ );

ちなみに
add_filter( ‘show_admin_bar’, ‘__return_false’ );だと黒い帯が非表示になります

②必要なメニューを作成

functions.phpに下記を追加

function header_add(){

//表示ページ編集のフック
global $wp_admin_bar;
$get_page_id =get_the_ID();

//管理画面
$wp_admin_bar->add_menu( array(
‘id’ => ‘admint’,
‘title’ => ‘<span class=”edit-bar”>【管理画面】</span>’,
‘href’ => admin_url( ”)
));

//投稿ページ新規作成
$wp_admin_bar->add_menu( array(
‘id’ => ‘new_blog’,
‘title’ => ‘<span class=”edit-bar”>【投稿ページ新規作成】</span>’,
‘href’ => admin_url( ‘post-new.php’),
));

//固定ページ新規作成
$wp_admin_bar->add_menu( array(
‘id’ => ‘new_post’,
‘title’ => ‘<span class=”edit-bar”>【固定ページ新規作成】</span>’,
‘href’ => admin_url( ‘post-new.php?post_type=page’)
));
//このページを編集
$wp_admin_bar->add_menu( array(
‘id’ => ‘custom_update’,
‘title’ => ‘<span class=”edit-bar”>【このページを編集】</span>’,
‘href’ => admin_url(‘post.php?post=’.$get_page_id.’&action=edit’)
));

}
add_action( ‘wp_before_admin_bar_render’, ‘header_add’, 1000 );

qiita.com
https://qiita.com/konweb/items/e84209922c6d830f627a

メニューの追加は上記が参考にしました。

【このページを編集】のメニューは、URLが固定されないため
表示ページ編集のフックを$get_page_idを噛ませて、表示ページのIDを取得します。

また、「③管理画面(ダッシュボード)では自作の管理バーのメニューを非表示」
を実行するために
‘title’ =>は <span class=”edit-bar”></span>を入れておきます。

③管理画面(ダッシュボード)では自作の管理バーのメニューを非表示

管理画面(ダッシュボード)は、
テンプレート内の style.css を読み込んでいません。
そもそも、テンプレートのhead.phpを読み込んでないのです。
なので、functions.php側でCSSを追加します。

functions.phpに下記を追加

function custom_admin_style() {
?><style>
.edit-bar{display:none;}
</style><?php
}
add_action( ‘admin_head’, ‘custom_admin_style’ );

custom_admin_style() は管理画面のCSSに反映されます。
WPで作成したサイトには反映されず
コレで管理画面では自作の管理バーメニューは非表示になります。

functions.phpに追加する全部のスクリプトはコレ

//管理バーを常に表示する
//===========================================add_filter( ‘show_admin_bar’, ‘__return_true’ );

// 管理メニュー追加
//===========================================

function header_add(){

//表示ページ編集のフック
global $wp_admin_bar;
$get_page_id =get_the_ID();

//管理画面
$wp_admin_bar->add_menu( array(
‘id’ => ‘admint’,
‘title’ => ‘<span class=”edit-bar”>【管理画面】</span>’,
‘href’ => admin_url( ”)
));

//投稿ページ新規作成
$wp_admin_bar->add_menu( array(
‘id’ => ‘new_blog’,
‘title’ => ‘<span class=”edit-bar”>【投稿ページ新規作成】</span>’,
‘href’ => admin_url( ‘post-new.php’),
));

//固定ページ新規作成
$wp_admin_bar->add_menu( array(
‘id’ => ‘new_post’,
‘title’ => ‘<span class=”edit-bar”>【固定ページ新規作成】</span>’,
‘href’ => admin_url( ‘post-new.php?post_type=page’)
));
//このページを編集
$wp_admin_bar->add_menu( array(
‘id’ => ‘custom_update’,
‘title’ => ‘<span class=”edit-bar”>【このページを編集】</span>’,
‘href’ => admin_url(‘post.php?post=’.$get_page_id.’&action=edit’)
));

}
add_action( ‘wp_before_admin_bar_render’, ‘header_add’, 1000 );

//管理画面にスタイル追加(このページを編集非表示)
//===========================================
function custom_admin_style() {
?><style>
.edit-bar{display:none;}
</style><?php
}
add_action( ‘admin_head’, ‘custom_admin_style’ );

本当に「誰か助けて~」て叫びました。
もしどこかで、同じように叫んで時間を費やしてしまうより
サクッと解決して、作るコトを楽しんでもらえるヒントになりますように♪