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

WordPressでカスタムのダッシュボードロゴを追加したいですか？

ブランディングのためにWordPressのロゴをダッシュボードのカスタムロゴに置き換えることがよくあります。

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

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

カスタムダッシュボードロゴは、WordPress管理ダッシュボードに独自のカスタムロゴやブランディングで外観を表示します。

些細なことのように思えるかもしれませんが、サイトのブランドにとって重要な要素であり、いくつかの理由から重要なのです：

• ブランディング：ブランドアイデンティティを強化し、WordPressの管理エリアがあなたのビジネスの一部のように感じられるようにします。
• プロフェッショナリズム：カスタムのダッシュボードロゴは、WordPressサイトをよりプロフェッショナルで洗練された印象にします。
• ホワイトラベル： クライアントのためにウェブサイトを構築したり、マルチサイトネットワークを運営している場合、カスタムダッシュボードロゴを使用してWordPress管理エリアをホワイトラベル化することができます。つまり、WordPressのブランディングを完全に削除し、独自のブランディングに置き換えることで、クライアントにカスタマイザー体験を提供することができます。

中小企業であれ、オンラインショップや ブログのオーナーであれ、バックエンドエクスペリエンスをパーソナライズし、強力な社内ブランドアイデンティティを確立するために、カスタマイザーのダッシュボードロゴを持つことは重要です。

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

この方法は超簡単で、ほとんどの初心者にお勧めできる。

まず最初にWhite Label CMSプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。

有効化した後、Settings ” White Label CMSページにアクセスする必要があります。

次に、「ブランディング」タブを選択します。

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

次に、「ダッシュボード」タブを開きます。

ここで、「ダッシュボードアイコン」と書かれているところにカスタムロゴをアップロードします。

カスタマイザーロゴのサイズは40×40ピクセルでお願いします。

右上の「保存」ボタンをクリックし、設定を保存することをお忘れなく。

WordPressの管理エリアに戻る。

ダッシュボードにロゴが表示されるはずです。こんな感じです：

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

詳細な手順については、WordPress管理ダッシュボードをホワイトラベル化する方法のガイドをご覧ください。

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

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

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

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

上級ユーザーであっても、WPCodeが最も安全な方法ですので、まずは無料のWPCodeプラグインをインストールして有効化してください。より詳細な手順については、WordPressプラグインのインストール方法をご覧ください。

次に、カスタムロゴをcustom-logo.pngファイルとしてコンピューターに保存してください。サイズは40 x 40 pxです。

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

そこから、Code Snippets>> Add Snippetに向かう。

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');

こんな感じだ。

テキストと書式がすべて上とまったく同じであることを確認してください。

挿入方法」までスクロールダウンし、「自動挿入」を選択する。

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

最後に、スイッチをInactiveからActiveに切り替え、「Save」ボタンをクリックする。

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

以上、WordPressでカスタムダッシュボードロゴを追加する方法について、この投稿がお役に立てれば幸いです。また、Adminimizeを使ってWordPressから不要な項目を非表示にする方法についてのガイド、またはあなたのサイトをより良くカスタムするためのWordPressの最高のヒント、トリック、ハックについてのブログ投稿もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.