ログイン画面のロゴをカスタマイザーから変更

WordPressでサイトを運営(またはクライアントワークで納品)しているとき、「ログイン画面のWordPressロゴを、自社のロゴやクライアントのロゴに変えたいな」と思ったことはありませんか?

よくある解説サイトだと、「プラグインを導入しましょう」と書かれていたり、コードの紹介であっても「functions.phpに直接ロゴ画像のURLを書き込みましょう」という方法が主流です。しかし、直接書き込む方法だと、「ロゴ画像を変更したい」となったときに、わざわざコードを書き換えなければならず、Webの知識がないクライアントや運用担当者では対応できなくなってしまいます。

そこで、「プラグインは一切増やさず、WordPress標準の『外観 > カスタマイズ』画面から、誰でもいつでもログインロゴをアップロード・変更できる」便利なスニペットを用意しました!

使用例↓

目次

コードスニペットを導入する

こちらのボタンをクリックしてスニペットをダウンロードします。

会員限定コンテンツ

ここは会員限定コンテンツです。

\お申込みはこちら/

コードスニペットをオンにします。

アドオン機能導入方法

STEP
プラグイン「Code Snippets」を検索します。
WordPressの「プラグインを追加」画面で検索欄に「code snippets」と入力し、Code Snippetsプラグインが検索結果の先頭に表示されている

管理画面「プラグイン」から、「プラグインを追加」を選択。
「プラグインの検索」欄に、Code Snippetsと入力。

STEP
プラグイン「Code Snippets」をインストール・有効化します。
「Code Snippets」プラグインの紹介画面で、サイトにコードを簡単に追加できる機能と開発者情報が記載されている。

このプラグインを「今すぐインストール」「有効化」します。

STEP
コードスニペットをダウンロードします。

該当ページから、コードスニペットをダウンロードします。
コピペではなく、ダウンロード形式で使用するものは上画像のような黄色いボタンで統一しています。

Code Snippets (コードスニペット)とは?

インポート/エクスポートが容易な、コード管理プラットフォームです。

「ひとつの機能としてパッケージングされたコード群」を、利用者はコードを触ることなくスイッチ(トグル)のオンオフで導入できる神ツールです。

STEP
コードスニペットをインポートします。
WordPress管理画面のメニューにある「スニペット」項目から「インポート」を選択する場面が表示されている。
重複スニペットの取り扱い設定と、JSONファイルをドラッグ&ドロップでアップロードする操作画面が表示されている。

管理画面「スニペット」「インポート」から、先ほどダウンロードしたコードスニペットをインストールします。

重複インストールを防ぐために下段にチェックを入れ、
Choose Filesエリアに先ほどダウンロードしたファイルをドラッグ&ドロップします。

アップロードされたスニペットを選択し、「Import Selected」ボタンからインポート操作を実行する確認画面。

インストールするファイルにチェックを入れ、「Import Selected」を押します。

STEP
コードスニペットをオンにします。
WordPress管理画面のサイドメニューにある「スニペット」の項目が青く選択されている状態。「すべてのスニペット」「新規追加」「インポート」「設定」などのサブメニューが表示されています。
Code Snippetsプラグインで登録されたスニペット一覧が表示され、トグルスイッチで各スニペットの有効・無効を切り替えられる画面。

管理画面「スニペット」「すべてのスニペット」から、先ほどインポートしたスニペットの左端にあるスイッチ(トグル)をオンにします。

目当ての機能が有効化されているか確認します。

主な機能と特徴

1. 「外観 > カスタマイズ」から直感的に画像アップロード

「外観」 > 「カスタマイズ」 > 「サイト基本情報」の中に、専用のロゴ登録エリアが追加されます。メディアライブラリから画像を選ぶだけで、誰でも直感的に設定・変更が可能です。

2. ロゴのリンク先・ツールチップも自動最適化

デフォルトのWordPressロゴは、クリックすると「WordPress.org(公式)」へ飛んでしまいますが、このコードを通すことで自動的にあなたのサイトのトップページURLへ切り替わります。 ホバー時のテキストも自動でサイト名に変わる親切設計です。

3. 未設定時はデフォルトロゴを維持する安全設計

万が一、カスタマイザーで画像を設定していない(または削除した)状態であっても、ログイン画面が崩れることはありません。自動でデフォルトのWordPressロゴ表示に戻るため、安心して導入いただけます。

4. 無名関数(クロージャ)を用いたスマートなコード

フック処理をシンプルにまとめているため、テーマの functions.php を汚さず、最小限の記述で軽量に動作します。

こんな方におすすめ

  • クライアントワーク(受託制作)で、納品物のブランド感を高めて他社と差別化したい方
  • 自社サイトや会員制サイトのログイン画面を、自社ロゴ仕様にしてブランディングしたい方
  • プラグインをできるだけ増やさず、サイトの動作を軽量に保ちたい方
  • 「コードの書き換え」を発生させず、運用の現場(非エンジニア)でロゴ変更を完結させたい方

非常にシンプルで余計な読み込みを行わない軽量設計ですので、ぜひサイト制作や運用の効率化に役立ててください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次