WordPress:ログイン画面のWordPressロゴマークを変更する

WordPressをインストールして、ログイン画面を表示するとWordPressのロゴマークが表示されます。

wordpress_admin_logo_1

このWordPressロゴオリジナルの画像に変更する時の方法をメモします。

また、ロゴに設定されているリンク先title属性を変更する方法も記載します。

お客様に管理画面の情報を渡す場合など、WordPressのロゴではなく独自のロゴを設定したい時に活用できます。


WordPressログイン画面のロゴを変更

ロゴに使用する画像を用意し、テーマディレクトリ内に設置します。

使用しているテーマの「functions.php」に下記のコードを記述します。

function login_logo_image() {
    echo '<style type="text/css">
            #login h1 a {
                background: url(' . get_bloginfo('template_directory') . '/login_logo.png) no-repeat !important;
            }
    </style>';
}
add_action('login_head', 'login_logo_image');

ロゴのサイズによってうまく表示されない場合は、
widthやheightなどを追加してスタイルを調整します。

また、CSSファイルを読み込んでスタイルを指定することも可能です。
CSSファイルを使用しているテーマディレクトリ内に設置します。

function admin_login_css() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo("template_directory") . '/admin_login.css">';
}
add_action('login_head', 'admin_login_css');

ロゴのリンク先を変更する場合

デフォルトではWordPressへのリンクが設定されています。

下記はブログのTOPページのURLを設定する時の方法です。

※functions.phpに追加

function login_logo_url() {
	return get_bloginfo('url');
}
add_filter('login_headerurl', 'login_logo_url');

「get_bloginfo(‘url’)」でブログのURLを設定しています。


ロゴのtitle属性を変更する場合

ロゴのtitle属性をブログの名前に変更する時の方法です。

※functions.phpに追加

function login_logo_title(){
	return get_bloginfo('name');
}
add_filter('login_headertitle','login_logo_title');

「get_bloginfo(‘name’)」でブログのサイト名を設定しています。


「wp-admin」ディレクトリ内のファイルを編集してもいいのですが、
WordPressをバージョンアップした時に編集した内容が上書きされてしまうので、
ロゴマークを変更したい場合は上記の方法で設定するといいと思います。

  • このエントリーをはてなブックマークに追加

WordPress:ログイン画面のWordPressロゴマークを変更する” への7件のコメント

  1. 助けてください><。
    functions.phpに上のコードを挿入したらログインできなくなってしまいましたm(__)m
    コードを消してもログインできなくなってしまいました。
    どうしたらいいでしょう

    • コメントありがとうございます。
      おそらくですが記述ミスが考えられます。
      functions.phpは記述を間違えてしまうとログインできない状態になることがあります。
      上記の記述でログインできなくなったのであれば、編集する前の状態でfunctions.phpをアップロードしてみてください。元の状態には戻ると思います。

  2. ピンバック: ログイン画面の変更、ログインログアウト後の画面変更 WordPressでログインしたユーザーにしか見えないページを作る方法 その2 | RYUS blog

  3. 助けてください><。
    クライアントに納品するように変更してるのですが、
    ロゴの画像等を変えることができました。
    しかし、ロゴをクリックするとロゴに水色の枠がでます。
    その水色の枠を消したいのですが、教えていただきたいのですが、
    よろしくお願いします。

    • コメントありがとうございます。
      ロゴのリンクに下記のスタイルが付いていると思います。

      a:focus {
      box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
      color: #124964;
      }

      box-shadowをnoneにすれば水色の枠が消えるかなぁと思います。
      試してみてくださいm(__)m

      • ありがとうございます。
        しかしstylesheetの中には
        a:focusすらないのですが・・・
        とりあえず探してみます。
        貴重な意見ありがとうございました。

        • おはようございます。
          別にスタイルを用意して「!important」で優先度を高くしてみたらどうでしょうか?
          a:focus {
          box-shadow:none !important;
          }
          上記のような感じで(^_^;)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です