簡単！WordPressのログイン画面をカスタマイズする方法

おはようございます！社員Aです👩

今回は、WordPressのログイン画面をオリジナルでカスタマイズする方法を書いていきます。

おなじみのログイン画面から、オリジナル感を出したい！

WordPressの管理画面と言えば、グレーの単色背景にロゴとログインフォームがあるだけ…。

別にそのままでも全然問題ないのですが、せっかくなのでオリジナル感のあるログイン画面に変えてみたいと思い、色々調べたところ結構カスタマイズできることが分かったので、実践も踏まえてカスタマイズしていきたいと思います。

ログイン画面のロゴを変更する

まずは、WordPressのロゴが入っている部分をオリジナルのロゴに差し替えてみたいと思います。

このロゴ部分は背景で画像指定されているので、新たにCSSを追加しオリジナルロゴで差し替えます。

ソース

function theme_login_style() {
    ?>

    <style>
      .login h1 a {
        width: 320px!important;
        background: url(/img/logo_blue.png) no-repeat 46% 72%!important;
        background-size: 69%!important;
      }
    </style>
    <?php
}

add_action('login_enqueue_scripts', 'theme_login_style');

上記のソースをfunction.phpの任意の場所に追記していただき、画像パスはロゴをアップロードした階層に合わせてください。

また、お使いのロゴサイズに合わせてbackgroundのサイズなどを調整していただけると、バランス良くなると思います。

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

デフォルトの状態では、ロゴをクリックするとWordPressの公式サイトにリンクしてしまいます。

そのため、このリンク先も変更してみましょう。

ソース

function my_login_logo_url() {
    return home_url();
}

add_filter('login_headerurl', 'my_login_logo_url');

こちらも先程と同様にfunction.phpに追記をします。

特に変更箇所はなくコピペしていただければ、大丈夫です。

これにより、ロゴをクリックした際にトップページへリンクします。

全体の背景色を変更・背景画像を設定

デフォルトの状態では、全体の背景色がグレーですがこちらも変更できます。

先程ロゴを変更した時のCSSに追記することで、変更ができます。

ソース

function theme_login_style() {
    ?>

    <style>
      .login h1 a {
        width: 320px!important;
        background: url(/img/logo_blue.png) no-repeat 46% 72%!important;
        background-size: 69%!important;
      }
      body.login{
          background: #d8f3ff;
      }
    </style>
    <?php
}

上記ソースでは単色を指定していますが、url()を使うことで背景画像も設定できます。

ログインボタンの色を変更する

ログインボタンも色を自由に変更できます。

先程と同様にCSSを追加します。

ソース

function theme_login_style() {
    ?>

    <style>
      .login h1 a {
        width: 320px!important;
        background: url(/img/logo_blue.png) no-repeat 46% 72%!important;
        background-size: 69%!important;
      }
      body.login{
        background: #d8f3ff;
      }
      .wp-core-ui .button-primary{
        background: #4ba9d4!important;
        border-color: #4ba9d4 #4ba9d4 #4ba9d4!important;
        box-shadow: 0 1px 0 #006799;
        color: #fff;
        text-decoration: none;
        text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799!important;
        border-bottom: solid 3px #2c86af;
      }
    </style>
    <?php
}

「パスワードをお忘れですか ?」や「プライバシーポリシー」へのリンクを削除する

ログイン画面の下部に小さく出ている「パスワードをお忘れですか ?」や「プライバシーポリシー」へのリンクも削除することができます。

先程と同様にCSSを追加します。

ソース

function theme_login_style() {
    ?>

    <style>
      .login h1 a {
        width: 320px!important;
        background: url(/img/logo_blue.png) no-repeat 46% 72%!important;
        background-size: 69%!important;
      }
      body.login{
        background: #d8f3ff;
      }
      .wp-core-ui .button-primary{
        background: #4ba9d4!important;
        border-color: #4ba9d4 #4ba9d4 #4ba9d4!important;
        box-shadow: 0 1px 0 #006799;
        color: #fff;
        text-decoration: none;
        text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799!important;
        border-bottom: solid 3px #2c86af;
      }
      .login #nav,
      .login .privacy-policy-page-link{
          display: none;
      }
    </style>
    <?php
}

display:noneできれいに削除できました！

その他箇所のカスタマイズ

上記で紹介したカスタマイズ方法以外にも、CSSで追記をすれば簡単にカスタマイズが出来ます。

Chromeなどのデベロッパーツールで該当箇所のクラスを調べて、調整をするだけであっという間にオリジナルのログイン画面が出来上がります！

管理者しか見ない画面にはなりますが、カスタマイズするだけで気分が変わりますよね！

簡単にできるので、ぜひチャレンジしてみてください！