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

Wordpress

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

2019年08月28日 8:00 

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

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

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



 

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

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

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

 



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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

ソース
 

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

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

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

ソース
display:noneできれいに削除できました!

 

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

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

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

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

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

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!