WordPressに独自のツールバー(Adminバー)を実装する方法
みなさんこんにちは！エンジニアの高澤です！
今回はWordPressに独自のツールバー(Adminバー)を実装する方法について解説していきたいと思います。
独自のツールバーはしばしばプラグインやテーマごとにあったりなかったりしており、ツールバーがあることによってすぐに遷移したいリンクを表示することができ回遊率が上がり、より利便性が向上する可能性があります。
ツールバーを独自に追加することはそこまで難しくなく、当記事で解説するコードを使用していただければ簡単に実装が可能ですので、よろしければお仕事などにご活用ください。
ツールバー(Adminバー)とは
ツールバー（Adminバー）とは、WordPressにログインしているユーザー（サイト運営者）にのみ画面上部に表示される便利なナビゲーションメニューのことをいいます。
画面上部に固定されており、管理画面とフロントエンドの両方で利用可能です。このツールバーを使うことで、ダッシュボード、投稿作成、テーマのカスタマイズなど、さまざまな機能に素早くアクセスすることができます。
プラグインとテーマの両方にツールバーを追加、カスタマイズすることができ、サイト運営の効率を向上させる柔軟なツールとして利用されています。
カスタマイズ次第で、HTMLで柔軟に表示内容を実装したり、サイト運営者のWordPressアカウントの権限によって表示・非表示を制御したりすることができます。
独自のツールバーを追加する方法
それでは早速、独自のツールバーを追加する方法を解説いたします。
通常のリンクテキストを表示する実装
まずはシンプルに、通常のリンクテキストを表示する実装方法について解説いたします。
テーマで実装したい方は以下のコードをfunctions.phpにコピー＆ペーストし、プラグインで実装したい方は以下のコードをプラグインを構成するいずれかのPHPファイルにコピー＆ペーストしてください。
function add_adminbar_menu() {
global $wp_admin_bar;
$wp_admin_bar->add_node(array(
'id' => 'bar_new_menu', // 任意のid
'title' => 'オリジナルのツールバー', // 表示するテキスト
'href' => 'https://example.com/' //URL
));
//サブメニュー
$wp_admin_bar->add_menu(array(
'parent' => 'bar_new_menu', // 親となるメニューid
'id' => 'new_menu_child1', // サブメニューid
'title' => 'サオリジナルのツールバーのメニュー1',
'href' => 'https://example.com/'
));
//サブメニュー
$wp_admin_bar->add_menu(array(
'parent' => 'bar_new_menu', // 親となるメニューid
'id' => 'new_menu_child2', // サブメニューid
'title' => 'サオリジナルのツールバーのメニュー2',
'href' => 'https://example.com/'
));
}
add_action('admin_bar_menu', 'add_adminbar_menu', 1500);上記コードは、WordPressのツールバー（Adminバー）に独自のメニューとそのサブメニューを追加する方法を示しています。これにより、管理者やログインユーザーが特定のページや機能に素早くアクセスできるようになります。
上記コードについて、詳しく解説いたします。
グローバル変数 $wp_admin_bar の使用
まずは最初にグローバル変数 $wp_admin_bar を定義しています。
global $wp_admin_bar;$wp_admin_bar は、WordPressのツールバーを操作するためのオブジェクトです。このオブジェクトを使用して、新しいノード（メニュー項目）を追加します。
メインメニューの追加
$wp_admin_barを定義したら、次は$wp_admin_barのadd_nodeメソッドでメインメニューを追加します。
$wp_admin_bar->add_node(array(
'id' => 'bar_new_menu', // 任意のid
'title' => 'オリジナルのツールバー', // 表示するテキスト
'href' => 'https://example.com/' // URL
));「id」は、メニューの一意の識別子。後でサブメニューを追加する際に親メニューとして参照されます。
「title」は、ツールバーに表示されるテキストです。
「href」は、メニューをクリックした際に移動するURLです。
このように、ツールバーに「オリジナルのツールバー」という新しいメニュー項目を作成します。
サブメニューの追加
メインメニューを追加したら、次は$wp_admin_barのadd_menuメソッドでサブメニューを追加します。
$wp_admin_bar->add_menu(array(
'parent' => 'bar_new_menu', // 親となるメニューid
'id' => 'new_menu_child1', // サブメニューid
'title' => 'サオリジナルのツールバーのメニュー1',
'href' => 'https://example.com/'
));「parent」は、サブメニューを紐づける親メニューのIDを指定します。この場合、先ほど追加したメインメニューのID（bar_new_menu）を指定しています。
「id」は、サブメニューごとの一意の識別子です。
「title」は、サブメニューに表示されるテキストです。
「href」は、サブメニューをクリックした際に移動するURLです。
ここでは、add_menu メソッドを使って複数のサブメニュー（メニュー1、メニュー2）をメインメニューに追加しています。
最後にここまで解説した関数を、admin_bar_menuフックで定義します。
add_action('admin_bar_menu', 'add_adminbar_menu', 1500);「admin_bar_menu」は、WordPressのツールバーをカスタマイズするためのアクションフックです。
このフックを使うことで、ツールバーに独自のメニューを追加できます。
第三引数の「1500」は、優先順位（1500）を追加するメニューの表示順を指定します。数字が大きいほど後に追加されます。
通常のリンクテキストを表示する実装後のイメージ
管理画面を開いた状態でブラウザを更新していただくと、下図の様に「オリジナルのツールバー」が追加されているのがわかるかと思います。
ホバーするとこんな感じで追加した分だけリンクテキストが表示されます。
これでツールバー（Adminバー）の実装は完了です。お疲れ様でした！
HTMLでカスタマイズして表示する実装
次は、HTMLでカスタマイズして表示する実装方法について解説したいと思います。
HTMLでカスタマイズとは、メインメニューやサブメニュー項目部分の表示をHTMLで自由にカスタマイズするをいいます。
ここで解説するサンプルコードでは、簡単にstrongタグなどを使った簡単に色をつけるなどの例になりますが、やろうと思えばグラフを表示させたり画像を表示したりできます。
下図は参考として、Imagifyプラグインのツールバーになります。ご覧のように、画像やプログレスバーを表示させています。
それでは早速、実装を進めてみたいと思います。
テーマで実装したい方は以下のコードをfunctions.phpにコピー＆ペーストし、プラグインで実装したい方は以下のコードをプラグインを構成するいずれかのPHPファイルにコピー＆ペーストしてください。
<?php
function add_adminbar_menu() {
global $wp_admin_bar;
// PHPで動的に生成するHTML
$dynamic_html = '<strong>オリジナルのツールバー</strong>';
// メインメニューを追加
$wp_admin_bar->add_node(array(
'id' => 'bar_new_menu', // 任意のid
'title' => $dynamic_html, // 動的なHTMLを渡す
'href' => 'https://example.com/' // URL
));
// サブメニューに任意のHTMLを追加
$sub_menu_html = '<div>任意の<strong style="color:orange;">HTML</strong>をここに表示</div>';
$wp_admin_bar->add_menu(array(
'parent' => 'bar_new_menu', // 親となるメニューid
'id' => 'new_menu_child', // サブメニューid
'title' => $sub_menu_html, // サブメニューに動的HTMLを渡す
'href' => '#'
));
}
add_action('admin_bar_menu', 'add_adminbar_menu', 1500);上記のコードを確認していただくとお分かりですが、「title」パラメーターに対して、事前にHTMLコードを代入している変数を指定しているかと思います。
もし動的に表示の処理をしたければ、このHTMLコードを定義している部分で何かしらの処理をする形になります。
管理画面を開いた状態でブラウザを更新していただくと、下図の様に定義したHTMLコードが追加されているのがわかるかと思います。
このようにして、ツールバーに独自のHTMLコードを追加して表示することができます。
ツールバー(Adminバー)実装の小技集
ここではツールバーの実装の小技集をご紹介したいと思います。やろうと思えばコードの書き方次第でさまざまなカスタマイズができますので、お仕事などにご活用いただけましたら幸いです。
管理画面・フロントどちらかのみ表示
管理画面もしくはWebサイトページのフロントのどちらかのみで表示させたい場合の実装方法を解説します。
管理画面のみで表示させる場合
is_admin() を使用して、管理画面でのみコードを実行するようにします。
テーマで実装したい方は以下のコードをfunctions.phpにコピー＆ペーストし、プラグインで実装したい方は以下のコードをプラグインを構成するいずれかのPHPファイルにコピー＆ペーストしてください。
function add_adminbar_menu() {
// 管理画面のみ
if (!is_admin()) {
return;
}
global $wp_admin_bar;
$wp_admin_bar->add_node(array(
'id' => 'bar_new_menu',
'title' => 'オリジナルのツールバー',
'href' => 'https://example.com/'
));
// サブメニュー1
$wp_admin_bar->add_menu(array(
'parent' => 'bar_new_menu',
'id' => 'new_menu_child1',
'title' => 'オリジナルのツールバーのメニュー1',
'href' => 'https://example.com/'
));
// サブメニュー2
$wp_admin_bar->add_menu(array(
'parent' => 'bar_new_menu',
'id' => 'new_menu_child2',
'title' => 'オリジナルのツールバーのメニュー2',
'href' => 'https://example.com/'
));
}
add_action('admin_bar_menu', 'add_adminbar_menu', 1500);フロントページのみで表示させる場合
!is_admin() を使用して、フロントページでのみコードを実行するようにします。
テーマで実装したい方は以下のコードをfunctions.phpにコピー＆ペーストし、プラグインで実装したい方は以下のコードをプラグインを構成するいずれかのPHPファイルにコピー＆ペーストしてください。
function add_adminbar_menu() {
// フロントページのみ
if (is_admin()) {
return;
}
global $wp_admin_bar;
$wp_admin_bar->add_node(array(
'id' => 'bar_new_menu',
'title' => 'オリジナルのツールバー',
'href' => 'https://example.com/'
));
// サブメニュー1
$wp_admin_bar->add_menu(array(
'parent' => 'bar_new_menu',
'id' => 'new_menu_child1',
'title' => 'オリジナルのツールバーのメニュー1',
'href' => 'https://example.com/'
));
// サブメニュー2
$wp_admin_bar->add_menu(array(
'parent' => 'bar_new_menu',
'id' => 'new_menu_child2',
'title' => 'オリジナルのツールバーのメニュー2',
'href' => 'https://example.com/'
));
}
add_action('admin_bar_menu', 'add_adminbar_menu', 1500);管理画面の特定のページのみ表示
管理画面の特定のページのみでツールバーのメニューを表示させたい場合、get_current_screen() を使用して現在のページを判別し、条件を指定することで実現できます。
以下のコードは、管理画面の「投稿一覧」ページ (edit.php) にのみツールバーのメニューを表示させる例になります。
テーマで実装したい方は以下のコードをfunctions.phpにコピー＆ペーストし、プラグインで実装したい方は以下のコードをプラグインを構成するいずれかのPHPファイルにコピー＆ペーストしてください。
function add_adminbar_menu() {
// 現在の管理画面のスクリーン情報を取得
$screen = get_current_screen();
// 特定のページ（投稿一覧: edit.php）のみ実行
if ($screen->id !== 'edit-post') {
return;
}
global $wp_admin_bar;
$wp_admin_bar->add_node(array(
'id' => 'bar_new_menu',
'title' => 'オリジナルのツールバー',
'href' => 'https://example.com/'
));
// サブメニュー1
$wp_admin_bar->add_menu(array(
'parent' => 'bar_new_menu',
'id' => 'new_menu_child1',
'title' => 'オリジナルのツールバーのメニュー1',
'href' => 'https://example.com/'
));
// サブメニュー2
$wp_admin_bar->add_menu(array(
'parent' => 'bar_new_menu',
'id' => 'new_menu_child2',
'title' => 'オリジナルのツールバーのメニュー2',
'href' => 'https://example.com/'
));
}
add_action('admin_bar_menu', 'add_adminbar_menu', 1500);get_current_screen()関数は、現在の管理画面のスクリーン情報を取得する関数です。スクリーンオブジェクトには、ページID (id) などが含まれます。
$screen->idの部分は、現在のページIDを判別するために使用します。例えば、投稿一覧ページは edit-post、固定ページ一覧は edit-page といった値になります。
以下にページごとのIDを表示にいたしました。
| 投稿一覧 | edit-post |
| 固定ページ一覧 | edit-page |
| メディアライブラリ | upload |
| プラグイン | plugins |
| ユーザー一覧 | users |
| テーマ設定 | themes |
また、複数のページで表示させたい場合は、条件に配列や in_array() を使用できます。
if (!in_array($screen->id, array('edit-post', 'edit-page'))) {
return;
}これにより、「投稿一覧」と「固定ページ一覧」の両方でメニューが表示されるようになります。
メニュー項目をループ処理で効率的に表示
メニュー項目をループ処理で効率的に表示する実装方法を解説いたします。
ここでは例として、固定ページ一覧をループ処理で表示する実装方法を解説したいと思います。
ここでのサンプルコードの様に、固定ページ（ページIDやスラッグを基に）を取得して、その編集画面へのリンクをツールバーに効率的に追加したい場合、get_pages() を使用して固定ページ一覧を取得し、ループ処理でツールバーに項目を追加できます。
テーマで実装したい方は以下のコードをfunctions.phpにコピー＆ペーストし、プラグインで実装したい方は以下のコードをプラグインを構成するいずれかのPHPファイルにコピー＆ペーストしてください。
function add_adminbar_menu() {
global $wp_admin_bar;
// 管理画面内のみ表示
if (!is_admin()) {
return;
}
// 固定ページを取得
$pages = get_pages();
// メインメニューの追加
$wp_admin_bar->add_node(array(
'id' => 'fixed_page_menu', // メインメニューID
'title' => '固定ページ編集', // メインメニュータイトル
'href' => admin_url('edit.php?post_type=page') // 固定ページ一覧のリンク
));
// 各固定ページをサブメニューとして追加
foreach ($pages as $page) {
$wp_admin_bar->add_menu(array(
'parent' => 'fixed_page_menu', // メインメニューIDを親に指定
'id' => 'edit_page_' . $page->ID, // 固有のID（ページIDを使用）
'title' => $page->post_title, // 固定ページのタイトルを表示
'href' => admin_url('post.php?post=' . $page->ID . '&action=edit') // 編集画面リンク
));
}
}
add_action('admin_bar_menu', 'add_adminbar_menu', 1500);上記コードは、get_pages()関数で取得した$pages配列をループで回し、各固定ページのタイトルと編集画面のURLをサブメニューとして登録します。
ここでの例では固定ページを取得して表示しておりますが、他にも投稿やカスタム投稿タイプなど、ループで処理できるデータであれば柔軟にカスタマイズすることができます。
まとめ
WordPressに独自のツールバー（Adminバー）を実装する方法について解説しました。
独自のツールバーを追加することで、管理画面や特定の機能へのアクセスが簡単になり、作業効率が向上します。また、リンク先を工夫することで、サイト内の回遊率アップや利便性の向上にもつながります。
今回紹介したコードを参考にすることで、手軽にカスタマイズ可能なツールバーを実装できます。ぜひ、プラグイン開発やテーマカスタマイズ、お仕事の効率化にお役立てください。
UMENOKI編集部 高澤 翔汰
お気軽に皆さんのご要望をお聞かせください！
どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！
例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など
