WordPress にカスタムダッシュボードロゴを追加する方法

WPBeginnerでは、WordPressを自分たちのものにしたいユーザーから多くの質問を受けます。最も一般的なリクエストの1つは何でしょうか？デフォルトのWordPressロゴをカスタムダッシュボードロゴに変更することです。

WordPressのロゴを独自のカスタムロゴに置き換えることは、管理エリアをブランド化し、サイトを真にユニークに感じさせるための素晴らしい方法です。

サイトを自分で管理している場合でも、ユーザーチームがいる場合でも、カスタムダッシュボードロゴはサイトをよりプロフェッショナルに見せるための良いタッチです。

この記事では、ブランディングのためにWordPressにカスタムダッシュボードロゴを追加する方法を紹介します。

カスタムダッシュボードロゴとは何ですか？また、なぜ追加するのですか？ 

カスタムダッシュボードロゴは、WordPress管理ダッシュボードに独自のカスタムロゴまたはブランディングとともに表示されます。

1つ追加することは些細な詳細のように思えるかもしれませんが、ウェブサイトのブランドの重要な一部であり、いくつかの理由で重要です。

• ブランディング：ブランドアイデンティティを強化し、WordPress管理エリアをあなたのビジネスの一部のように感じさせます。
• プロフェッショナリズム：カスタムダッシュボードロゴは、WordPressサイトに、よりプロフェッショナルで洗練された外観を与えます。
• ホワイトラベル表示：クライアントのためにウェブサイトを構築している場合や、マルチサイトネットワークを実行している場合は、カスタムダッシュボードロゴを使用してWordPress管理エリアをホワイトラベル表示できます。これは、WordPressのブランディングを完全に削除し、独自のブランディングに置き換えて、クライアント向けのカスタムエクスペリエンスを作成できることを意味します。

オンラインストア、中小企業、またはブログを運営している場合でも、カスタムダッシュボードロゴは、バックエンドエクスペリエンスをパーソナライズし、強力な内部ブランドアイデンティティを確立するのに役立ちます。

次のセクションでは、WordPressにカスタムダッシュボードロゴを追加するための2つの異なる方法と、単にダッシュボードからWordPressロゴを削除する方法を紹介します。

• 方法1：プラグインを使用してWordPressにカスタムダッシュボードロゴを追加する
• 方法2：WordPressでカスタムダッシュボードロゴを手動で追加する
• 代替案：管理画面からWordPressロゴを削除する

準備はいいですか？始めましょう。

方法1：プラグインを使用してWordPressにカスタムダッシュボードロゴを追加する

この方法は非常に簡単で、ほとんどの初心者におすすめです。

まず、White Label CMS プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、WordPressダッシュボードから設定 » White Label CMSにアクセスする必要があります。

次に、「ブランディング」タブにいることを確認しましょう。

ここから、スイッチを左から右に切り替えて「WordPressロゴとリンクを非表示にする」ことができます。

次に、「ダッシュボード」タブに移動します。

「ダッシュボードアイコン」の下にカスタムロゴをアップロードします。プロセスを開始するには、「アップロード」リンクをクリックするだけです。

カスタムロゴの寸法は正確に40 x 40ピクセルである必要があります。そうでない場合、切り抜かれたり引き伸ばされたりして、奇妙に見えます。

変更を保存するには、右上にある「保存」ボタンをクリックしてください。

さて、WordPress管理画面に戻り、「ダッシュボード」パネルを開きましょう。

このパネルには、新しいカスタムロゴが表示されるはずです。次のようになります。

カスタムダッシュボードロゴ以外にも、White Label CMSプラグインはWordPressのインストールを再ブランド化するための他の機能も提供しています。

WordPress管理画面のホワイトラベル化方法については、こちらのガイドをご参照ください。WordPress管理画面のホワイトラベル化方法。

方法2：WordPressでカスタムダッシュボードロゴを手動で追加する

この方法は、WordPressにコードスニペットを貼り付けることに慣れているユーザー向けです。WordPressにカスタムコードを追加する最も簡単で安全な方法は、WPCodeのようなプラグインを使用することです。

WordPressサイトにショートコードを追加する方法を教えているほとんどのチュートリアルでは、コードをテーマのfunctions.phpファイルに追加するように指示しています。これは機能する可能性がありますが、うまくいかないこともたくさんあります。

コードのわずかな間違いや追加方法の間違いでも、WordPress サイトが壊れてアクセスできなくなる可能性があります。そのため、上級ユーザーにのみお勧めします。

上級ユーザーにとっても、WPCodeはこの作業を行うための最も安全な方法です。

まず、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法のガイドに従ってください。

次に、カスタムロゴをコンピューターに custom-logo.png という名前のファイルとして保存するようにします。寸法は正確に 40 x 40 px である必要があります。

カスタムロゴの準備ができたら、それを /wp-content/themes/your-theme/images フォルダに FTPを使用して アップロードします。テーマに images フォルダがない場合は、作成する必要があります。

そこから、「コードスニペット」→「+スニペットを追加」に移動できます。

次に、WPCodeライブラリに移動します。そこには何十ものコードスニペットがあります。

ここで、「カスタムコードを追加」を選択し、「スニペットを使用」ボタンをクリックします。

エディターで、スニペットにタイトルを付けます。たとえば、「カスタムロゴダッシュボード」などです。

次に、「コードタイプ」を「PHPスニペット」に設定する必要があります。

その後、「コードプレビュー」ボックスにこのコードを追加するだけです。

function wpb_custom_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-logo.png) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}

//hook into the administrative header output
add_action('wp_before_admin_bar_render', 'wpb_custom_logo');

このようになります：

次に進む前に、すべてのテキストと書式が上記と同じであることを確認しましょう。

すべてがうまくいっているようであれば、「挿入方法」までスクロールダウンして「自動挿入」を選択できます。

カスタムロゴがダッシュボードに表示されるようにするには、「場所」ドロップダウンメニューを展開し、「管理者のみ」を選択します。

最後に、スイッチを「非アクティブ」から「アクティブ」に切り替え、「保存」ボタンをクリックします。

このコードは、WordPress管理バーにカスタムロゴを表示するために必要なCSSを単純に追加します。

代替案：管理画面からWordPressロゴを削除する

カスタムロゴに置き換えるのではなく、単にWordPressロゴを管理ダッシュボードから完全に削除したい場合は、この方法が最適です。

前述の通り、WPCode は最高のコードスニペットプラグインであり、WordPress にカスタムコードを追加するのを簡単にしてくれます。

さらに良いことに、1,500 以上の既製のコードスニペットのライブラリが付属しており、WordPress 管理バーのロゴを削除するためのものも含まれています。これらを使用すれば、コーディングの経験がなくても、サイトをすばやくカスタマイズできます。

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

有効化したら、WordPress管理画面から コードスニペット » ライブラリ に移動します。

そこから、「Remove the WordPress Logo From the Admin Bar」スニペットを検索できます。見つけたら、カーソルを合わせて「スニペットを使用」ボタンをクリックするだけです。

WPCodeがコードを自動的に追加します。

適切な挿入方法も選択され、使用しているコードをサイトで追跡するためのタグが追加されます。

さて、コードスニペットを有効化する時間です。

ページ上部のスイッチを「非アクティブ」から「アクティブ」に切り替え、「更新」ボタンを押すだけです。

これで、管理画面からWordPressのロゴが削除されました。

この記事がWordPressにカスタムダッシュボードロゴを追加する方法を学ぶのに役立ったことを願っています。次に、Adminimizeを使用してWordPressから不要な項目を非表示にする方法に関するガイドをご覧になるか、WordPress管理エリアを改善するためのプラグインとヒントの専門家のおすすめをお読みください。

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