![MONO](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="305"><rect fill-opacity="0"/></svg>)
![wordpress](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024"><rect fill-opacity="0"/></svg>)
WordPressのログイン画面をオリジナルでカスタマイズする方法を紹介します。
ログイン画面のロゴを変更
ロゴを任意のものに変更したいときは、functions.phpに下記のように記述します。
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');画像パスはロゴをアップロードした階層に合わせてください。
また、使用のロゴサイズに合わせてbackgroundのサイズなどを調整すると、バランス良くなります。
ロゴのリンク先を変更
デフォルトのロゴ部分には「WordPress.org」へのリンクが設定されており、これを変更したい場合はfunctions.phpに下記のように記述します。
function my_login_logo_url() {
return home_url();
}
add_filter('login_headerurl', 'my_login_logo_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;
}
</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
}Follow me!
