ダッシュボードへウィジェットエリアを追加する方法|Personal WP Customization Notes (PWCN)

公開日：2023(令和5)年5月18日／最終更新日： 2023(令和5)年5月18日

先日以下のページで公開したWordPressサイトのダッシュボードへ任意のウィジェットを追加する方法、もう試されました？

この方法自体は、「WordPress admin dashboard widget」のようなキーワードで検索すると、結構いろいろなページでコードが公開されていて、私が紹介したコードも、そうした参考ページのものを実装し、検証して公開したものです。

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

実際にページを読んでいただいたら分かる通り、確かに簡単なコードで実装できていいのですが、できればこれも上記ページで紹介した「Dashboard Widget Sidebar」のようにメンテナンスが簡単にできるようにしたい、そんな思いで調べに調べてようやく実装できたのが、今回紹介するコードです。

本ページのコードを使うと、ウィジェットエリアを追加して、その中に任意のウィジェットをいくつでも配置でき、しかもWordPress標準のウィジェット管理画面でメンテナンスできるようになるので、単独ウィジェットを追加するよりも断然使い勝手が向上します。

これについてはいろいろ調べてもなかなか出てこなかったので、結構レアな手法だと思いますヨ。

本ページで紹介するコードはWordPress6.2、Twenty Twenty-Twoテーマで実装したものであり、その他のブロックテーマ及びクラシックテーマで動作するとは限りません。

本ページ掲載のコードを使用するときは

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

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

管理画面のダッシュボードへウィジェットエリアを追加する方法

必要なコードをすべてまとめたものをまずは紹介します。コードの後で各コードの役割などを説明します。

追加する全コード

有効化しているテーマのfunctions.phpへ以下のコードを追加してください。

/***** ダッシュボードへウィジェットエリアを追加 *****/
/*** ウィジェットエリアを登録 ***/
function pwcn_admin_dashboard_wiget_area_init() {
	//ウィジェットタイトル・ID・抜粋（変数化）
	$widget_area_title = __('Admin Screen','textdomain');
	$widget_area_id = 'original-dash-widget';
	$widget_area_des = __('Its Original Dashboard Widget','textdomain');

	register_sidebar(array(
		'name' => $widget_area_title,
		'id' => $widget_area_id,
		'description' => $widget_area_des,
		'before_widget' => '<div class="admin widget"><div class="widget-inner">',
		'after_widget' => '</div></div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>'
	));
}
add_action( 'widgets_init', 'pwcn_admin_dashboard_wiget_area_init');

/*** ウィジェットエリアのコールバック ***/
function pwcn_admin_dashboard_widget_area_callback(){
	//ウィジェットの内容をまとめる
	ob_start();
	dynamic_sidebar('original-dash-widget');//出力するウィジェットエリアのID
	$widget_content = ob_get_contents();
	ob_end_clean();
 
	echo $widget_content;
}

/*** ダッシュボードにウィジェットエリアを追加 ***/
function pwcn_add_admin_dashboart_widget_area(){
	//ウィジェットエリアの・ID・タイトル・コールバックを変数化
	$widget_area_id = 'original_dashboard_widget';
	$widget_title = __('Widget Title','textdomain');
	$widget_callback = 'pwcn_admin_dashboard_widget_area_callback';

	wp_add_dashboard_widget(
		$widget_area_id,
		$widget_title,
		$widget_callback
	);
}
add_action('wp_dashboard_setup','pwcn_add_admin_dashboart_widget_area');

/*** ウィジェットブロックを停止 ***/
function pwcn_disable_block_wigets() {
	remove_theme_support( 'widgets-block-editor' );
}
/* ひとまずブロックのままにしたいので無効にする */
//add_action( 'init', 'pwcn_disable_block_wigets' );

/*** TT2初期のウィジェットエリアを削除 ***/
function pwcn_remove_unused_widgets(){
	unregister_sidebar( 'sidebar-1' );
	unregister_sidebar( 'sidebar-2' );
	unregister_sidebar( 'sidebar-3' );
}
/* 削除しなくていい場合があるので一旦無効にしています */
//add_action( 'widgets_init', 'pwcn_remove_unused_widgets' ,11);

コード追加後、「外観」→「ウィジェット」で開いたウィジェット設定画面に、「Admin Screen」というエリアが追加され、他のウィジェットエリアと同じようにいろいろなウィジェットを追加できます。

追加したウィジェットは管理画面のダッシュボードへ表示されます（移動前はダッシュボードの一番下に追加されますから見落とさないようにしてください）。

Twenty Twenty-Twoのような、ウィジェット設定画面の存在しないブロックテーマでも、上記コードを追加することにより「外観」メニューにクラシックテーマと同じ「ウィジェット」というメニューが現れ、そこから設定できるようになります。

各コードの説明・補足事項など

コードは、大きく「ダッシュボードにウィジェットを追加するために最低限必要なコード」「ブロック形式のウィジェット設定をクラシックに戻すコード」「不要なウィジェットエリアを削除（非表示）にするコード」の3つとなっており、前述のコードでは2、3番目のコードはひとまずコメントアウトして機能しないようにしています。

ここではそれぞれのコードについてできる限り詳細に説明していきます。

ダッシュボードへウィジェットエリアを表示するために必須のコード

以下の部分がそれにあたります。

/*** ウィジェットエリアを登録 ***/
function pwcn_admin_dashboard_wiget_area_init() {
	//ウィジェットタイトル・ID・抜粋（変数化）
	$widget_area_title = __('Admin Screen','textdomain');
	$widget_area_id = 'original-dash-widget';
	$widget_area_des = __('Its Original Dashboard Widget','textdomain');

	register_sidebar(array(
		'name' => $widget_area_title,
		'id' => $widget_area_id,
		'description' => $widget_area_des,
		'before_widget' => '<div class="admin widget"><div class="widget-inner">',
		'after_widget' => '</div></div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>'
	));
}
add_action( 'widgets_init', 'pwcn_admin_dashboard_wiget_area_init');

/*** ウィジェットエリアのコールバック ***/
function pwcn_admin_dashboard_widget_area_callback(){
	//ウィジェットの内容をまとめる
	ob_start();
	dynamic_sidebar('original-dash-widget');//出力するウィジェットエリアのID
	$widget_content = ob_get_contents();
	ob_end_clean();
 
	echo $widget_content;
}

/*** ダッシュボードにウィジェットエリアを追加 ***/
function pwcn_add_admin_dashboart_widget_area(){
	//ウィジェットエリアの・ID・タイトル・コールバックを変数化
	$widget_area_id = 'original_dashboard_widget';
	$widget_title = __('Widget Title','textdomain');
	$widget_callback = 'pwcn_admin_dashboard_widget_area_callback';

	wp_add_dashboard_widget(
		$widget_area_id,
		$widget_title,
		$widget_callback
	);
}
add_action('wp_dashboard_setup','pwcn_add_admin_dashboart_widget_area');

このコードは以下の3つのユーザー定義関数で成り立っていて、どれを抜いても機能しません。

サイトに新しくウィジェットエリア（複数のウィジェットを入れて表示させるための領域）を登録する
ウィジェットエリアに表示させる内容（コールバック関数）
管理画面のダッシュボードへ、コールバック関数の内容を登録したウィジェットエリアとして表示させる

流れとしては、1で追加した「ID」と2で追加したコールバック関数名を3でまとめてダッシュボードに出力するというイメージです。

従って、各ユーザー定義関数名を変更し、ウィジェットエリアのIDを別にすれば、複数のウィジェットエリアを管理画面のダッシュボードへ追加することも可能です。

各ユーザー定義関数内では、特に変更（編集）の必要のある項目（ID、コールバック関数名、表示するタイトルなど）を変数化して、コード内で呼び出すようにして、誤ってコードを壊してしまわないように作っています。

まずは、コードのままコピーして、以下のように動作するか確認した上で、変更や追加を行うようにしてください。

「外観」→「ウィジェット」を開いたページに、「Admin Screen」というウィジェットエリアが追加されているかどうかを確認する
「Admin Screen」エリアに何かのウィジェットを入れて保存する
管理画面のダッシュボードに「Widget Title」というパネルが追加され、挿入したウィジェットが表示されるかを確認する
※ウィジェットエリアはダッシュボードの一番下に表示されるので、スクロールして確認してください

ブロック形式のウィジェット設定画面をクラシックに戻すコード

以下の部分がそれにあたります。

/*** ウィジェットブロックを停止 ***/
function pwcn_disable_block_wigets() {
	remove_theme_support( 'widgets-block-editor' );
}
/* ひとまずブロックのままにしたいので無効にする */
//add_action( 'init', 'pwcn_disable_block_wigets' );

前述した通り、最後の「add_filter…」の前に「//」を入れて、機能しないようにしています。

このコードを機能させると、WordPress5.0以降でウィジェット設定画面が投稿や固定ページの編集と同様にブロック形式で編集するものを、以前のブロックでない（クラシック）設定画面に変更します。

実際に「//」を外して保存後、ウィジェット設定画面を開くと確認できます。

不要なウィジェットエリアを無効（非表示）にするコード

以下の部分がそれにあたります。

/*** TT2初期のウィジェットエリアを削除 ***/
function pwcn_remove_unused_widgets(){
	unregister_sidebar( 'sidebar-1' );
	unregister_sidebar( 'sidebar-2' );
	unregister_sidebar( 'sidebar-3' );
}
/* 削除しなくていい場合があるので一旦無効にしています */
//add_action( 'widgets_init', 'pwcn_remove_unused_widgets' ,11);

コードでは、「unregister_sidebar( ‘sidebar-1’ );」行の「sidebar-1」他となっている部分に、不要なウィジェットのIDを入れる、または行を追加・削除して設定することで、IDの合致するウィジェットエリアがウィジェット設定画面に表示されないようにします（表示されないようにすると書いた理由は後述します）。

このコードも、ウィジェット設定をクラシックに戻すコードと同様に「//」を付けて機能しないようにしています。また、3行書いている「unregister_sidebar( )」は、私の環境でTwenty Twenty-Twoテーマを有効にした際に予め設定されていたウィジェットエリアですので、貴サイトでは調べて変更する必要があります。

ウィジェットエリアのIDは、デベロッパーツールや、ソース表示を使って、ウィジェットエリア部分にある「#〇〇」の「〇〇」の部分になり、サイトやテーマによって異なりますから、ご自身で調べてください

コードの作成にあたり、参考にさせていただいたページなど

このコードの完成にあたっては、「指定したウィジェットを WordPress の管理画面に配置し、その中で Youtube ビデオの縦横比を保つ / Placing specific widgets to WordPress Admin Screen and keep the Youtube video aspect ratio within」というページで紹介されているコードがヒントになりました。ありがとうございます。

一度追加したウィジェット設定の完全削除は難しい？

自分がやり方を知らないだけかも知れないので参考程度に！（やり方が分かったら加筆します）

今回のコードでも使っている、ウィジェットエリアを登録する関数「register_sidebar」。まあウィジェットエリアを追加するにはこの関数を使うしか方法がありません。

ただ、これに関連するコード（ユーザー定義関数やフック）を削除しても、フックをコメントアウトしても、ウィジェット設定パネルを開くと、削除したはずのウィジェットエリアが残って表示されるんですね。

これを削除する方法として知られているのが、先のコード中にも入れた以下のコード。

/*** TT2初期のウィジェットエリアを削除 ***/
/* https://developer.wordpress.org/reference/functions/unregister_sidebar/ */
function pwcn_remove_unused_widgets(){
	unregister_sidebar( 'sidebar-1' );
	unregister_sidebar( 'sidebar-2' );
	unregister_sidebar( 'sidebar-3' );
}
add_action( 'widgets_init', 'pwcn_remove_unused_widgets' ,11);

「TT2初期のウィジェットエリアを削除」とコメントアウトしている通り、私の環境でのTwenty Twenty-Twoで標準で入っているウィジェットエリアです（sidebar-1、sidebar-2、sidebar-3）。TT2テーマはブロックテーマなので、それらがどこにも反映されないのになぁ．．なんて思うのですが、なぜかこれが登録されていて、しかも、TT2のテーマファイルのどこにも追加の記述がないのにウィジェット設定画面には表示されるという不思議な現象が発生しました。

そしてさらに、テスト的に追加した「admin」というウィジェットエリアについても、一旦「register_sidebar」を使って設定したものの、不要になったので削除しましたが、やはり追加するコードを削除しても表示されたまま．．。個人的には何も指示してないのに何で？って感じです。

こういうのはどこかにきっと登録があるのだろうと、データベース内を捜索するも、自身の能力では発見できず、いったいどこにあるんだろ？って感じです。

英文サイトを含め、これらの事象について検索しても出てこない、または上記コードの紹介がされているだけなので、今流行りの？「Bard」を使ってみたものの、やはりネット上にある情報と同じで、上記コードを使って削除（というか見えないだけなので正確には非表示）するしかなさそうです。

逆にこのページをたまたま見て、以下のことについて知ってる方が見えたら、コメントで教えていただけるとありがたいです。