【WordPress】ダッシュボードに自作ウィジェットを追加する方法

自作ウィジェットを実装する方法【コピペOK】

完成イメージ

プラグインを使って実装する方法もありますが、今回はプラグインを使わず完全自作で実装してみようと思います。

テーマを利用している方は子テーマを使用してください、子テーマでのカスタマイズなら何かあった時にすぐ戻せますので。子テーマに関してはWordPress初心者は必ず覚えておきたい【子テーマの作り方】を参考にどうぞ。

使用するファイル

• functions.php

これだけです。

実装までの手順

1. ウィジェット追加のテンプレートをコピペ
2. ウィジェットに表示させる要素の作成
3. 追加したウィジェットにスタイルを適用させる

安心してください、難しいことは一切しませんので初心者でも十分出来ます。

①：ウィジェット追加のテンプレートをコピペ

誰でも使えるように自作ウィジェット追加用のテンプレートを作成しました、下記コードをfunctions.phpのどこでもいいのでコピペしましょう。

functions.php

// ウィジェットを追加する
function add_custom_widget() {
	echo 'ここに表示させる要素を記述';
}
function add_my_widget() {
	wp_add_dashboard_widget( 'custom_widget', 'ここにウィジェットタイトル', 'add_custom_widget' );
}

add_action( 'wp_dashboard_setup', 'add_my_widget' );

②：ウィジェットに表示させる要素の作成

さきほど解説した3行目の「ここに表示させる要素を記述」について、サンプルコードを使って簡単に解説します。冒頭で紹介した完成イメージを参考にすると、下記のようになります。

// ウィジェットを追加する
function add_custom_widget() {
	echo '<ul class="custom_widget">
            <li><a href="edit.php"><div class="dashicons dashicons-edit"></div><p>投稿</p></a></li>
            <li><a href="edit.php?post_type=news"><div class="dashicons dashicons-media-document"></div><p>お知らせ</p></a></li>
            <li><a href="edit.php?post_type=custom"><div class="dashicons dashicons-format-chat"></div><p>カスタム</p></a></li>
            <li><a href="edit.php?post_type=blog"><div class="dashicons dashicons-admin-customizer"></div><p>ブログ</p></a></li>
          </ul>';
}
function add_my_widget() {
	wp_add_dashboard_widget( 'custom_widget', '各種投稿', 'add_custom_widget' );
}

add_action( 'wp_dashboard_setup', 'add_my_widget' );

3行目〜8行目について簡単に解説

リスト内にあるaタグのhref属性に飛ばしたいリンク先を指定します、デフォルトの「投稿」であれば「edit.php」になります。アイコンはWordPress標準で実装されているdashiconsを使用します、直接fontawesomeを使うより簡単に使えます。

<div class="dashicons dashicons-media-document"></div>

クラスのdashicons-media-documentの部分を変更することで対応したアイコンを表示することが出来ます、各アイコンのコードはこちらから、使いたいアイコンをクリックすれば確認できます。

こんなところですかね、最後にスタイルを適用させれば完成です。

③：追加したウィジェットにスタイルを適用させる

このままだとプレーンなままなのでスタイルを適用させる必要があります、以下のようにして管理画面にスタイルを適用させます。

functions.php

// 管理画面内で自作CSSを適用させる
add_action('admin_head', 'admin_css');

function admin_css() {
  echo '';
}

こんな感じでスタイルを適用させればOKです、表示オプションにも追加したウィジェットの項目が追加されていると思うので確認してみてください。

以上で完成になります。

おまけ：権限グループでウィジェットを管理する方法

自作ウィジェットを特定の権限グループでのみ表示させたい場合は①：ウィジェット追加のテンプレートをコピペで解説したウィジェット追加処理の一番下の部分を下記のように変更すればOK。

if (current_user_can('ここに権限グループ')) {
  add_action( 'wp_dashboard_setup', 'add_my_widget' );
}

フック自体をログインユーザーの権限グループで分岐させています、「ここに権限グループ」の部分に指定した権限グループだけが自作ウィジェットが表示されるということになります、指定できる権限グループは下記の通り。

権限グループ一覧

終わりに

いかがでしたでしょうか、ダッシュボードに自作ウィジェットを追加するだけでも管理画面が華やかになると思います、WordPressのカスタマイズを仕事にしている方はこのひと手間でお客様（納品先）の満足度を格段に上がることができます。

WEB制作に携わっている方は覚えて損はないかと思います、今回はダッシュボードに自作ウィジェットを追加してみましたが、実は「ようこそ」と表示されるウェルカムパネルでも同様の事が実装可能です。

WordPressはカスタマイズ性が高く色々と調整できますので、是非挑戦してみてください。カスタマイズに慣れていない方は子テーマは必ず使用することをお忘れなく。