ウェブサイト検索

WordPress 管理者ダッシュボードをカスタマイズする方法

カスタムカー。他の自動車と同じように、A 地点から B 地点まで連れて行ってくれます。これらは同じ材料で作られており、他の自動車と同様にガロンのガソリンを消費します。しかし、私たち（少なくとも私たちの中の自動車愛好家）は、カスタムメイドの車に深い愛情を持っています。なぜ？

  • 組立ラインから出たばかりの同等品よりもはるかに優れているように見えます
  • パフォーマンスを向上させるために最適化されています

WordPress は、オンラインの夢を実現するために使用できる最高の手段の 1 つです。 WordPress には優れたダッシュボードが付属しており、すぐに使用できるため、あなたやあなたのクライアントが優れたウェブサイトをすぐに構築できるようになります。

しかし、WordPress 管理ダッシュボードは、雰囲気も見た目も「主流」すぎます。つまり、美しいとはいえ、個人的なスタイルがまったくにじみ出ているわけではありません。これは少し一般的であり、以前にプラットフォームを使用したことのあるクライアントにはおそらく印象に残らないでしょう。個人的なスタイリングやブランドとの類似性を好むクライアントには好印象を与えません。

一方、カスタム WordPress ダッシュボードは個人的なものであり、クライアントにさらなる満足感を与える要素を提供し、さらに多くのものを求め続けます。ブランドを構築したり、クライアントのニーズに合わせて WordPress ダッシュボードを調整したりすることで、優れたパッケージ、つまり独自のカスタム パッケージに入った優れた製品を手に入れることができます。今日の投稿では、次のことを行います。

  • 不要なウィジェットとメニューを削除して、よりクリーンで軽量なカスタム ダッシュボードを作成します。
  • ダッシュボードのフッターリンクをカスタマイズする
  • WordPress ロゴなどの一般的な要素を削除する
  • 画面上のオプションをタッチする
  • ダッシュボードをカスタマイズするために使用できるいくつかのプラグインに触れます

この投稿を終える頃には、クライアントの共感を呼ぶ、またはオンライン ブランドの存在感を強化する、美しく個人的な WordPress 管理ダッシュボードを作成できるようになっているはずです。最後まで楽しんで、下のコメント欄にあなたの意見を書いて私たちを驚かせてください！

待って！始める前に、子テーマを作成します

コアテーマファイルを編集することも、テーマダッシュボードの「外観」の下にあるエディターを使用することもできますが、それは WordPress テーマを二度と更新しないことを意味します。テーマ ファイルに変更を加える前に、子テーマを作成する必要があります。こうすることで、コア テーマを更新しても、すべての変更がそのまま残ります。ここでは、このチュートリアルのためだけにセットアップするための簡単な手順をいくつか紹介しますが、完全な子テーマ作成ガイドも用意されています。また、詳細なヘルプについては WordPress コーデックスを参照することもできます。

  1. 子テーマ フォルダーを作成します: WordPress インストールにログインし、wp-content/主題/テーマ名 フォルダーを見つけます。このフォルダー内に新しいフォルダーを追加し、「child-theme」または「yourthemename-child」という名前を付けます（想像がつくと思います）。

  2. 子テーマの CSS ファイルを作成する: 新しい子テーマ フォルダができたので、新しいファイルを追加して、現在のテーマのスタイルと機能を調整またはオーバーライドできます。まず、子テーマ フォルダー内に新しい style.css ファイルを作成し、次に新しいファイルを編集して基本的な見出し情報を追加します (これは、あなたや後続の開発者が何が起こっているかを知るためです)。

    /*---------------------------------------------------
Theme Name: Your Child Theme Folder Name Here
Description: Child theme for Parent Theme Name Here
Author: Your Name Here
Template: Parent Theme Name Here
----------------------------------------------------*/

  3. 子テーマの PHP ファイルを作成します。 新しい子テーマ フォルダー内に、functions.php ファイルを作成します。次に、新しい関数ファイルを編集して、元の「親」テーマのスタイルを読み込むコードを追加します。

    <?php
function myprefix_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'myprefix_theme_enqueue_styles' ); ?>

もちろん、子テーマにさらに多くの要素を追加して、ヘッダー、フッター、その他のテンプレートに変更を加えることができます。ただし、このチュートリアルの目的では、これで準備は完了です。それでは、行きましょう…

不要な WordPress ダッシュボード ウィジェットの削除

WordPress ダッシュボードにログインすると、概要、サイト統計、クイック ドラフト、WordPress などのいくつかのセクション (ウィジェット) が表示されます。ニュースなど。これらのダッシュボード ウィジェットのほとんどは WordPress によって追加されますが、表示されるウィジェットの数はテーマやプラグインに応じて増減する可能性があります。一部のテーマとプラグインは、独自のウィジェットをダッシュボードに追加します。

これらのウィジェットの中には便利なものもありますが、クライアントはそれぞれのウィジェットを確認する必要がありますか?ログインするたびにこれらの各ウィジェットを表示する必要がありますか?おそらく、ウィジェットを削除する方法がなかったため、我慢しなければならなかったのかもしれません。今日はあなたにとって幸運な日です。数行のコードを使用して、必要なだけダッシュボード ウィジェットを簡単に削除できます。

// Remove dashboard widgets
function remove_dashboard_meta() {
	if ( ! current_user_can( 'manage_options' ) ) {
		remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_primary', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_secondary', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
		remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' );
		remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_activity', 'dashboard', 'normal');
	}
}
add_action( 'admin_init', 'remove_dashboard_meta' );

子テーマの function.php ファイル (wp-content/messages/yourthemename/child-theme/functions.php にあります) に上記のコードをコピーし、変更を保存すると、例外を除いてすべてのダッシュボード ウィジェットが削除されます。テーマまたはプラグインによって追加されたもののうち。上記のコードから、コードの次の部分のおかげで、管理者権限未満のすべてのユーザーにはウィジェットが表示されません。

if ( ! current_user_can( 'manage_options' ) )

…ユーザーが管理者のみが使用できる (「manage_options」) 機能を持っているかどうかを確認します。おそらく、ダッシュボードからすべてのウィジェットを削除したくないでしょう。代わりに次のコードを使用できます。

// Create the function to use in the action hook
function wpexplorer_remove_dashboard_widget () {
    remove_meta_box ( 'dashboard_quick_press', 'dashboard', 'side' );
}
add_action ('wp_dashboard_setup', 'wpexplorer_remove_dashboard_widget');

上記のコードを function.php ファイルにコピーし、 変更を保存してクイック ドラフト ウィジェットを削除します。他のウィジェットを削除するには、「dashboard_quick_press」、「dashboard」、「side」 を各ウィジェットの対応するスラッグに置き換えるだけです。その他の標準的なウィジェット スラグには次のものがあります。

  • ダッシュボード_受信_リンク
  • ダッシュボード_プラグイン
  • ダッシュボード_プライマリ
  • ダッシュボード_セカンダリ
  • ダッシュボード_クイック_プレス
  • ダッシュボード_最近_下書き
  • ダッシュボード_最近_コメント
  • ダッシュボード_右_今
  • ダッシュボード_アクティビティ

ただし、親テーマ、インストールした他のプラグイン、またはホスティングによって追加のウィジェットが追加される場合もあります (WP エンジンはwpe_dify_news_feed と呼ばれるものを追加します)。これらの追加されたウィジェットのスラッグを見つけるには、ブラウザ インスペクター (Chrome のインスペクターが便利です。デフォルトの Web 開発者ツールの一部なので、要素を右クリックして「検査」を選択するだけです) を使用して、 削除するウィジェットの div ID。

WordPress ダッシュボード ウィジェットの追加

ダッシュボード ウィジェットを自由に削除できるようになったので、独自のカスタム ウィジェットを追加してみましょう。ウィジェットには何でも表示できるので、夢のカスタム ダッシュボードの作成を妨げるものは何もありません。最も良い点は、WordPress ダッシュボードにウィジェットを追加するのが非常に簡単であることです。次のコードをwp-content/themes/yourthemename/child-theme/functions.php ファイルに追加するだけです。

/**
 * Add a widget to the dashboard.
 *
 * This function is hooked into the 'wp_dashboard_setup' action below.
 */
function wpexplorer_add_dashboard_widgets() {
	wp_add_dashboard_widget(
		'wpexplorer_dashboard_widget', // Widget slug.
		'My Custom Dashboard Widget', // Title.
		'wpexplorer_dashboard_widget_function' // Display function.
	);
}
add_action( 'wp_dashboard_setup', 'wpexplorer_add_dashboard_widgets' );

/**
 * Create the function to output the contents of your Dashboard Widget.
 */
function wpexplorer_dashboard_widget_function() {
	echo "Hello there, I'm a great Dashboard Widget. Edit me!";
}

変更内容を保存。もちろん、ニーズに合わせてプラグインを編集することもできます。 HTML、PHP、またはその他のものを次の場所に配置します。

echo "Hello there, I'm a great dashboard Widget. Edit me!";

新しいカスタム ウィジェットは絶対一番下 (すべてのウィジェットの下) に表示されます。ウィジェットが多数ある場合、ビューポートの外側になる可能性があります。ただし、ウィジェットを上部 (またはさらに言えば他の場所) にドラッグ アンド ドロップすることはできます。

カスタム WordPress ダッシュボード ページ

まったく異なるダッシュボードの作成に興味があるとします。独自のカスタム HTML、PHP、さらにはスタイルも付属しています。ダッシュボード ウィジェットの追加/削除だけではなく、Remi Corson による WordPress カスタム ダッシュボード ページの作成方法を確認してください。

彼は、独自のカスタム ダッシュボード ページ (custom-dashboard.php) の作成を高速化するのに役立つ優れたプラグインを構築しました。特定のニーズに合わせてプラグインをフォークするには、PHP 開発スキルを磨く必要があります。全体として、Sweet Custom Dashboard を試してみましたが、素晴らしいものでした。カスタム ダッシュボードは簡単にインストールできるかもしれません :)。ウェルカム メッセージをカスタマイズしたい場合は、WordPress ダッシュボードのウェルカム メッセージのカスタマイズに関する投稿をご覧ください。

WordPress ダッシュボード メニューの削除

WordPress ダッシュボード ウィジェットを追加または削除したり、ダッシュボードの外観全体を変更したりすることもできます (Remi のおかげです)。次の部分に進み、不要なメニュー項目を削除します。

なぜ？クライアントに無駄のないダッシュボードを提供し、クライアントが「制限された」領域にアクセスできないようにするために、いくつかのメニューを削除したいと考えています。クライアントが WordPress の使い方を知らない場合、設定やプラグインなどのページにアクセスしてオプションを変更すると、サイトが壊れてしまう可能性があります。次のコードをfunctions.phpファイルに追加します。

function wpexplorer_remove_menus() {
	remove_menu_page( 'themes.php' );          // Appearance
	remove_menu_page( 'plugins.php' );         // Plugins
	remove_menu_page( 'users.php' );           // Users
	remove_menu_page( 'tools.php' );           // Tools
	remove_menu_page( 'options-general.php' ); // Settings
}
add_action( 'admin_menu', 'wpexplorer_remove_menus' );

上記のコードは、すべてのユーザーの設定、プラグイン、外観、ユーザー、およびツールへのメニュー リンクを削除します。サブメニューも削除できます。以下は、「外観」の下の「ウィジェット」サブメニューを削除するコード例です。

function wpexplorer_adjust_the_wp_menu() {
	$page = remove_submenu_page( 'themes.php', 'widgets.php' );
}
add_action( 'admin_menu', 'wpexplorer_adjust_the_wp_menu', 999 );

上の例では、ユーザーはウィジェットを除く外観の下のすべてのサブメニューにアクセスします。メニューやサブメニューは必要なだけ削除できます。ただし、これによってユーザーがこれらのページに直接アクセスできなくなるわけではないことに注意してください。つまり、ユーザーがたとえば yourdomain.com/wp-admin/options-general.php と入力すると、設定ページにアクセスします。幸いなことに、ほとんどのユーザーはその項目がメニューになくても気にしません。

function.php ファイルを編集できない場合、または編集したくない場合は、いつでも Admin Menu Editor プラグインをインストールできます。これにより、メニューを完全に制御できるようになります。これには、役割ベースのメニュー制限、メニューを非表示にする機能、カスタム メニュー項目を作成する機能など、いくつかの優れた機能が付属しています。

WordPress ダッシュボードのフッターをカスタマイズする

現時点までに、WordPress 管理ダッシュボードに「大幅な」カスタマイズを加えてきました。あなたが行っているすべての素晴らしい仕事をある程度評価するのは当然のことです。フッター (「WordPress で作成していただきありがとうございます。」) をカスタマイズすると、貴社 (またはクライアント) のブランドをさらに強化できます。フッターを「Build with love by Your Name」に変更しましょう。次のスニペットをfunctions.phpファイルに追加し、変更を保存するだけです。

// Custom Admin footer
function wpexplorer_remove_footer_admin () {
	echo '<span id="footer-thankyou">Built with love by <a href="http://www.wpexplorer.com/" target="_blank">WPExplorer</a></span>';
}
add_filter( 'admin_footer_text', 'wpexplorer_remove_footer_admin' );

「あなたの名前」をあなたの名前、ウェブサイト、メールアドレスなどに置き換え、yourdomain.com を実際のドメイン名に置き換えます。次に進みます…

ログインフォームのカスタマイズ

これまでのところ、WordPress 管理ダッシュボードをカスタマイズするために必要なものはすべて揃っています。さらに一歩進んで、ログイン ページをカスタマイズして、ユーザーが最初から真にパーソナライズされたエクスペリエンスを体験できるようにしましょう。結局のところ、ログイン ページでのみ提供されるために、なぜ WordPress ダッシュボードをわざわざカスタマイズする必要があるのでしょうか?

このページでは、デフォルトの WordPress ロゴとそれに付属する wordpress.org リンクの 2 つの要素をカスタマイズする必要があります。ただし、コードを紹介する前に 🙂 、WordPress 用の 15 のベスト カスタム ログイン ページ プラグインのいずれかを使用して、ログイン ページを簡単にカスタマイズできます。ここで、コードをいじってみると温かみのある曖昧な感覚が得られるので、次のコードを function.php にコピーします。

function wpexplorer_login_logo() { ?>
	<style type="text/css">
		body.login div#login h1 a {
			background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png );
			padding-bottom: 30px;
		}
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'wpexplorer_login_logo' );

logo.png をカスタム ロゴ ファイル名に置き換えます。最初にこのファイルを wp-content/themes/yourtheme/images にアップロードする必要があります。カスタム CSS を使用して変更できますが、カスタム ロゴは 80 x 80 ピクセル未満にしてください。カスタム ログイン ロゴを配置したら、元の WordPress ロゴに付属するリンクを変更します。新しいロゴをウェブサイトにリンクしましょう。このコードをfunctions.phpファイルにコピーし、変更を保存します。

function wpexplorer_login_logo_url() {
	return esc_url( home_url( '/' ) );
}
add_filter( 'login_headerurl', 'wpexplorer_login_logo_url' );

function wpexplorer_login_logo_url_title() {
	return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpexplorer_login_logo_url_title' );

CSS を使用すると、いつでもログイン ページのスタイルを自由に設定できることを覚えておいてください。または、カスタム ログイン ページとサイト ブランド化のための組み込みオプションが付属する Total Multi-Purpose & Responsive WordPress テーマのような素晴らしいテーマから始めることもできます。

WordPress ダッシュボードのカスタマイズ: 画面オプション

コードを詳しく調べたりプラグインをインストールしたくない場合は、画面オプションを利用してカスタム WordPress ダッシュボードを作成できます。 WordPress ダッシュボードにログインすると、画面上部の右側に [画面オプション] ドロップダウン メニューが表示されます。これをクリックして展開し、チェックを入れる/外してウィジェットを有効/無効にします。その後、ウィジェットをドラッグ アンド ドロップして、希望どおりに配置できます。

唯一の欠点は、この方法では設定がユーザーごとに保存されるため、複数の著者がいるブログの場合はあまり役に立ちません。また、ユーザーが自由にウィジェットを再アクティブ化できないようにすることもできません。

ボーナス: プラグインを使用する

私たちはコードのオプションの説明にほとんどの時間を費やしてきました。しかし、時間がない場合には、プラグインが役立つことがあります。

オプション 1: WordPress 用の Ultimate Tweaker プラグイン

まず、少し変わったものとして、CodeCanyon から入手できる WordPress 用の Ultimate Tweaker を紹介します。 WordPress 管理者 (その他の WordPress 機能) を編集するための真に究極のプラグイン オプションです。

ほとんどのプラグインは 1 つの特定の目的のための機能をサポートしていますが、Ultimate Tweaker はサポートしていません。このプラグインは、これまでに見たことのない多用途のオールラウンダーです。基本的に、Ultimate Tweaker は、作業を楽にする 240 以上の WordPress ハック、トリック、ツールをサポートしています。これにより、効率の向上、WordPress の煩わしい部分の削除、WordPress のコア機能の拡張など、さまざまな面で役立ちます。

これら 240 のハックは実に多様で、35 の異なるカテゴリに分類できます。 Ultimate Tweaker で何ができるかを理解していただくために、その「ハック」をいくつか紹介します。

  • サイドバーメニューの上にロゴを追加する
  • WordPress ダッシュボードとログインページのブランドを変更する
  • Web サイトの右クリックまたは Print Screen ボタンを無効にする
  • reCaptcha 2 をログイン画面に追加してセキュリティを強化する
  • JPEG品質を設定して画像のファイルサイズを小さくします
  • テキストウィジェットでショートコードを有効にする
  • 投稿の最小単語数を作成する
  • ログイン画面での間違ったパスワードの「シェイク」を無効にする
  • Google Analytics コードをウェブサイトに追加する
  • WordPress 用の 19 の新しいキーボード ショートカット
  • カスタム 404 ページを作成する
  • WordPress の自動更新を無効にする

これらの WordPress ハックの多くは、誰もが一度は Google に頼ったことのあるものです。それらのほとんどは、それ自体では比較的マイナーですが、数百の包括的なリストを備えているため、プラグインは集合的に多くの価値を提供できます。 WordPress コミュニティは通常、WordPress コアに何を望んでいるのかについて非常に声高に主張しているため、開発者がコミュニティの意見に耳を傾け、このプラグインの将来のアップデートで提案の一部を実装してくれることを心から願っています。

オプション 2: Forest – Revolution WordPress 管理テーマ

Web サイトのバックエンドのブランドを変更したいだけですか?通常は少しのコードを使用することをお勧めしますが、プラグインを使用することもできます。デフォルトのダッシュボードの外観に飽きている場合は、Forest WordPress 管理テーマを使用して少し見た目を変えることができます。しかもたったの9ドルで。 Forest は、投稿やページの追加など、WordPress での使い慣れたタスクの実行方法を変えるわけではありません。実行中の WordPress の見栄えを向上させるだけです。このプラグインを使用すると、デフォルトの WordPress ログイン ページを変更することもできます。

Forest を使用すると、独自の背景画像を WordPress ダッシュボードに追加できます。または、上のスクリーンショットにある画像を含め、無料で提供される 6 つの画像のうちの 1 つを使用することもできます。ダッシュボードは、独自の創造力 (無制限の色を使用)、または WordPress のデフォルトの配色の 1 つを使用してカスタマイズできます。 600 を超える Google フォントから独自のタイポグラフィを選択して、ダッシュボードをさらにカスタマイズできます。このプラグインは明るいスキンと暗いスキンをサポートしており、各要素の不透明度レベルを構成できます。ダッシュボードに使用しないボタンがある場合は、それらを非表示にすることもできます。これは、オプションが多すぎると過負荷になる可能性があるクライアント Web サイトに最適です。

注: Forest はライブ Web サイトの外観を一切変更しません。これは純粋にバックエンドのためのものです。

WordPress ダッシュボードのカスタマイズに関するリソース

WordPress ダッシュボードのカスタマイズについて詳しく知りたいですか?プロフェッショナル ツールキット用の追加リソースをいくつか紹介します。

  • ダッシュボード ウィジェット API
  • WordPress 向けの最高のカスタム ログイン ページ プラグイン 15 選
  • WordPress カスタム ダッシュボード ページを作成する方法
  • クライアント向けに WordPress ダッシュボードをカスタマイズする
  • WordPress 管理者のカスタマイズ – ダッシュボード

あなたへ…

カスタム WordPress 管理ダッシュボードの作成は、ブランド イメージを強化し、クライアントにパーソナライズされたエクスペリエンスを提供する最良の方法の 1 つです。簡単なので時間もかかりません。何を求めている？カスタマイズしてみましょう。

それ以外に、今日ここで何を学びましたか?カスタム WordPress 管理ダッシュボードを作成したことがありますか?以下のコメント欄で熱心なコミュニティと共有してください。乾杯！