WordPressのログインページはプラグインなどを利用してカスタマイズすることができます。
今回は、プラグインを使わずにアクションフックを利用してWordPressのログインページで利用されるCSSをカスタマイズしてオリジナルのデザインに変更する方法をご紹介します。
ログインページをカスタマイズする
functions.php
ログイン画面ページのhead内で実行される処理を追加します。「functions.php」に「add_action」を使い以下のように記述をします。
1 | // ログインページのヘッダに関数「custom_login」を追加をする |
2 | add_action('login_head', 'custom_login'); |
3 | |
4 | // 関数「custom_login」の実行内容：カスタマイズしたCSSを新しく読込む |
5 | function custom_login() { |
6 | echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo( 'stylesheet_directory' ) . '/custom-login.css" />'; |
7 | } |
カスタムCSS
デザインをカスタマイズしたCSSファイル「custom-login.css」を用意します。
ロゴのみを変更する場合は、以下のスタイルの指定で行うことが出来ます。
1 | /* custom-login.css */ |
2 |
3 | .login h1 a { |
4 | background-image: url("../images/apple-114.png"); |
5 | } |
オリジナルデザインのCSSファイルや画像をサーバにアップロードして完了です。
標準CSS
ロゴ以外のデザインを変更をする場合、WordPressの標準CSS（バージョン 3.7.1）の内容をカスタマイズの参考にしてみてください。
1 | .login * { |
2 | margin: 0; |
3 | padding: 0; |
4 | } |
5 | .login form { |
6 | background: none repeat scroll 0 0 #FFFFFF; |
7 | border: 1px solid #E5E5E5; |
8 | box-shadow: 0 4px 10px -1px rgba(200, 200, 200, 0.7); |
9 | font-weight: 400; |
10 | margin-left: 8px; |
11 | padding: 26px 24px 46px; |
12 | } |
13 | .login form .forgetmenot { |
14 | float: left; |
15 | font-weight: 400; |
16 | margin-bottom: 0; |
17 | } |
18 | .login .button-primary { |
19 | float: right; |
20 | } |
21 | #login form p { |
22 | margin-bottom: 0; |
23 | } |
24 | #login form p.submit { |
25 | padding: 0; |
26 | } |
27 | .login label { |
28 | color: #777777; |
29 | font-size: 14px; |
30 | } |
31 | .login form .forgetmenot label { |
32 | font-size: 12px; |
33 | line-height: 19px; |
34 | } |
35 | .login h1 a { |
36 | background-image: url("../images/wordpress-logo.png?ver=20120216"); |
37 | background-position: center top; |
38 | background-repeat: no-repeat; |
39 | background-size: 274px 63px; |
40 | display: block; |
41 | height: 67px; |
42 | outline: 0 none; |
43 | overflow: hidden; |
44 | padding-bottom: 15px; |
45 | text-indent: -9999px; |
46 | width: 326px; |
47 | } |
48 | #login { |
49 | margin: auto; |
50 | padding: 114px 0 0; |
51 | width: 320px; |
52 | } |
53 | #login_error, .login .message { |
54 | margin: 0 0 16px 8px; |
55 | padding: 12px; |
56 | } |
57 | .login #nav, .login #backtoblog { |
58 | margin: 0 0 0 16px; |
59 | padding: 16px 16px 0; |
60 | text-shadow: 0 1px 0 #FFFFFF; |
61 | } |
62 | #backtoblog { |
63 | padding: 12px 16px 0; |
64 | } |
65 | .login form .input, .login input[type="text"] { |
66 | background: none repeat scroll 0 0 #FBFBFB; |
67 | border: 1px solid #E5E5E5; |
68 | box-shadow: 1px 1px 2px rgba(200, 200, 200, 0.2) inset; |
69 | color: #555555; |
70 | font-size: 24px; |
71 | font-weight: 200; |
72 | line-height: 1; |
73 | margin-bottom: 16px; |
74 | margin-right: 6px; |
75 | margin-top: 2px; |
76 | outline: 0 none; |
77 | padding: 3px; |
78 | width: 100%; |
79 | } |
80 | .login #pass-strength-result { |
81 | border-style: solid; |
82 | border-width: 1px; |
83 | font-weight: 700; |
84 | margin: 12px 0 6px; |
85 | padding: 6px 5px; |
86 | text-align: center; |
87 | width: 250px; |
88 | } |
89 | .mobile #login { |
90 | padding: 20px 0; |
91 | } |
92 | .mobile #login form, .mobile #login .message, .mobile #login_error { |
93 | margin-left: 0; |
94 | } |
95 | .mobile #login #nav, .mobile #login #backtoblog { |
96 | margin-left: 8px; |
97 | } |
98 | .mobile #login h1 a { |
99 | width: auto; |
100 | } |
101 | body.interim-login { |
102 | height: auto; |
103 | } |
104 | .interim-login #login { |
105 | margin: 5px auto 20px; |
106 | padding: 0; |
107 | } |
108 | .interim-login.login h1 a { |
109 | width: auto; |
110 | } |
111 | .interim-login #login_error, .interim-login.login .message { |
112 | margin: 0 0 16px; |
113 | } |
114 | .interim-login.login form { |
115 | margin: 0; |
116 | } |
