WordPressでクライアントダッシュボードを作成する方法

クライアント向けに WordPress ウェブサイトを構築している場合、カスタムクライアントダッシュボードを作成することは、エクスペリエンスを向上させる素晴らしい方法です。

WordPressでカスタムダッシュボードを使用すると、クライアントが必要とする正確なリソース、ショートカット、その他の重要な情報を提供し、すぐに使い始められるようにすることができます。

WPBeginner編集チームの多くのメンバーは、独自のクライアントプロジェクトにカスタムクライアントダッシュボードを構築しており、それは常に大きな違いを生んでいます。

この記事では、コードを書かずに、またクライアントがサイトを更新する能力に影響を与えることなく、WordPress でクライアントダッシュボードを作成する方法を紹介します。

WordPress でクライアントダッシュボードを作成する

WordPressでクライアントダッシュボードを作成する理由

WordPressソリューションプロバイダーとして、WordPressを初めて使用するクライアントに遭遇することがあります。彼らはHTML、CSS、またはWordPressの用語に慣れていません。

クライアント向けのカスタムダッシュボードを作成することで、クライアントにスリムなWordPressインターフェースと使いやすさを向上させることができます。

クライアントの満足度が向上し、リピートワークが増加します。クライアントはサポートを必要としなくなり、あなた自身の時間も節約できます。

それでは、WordPress でクライアントダッシュボードを簡単に作成する方法を見ていきましょう。

プロセス内のさまざまなステップを順を追って説明します。クライアントの要件に応じて、カスタマイズの度合いを決定できます。最も関心のあるステップにジャンプするには、以下のクイックリンクを使用してください。

  1. 不要な管理メニューを非表示にする
  2. ホワイトラベル WordPress ダッシュボード
  3. WordPressダッシュボードの外観を変更する
  4. クライアントダッシュボードに役立つリソースを追加する
  5. カスタムダッシュボードウィジェットの作成
  6. WordPress管理画面に関するその他の役立つリソース

1. 不要な管理メニューを非表示にする

クライアントのウェブサイトを構築する際には、さまざまなWordPressプラグインカスタム投稿タイプWordPressページビルダー、その他のツールを使用する場合があります。

これらのツールの多くは、WordPress管理バーに独自のメニュー項目を追加したり、管理ダッシュボードにカスタムウィジェットを作成したり、ツールバーにリンクを追加したりします。

結果は少し乱雑に見えます。WordPressを初めて使用するクライアントにとって、これらの追加項目はダッシュボードを必要以上に複雑に見せてしまいます。

WordPressダッシュボード

クライアントダッシュボードの作成を、不要なものを整理することから始めましょう。

そのためには、Adminimize プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化後、プラグインを設定するには、設定 » Adminimize ページにアクセスする必要があります。

Adminimize設定

設定ページには、さまざまな管理セクションが表示されます。セクションをクリックすると展開され、その特定のセクションのオプションが表示されます。

Adminimizeのセクション設定

各セクションの下にリストされている項目は、ユーザーロールごとに表示または非表示にできます。非表示にするとクライアントのウェブサイトの使用に影響を与える可能性があるため、各項目を慎重に確認してください。

詳細な手順については、WordPressで不要なメニュー項目を非表示にする方法に関するガイドをご覧ください。

2. WordPressダッシュボードのホワイトラベル表示

Adminimizeプラグインは、WordPress管理ダッシュボードの外観を制御するための多くのオプションを提供します。しかし、WordPressのブランディングを非表示にしたり、管理エリアをホワイトラベル化したりするためのオプションはありません。

ホワイトラベルには、WordPressのロゴをカスタムロゴに置き換えること、管理画面のフッターを変更すること、メニューから項目を表示または非表示にすることなどが含まれます。

まず、White Label CMSプラグインをインストールして有効化する必要があります。有効化後、プラグイン設定を構成するには、設定 » White Label CMS ページに移動してください。

ホワイトラベルCMS設定

設定ページは異なるセクションに分かれています。セクションをクリックすると展開され、設定を表示できます。

プラグインの一部のオプションは Adminimize でも利用できます。すでにそれらのオプションを非表示にしている場合は、スキップできます。

各セクションの詳細な手順については、WordPress管理ダッシュボードのホワイトラベル表示方法に関する記事をご覧ください。

3. WordPressダッシュボードの外観を変更する

WordPress には、ユーザーがプロフィールから変更できる管理画面のカラースキームがいくつか用意されています。新規ユーザーのデフォルトの カラースキームを設定 できます。また、独自の カスタムカラースキームを作成 することもできます。

管理カラーセレクター

さらにレベルアップしたいですか?WordPress管理画面テーマを試してみてください。これらのテーマはプラグインとして利用でき、WordPress管理画面の外観を変更するためにインストールできます。

WordPress管理テーマ

ここに、試すことができる無料のWordPress管理テーマとプラグインをいくつか紹介します。

4. クライアントダッシュボードに役立つリソースを追加する

プロジェクトをクライアントに提供する際、多くのクライアントが同様の質問をしていることに気づくでしょう。WordPressクライアントダッシュボードにヘルプまたはリソースセクションを追加すると、これらの質問に答えるのに役立ち、サポート提供に費やす時間を節約できます。

ヘルプセクションを追加する最良の方法は、WP Helpプラグインをインストールして有効化することです。有効化すると、プラグインはWordPress管理バーに新しい「ヘルプの公開」メニュー項目を追加します。それをクリックすると設定ページに移動します。

公開ヘルプ

まだヘルプリソースを作成していないため、この領域は空になります。「新規追加」ボタンをクリックして作成してください。

次のページでは、WordPressの投稿やページを作成するのと同じように、ヘルプドキュメントを作成できます。

新しいヘルプドキュメント

WP Helpはドキュメントにカスタム投稿タイプを使用しており、それらはページのように階層的です。親ドキュメントと子ドキュメントを作成して整理できます。

ドキュメント管理

他のWordPressサイトからドキュメントを同期することもできます。これにより、すべてのクライアントプロジェクトで同じドキュメントを使用できます。

詳細な手順については、WordPress管理画面にヘルプ/リソースセクションを追加する方法に関するガイドをご覧ください。

5.カスタムダッシュボードウィジェットの作成

ダッシュボードウィジェットは、ユーザーがWordPress管理エリアにログインしたときに最初に表示されるものです。ここに独自のカスタムダッシュボードウィジェットを追加することで、クライアントを正しい方向に導くのに最適な場所です。

これは、開始点として使用できるシンプルなダッシュボードウィジェットコードです。

このコードを、テーマの functions.php ファイル、サイト固有のプラグイン、またはコードスニペットプラグインに追加する必要があります。

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
  
function my_custom_dashboard_widgets() {
global $wp_meta_boxes;
 
wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');
}
 
function custom_dashboard_help() {
 
// Content you want to show inside the 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://www.wpbeginner.com" target="_blank">WPBeginner</a></p>';
}

コンテンツ部分を独自のメッセージに変更することを忘れないでください。フォーマットやスタイリングにはプレーンHTMLを使用できます。

このコードは、最高のコードスニペットプラグインであるWPCodeを使用して追加することをお勧めします。

WPCode

WPCode を使用すると、テーマの functions.php ファイルを編集することなく、WordPress にカスタムコードを安全かつ簡単に追加できます。そのため、サイトを壊してしまう心配は一切ありません。

開始するには、無料のWPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

プラグインをアクティブ化したら、WordPressダッシュボードからコードスニペット » + スニペットを追加 ページに移動します。

次に、「カスタムコードを追加(新規スニペット)」オプションの下にある「+カスタムスニペットを追加」ボタンをクリックします。

WPCodeでカスタムコードを追加する

次に、画面に表示されるコードタイプのリストから「PHPスニペット」を選択する必要があります。

コードの種類としてPHPスニペットを選択

次に、コードスニペットのタイトルを追加し、上記のコードを「コードプレビュー」ボックスに貼り付けます。

スニペットのタイトルを追加し、コードをコードプレビューボックスに貼り付けます

その後、トグルを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンを押すだけです。

カスタムコードスニペットを有効化して保存する

デモウェブサイトでテストした際の表示はこちらです:

カスタムダッシュボードウィジェット

WordPress管理画面に関するその他の役立つリソース

これらのヒントを使用してカスタムクライアントダッシュボードを作成したら、WordPress管理エリアをカスタマイズする他の方法を探しているかもしれません。以下に役立つガイドをいくつか紹介します。

この記事がWordPressでクライアントダッシュボードを作成する方法を学ぶのに役立ったことを願っています。また、WordPress管理エリアを保護する方法に関するガイドや、最高のWordPressアクティビティログおよびトラッキングプラグインの専門家による選択肢も参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

12 CommentsLeave a Reply

  1. 私はクライアントのためにウェブサイトを作成しており、管理エリアを異なる色でスタイル設定することは素晴らしいアイデアです。このような管理インターフェースは、会社のロゴに使用されている色を反映できるため、デフォルトのものと比較してより歓迎的です。細部にまで注意を払った仕事に感謝しており、これは私の興味を引いた側面の一つです。魅力的な管理環境を作成することで、私の仕事を差別化するためのもう一つの素晴らしい方法です。

  2. こんにちは、上記のコードから複数のダッシュボードウィジェットを作成する方法のサンプルを教えていただけますか?1つのダッシュボードウィジェットは作成できましたが、複製しようとすると少し問題が発生しているようです。確認できるサンプルを提供していただけますか?すみません、私はこの分野では初心者なので、助けていただけると幸いです。

    ありがとうございます!!

  3. こんにちは、このチュートリアルは素晴らしいです。コードも完璧に動作します。しかし、少し問題があります。私はWordPressの初心者であることは認めますが、上記のコードを使用すると...

    add_action(‘wp_dashboard_setup’, ‘my_custom_dashboard_widgets’);

    function my_custom_dashboard_widgets() { global $wp_meta_boxes;

    wp_add_dashboard_widget(‘custom_help_widget’, ‘テーマサポート’, ‘custom_dashboard_help’);
    }

    function custom_dashboard_help() { echo ‘カスタムブログテーマへようこそ!ヘルプが必要ですか?開発者はこちらまでご連絡ください こちら。WordPressチュートリアルについては、WPBeginnerをご覧ください。‘; }

    ウィジェットを1つ作成できましたが、素晴らしいです!ダッシュボードにもっとウィジェットを追加するにはどうすればよいですか?コピー&ペーストするだけでよいですか?

    • 新しいウィジェットに含めたい内容の関数を、波括弧内に別の wp_add_dashboard_widget() を追加することで、別のウィジェットを作成できます。

      管理者

  4. これは多くのプラグインのように思えます。サイトの速度が大幅に低下しませんか?

  5. すごい!素晴らしい記事です。まさに求めていたものでした。ありがとうございます。Facebook に保存して、何度も見返せるようにしました。

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。