macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

ダッシュボードに自作ウィジェットを追加する方法【プラグイン不要】

WordPress プログラミング

本記事では、WordPressでダッシュボードにオリジナルウィジェットを追加する方法について解説しています。

プラグインを使わずコピペで実装可能なので、カスタマイズが苦手な初心者の方は参考にどうぞ。



「ダッシュボードにオリジナルウィジェットを追加する」

イメージできない方の為に先に完成イメージを紹介。

ダッシュボードにオリジナルウィジェットを追加の完成イメージ

こんな感じになります。

WEB制作を仕事としている方、これからしようと考えている方にオススメです。

このひと手間でお客様(納品先)の満足度を格段に上がることができます。
つまり、「こんなところまで考えてくれてる」を狙えます

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

スポンサードサーチ


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

注:テーマを使用している方は子テーマ推奨。

子テーマについてはWordPress初心者は必ず覚えておきたい【子テーマの作り方】をどうぞ。

使用するファイル

  • functions.php

これだけです。

実装までの手順

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

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

それぞれ解説しますね。

ウィジェット追加のテンプレートを用意する【使い回しOK】

誰でも使えるように、自作ウィジェットを追加する際のテンプレートを作成しました。

下記コードを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行目)
  • 「ここにウィジェットタイトル」の部分にウィジェットの見出しを記述します「例:各種投稿」(6行目)
  • 第一引数のcustom_widgetがウィジェットの’id’になります、このままでもいいですし変更してもOK(6行目)

説明した箇所以外は触らないようにしましょう。

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

さきほど解説したコード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行目)して、ウィジェットタイトルを「各種投稿」(11行目,第二引数)にしただけですね。

3行目から8行目についてちょっとだけ解説


・リンク

リスト内にあるaタグのhrefに飛ばしたいリンク先を指定します。

デフォルトの「投稿」であれば「edit.php」になります。

リンクの確認方法

管理画面サイドメニューからリンクさせたいページに飛びます、表示されているリンクのhttps://macoblog.com/wp-admin/ここをコピー
wp-admin/の後ろをコピーして使えばOK

・アイコン

アイコンはWordPress標準で実装されているdashiconsを使用します、直接fontawesomeを使うより簡単に使えて便利です。

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

クラスの「dashicons-media-document」の部分を変更することで対応したアイコンを表示することが出来ます。

各アイコンのコードはこちらから、使いたいアイコンをクリックすれば確認できます。

dashiconsのコード確認方法

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

追加したウィジェットにスタイルを適用させる【使い回し可能】

このままだとプレーンなままなので、スタイルを適用させないといけません。

管理画面内でCSSファイルを読み込ませるか、スタイルタグを使用するか、もちろんインラインでもOK。

管理画面内でオリジナルのスタイルを適用させる時もテンプレートで覚えておけばOK。

テンプレート

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

function admin_css() {
  echo 'ここに記述';
}

「ここに記述」の部分にリンクタグでCSSファイルを読み込ませるもよし、スタイルタグでCSSを記述するもよしです。

今回はスタイルタグで直接記述してみます、下記になります。

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

function admin_css() {
  echo '';
}

こんな感じでスタイルを適用させればOK。

表示オプションにも追加したウィジェットの項目が追加されていると思うので確認してみてください。

以上になります。

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

自作ウィジェットを特定の権限グループでのみ表示させたい場合

「ウィジェット追加のテンプレートを用意する【使い回しOK】」で解説したウィジェット追加処理の一番下の部分を下記のようにすればOK。

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

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

権限グループ一覧【これを参考に指定(右)】

管理者 administrator
編集者 editor
投稿者 author
寄稿者 contributor
購読者 subscriber

終わりに

いかがでしたでしょうか?

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

オススメは今回紹介した方法です、その理由は次回ウェルカムパネルでの実装方法を解説した際にでも。

こんな感じでいろいろカスタマイズ可能ですので、編集することを怖がらず挑戦してみてください。

以上になります。

スタイルに関しては下記を参考にしました。

WordPressのダッシュボードにオリジナルのメニューボタンを追加して使いやすくする方法

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。