ダッシュボードに任意のウィジェット(パネル)を追加する方法

公開日:2022(令和4)年11月7日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



自作のクラシックエディタをずっと使ってきたサイトで重宝していた、管理画面のダッシュボードに任意のウィジェットを追加できる「Dashboard Widget Sidebar」というプラグイン。

例えば他のウェブサービスのページや、管理している他のサイトの管理画面へのリンクなどを登録しておいて、ブラウザのブックマークではなく、サイトのダッシュボードから簡単に呼び出せるので、本当に便利に使っていました。

でも、このプラグインは長い間更新されていない(といっても現在も元気に動作します)ので、完全にクラシックテーマでのみ使用できます。

これはTT2のようなブロックテーマが、そもそもウィジェットエリア及びウィジェットという概念を持っていないので仕方のないことですが、今まで重宝してきただけに、この機能がないのは個人的に管理しにくいと感じていました。

そこで、プラグインでダメなら自前で用意すればいい!ということで、本ページでは、WordPressのダッシュボードに独自のウィジェット(パネル)を追加する基本コードを紹介します。

結構簡単なコードで、任意のダッシュボードウィジェットが作れ、前述したような便利リンクなどが簡単に作れるようになるので、参考にしてみてください。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

独自のダッシュボードウィジェットを追加するコード

基本となるのは以下のコードです。有効化しているテーマ(子テーマ推奨)のfunctions.phpへ以下を追加すると、ダッシュボードに「ウィジェットのタイトル」という中身のないウィジェットが追加されますからまずは試してみるといいでしょう。

/***** ダッシュボードへウィジェットを表示 *****/
/* ウィジェットに表示する内容 */
if ( !function_exists( 'sample_admin_info_widget' ) ){
function sample_admin_info_widget() {
$content = '
ここに表示する内容をHTMLやphpで記述
';

echo $content;
}
}

/* ウィジェットの内容を含むウィジェットを追加する */
if ( !function_exists( 'sample_add_dashboard_info_widget' ) ){
function sample_add_dashboard_info_widget() {
	$info_dash_header = __('ウィジェットのタイトル','');
	wp_add_dashboard_widget( 'sample_admin_info_widget', $info_dash_header , 'sample_admin_info_widget' );
}
}

add_action( 'wp_dashboard_setup', 'sample_add_dashboard_info_widget' );

コードの解説

流れを簡単に説明すると、前半のユーザー定義関数(sample_admin_info_widget)の内容を、後半のユーザー定義関数(sample_add_dashboard_info_widget)を使ってダッシュボード内に出力しているというものです。

つまり、「sample_admin_info_widget」と「sample_add_dashboard_info_widget」の組み合わせを変更すれば、いくつでも独自のウィジェットを管理画面のダッシュボードへ表示させることができるのです。

コード中の「ウィジェットのタイトル」の部分はウィジェットを閉じた時にも表示される表題になりますから、適当なタイトルへ変更しましょう。

また、コード前半の「ここに表示する内容をHTMLやphpで記述」の部分へHTMLやPHPを記述すれば、その内容が表示されますから、上記コードをコピペしたら以下をその部分へ追加して確認してみると動作が分かると思います。

<p>ウィジェットの中身</p>

使用しているフックなど

本ページの機能についてはWordPress標準で用意されているフックを使っていますので、詳しく知りたい方は以下のリンク先ページ(公式)をご覧ください。


全くの余談ですが、このページは、WordPressをバージョン6.1へ更新してから初の投稿になります。

噂では6.1.1で修正される予定らしいですが、エディタ内に表示されるブロック追加ボタンが出たり出なかったり、ブロック選択画面の「×」をクリックしても画面が消えなかったり(右のサイドバー?を出すと消える)して少々使いにくくなってますね。

使い慣れてしまうと本当に便利なブロックエディターですが、多分今後もバージョンが変わるたびにいろいろな変更や不具合が出て都度修正となっていくのでしょうね。

QA Analytics QA Analytics

ウィジェットエリアを追加したいときは

ここまでは管理画面のダッシュボードへエリアを追加し、単独のウィジェットを表示させる方法を紹介してきましたが、後のメンテナンスをすべてテーマのfuncitons.phpで行う必要があってちょっと不便ですね。

そこで、クラシックテーマでは標準のウィジェット設定画面を使って、自由に変更できる「ウィジェットエリア」を追加する方法を以下のページで紹介しています。

Twenty Twenty-Twoのようなブロック形式のテーマでも「外観」メニューに、今まで表示されていなかった「ウィジェット」というメニューが追加され、設定できるようになっていますので、クラシック・ブロック両方のテーマで利用可能です。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Block Theme Customize | Personal WP Customization Notes (PWCN)
ブロックテーマでサイトの背景画像を設定する5つの方法