ケイタWordPressのログイン画面をカスタマイズしてデザインを変更してみようツイート1シェアはてブ20Pocket81WordPressのログイン画面のデザインは初期状態のままでしょうか。初期状態のままであれば、この機会にログイン画面のデザインにもぜひこだわってみましょう。今回はWordpressのログイン画面のカスタマイズ方法を学びながらログイン画面のデザインを変更していく方法を解説していきます。最後にWordPressのログイン画面の構成要素WordPressのデフォルトのログイン画面は背景(body)ロゴユーザー名入力欄パスワード入力欄ログインボタン「パスワードをお忘れですか」テキスト「~へ戻る」テキストから構成されています。Wordpressのログイン画面のカスタマイズにはコアファイルに手を加える必要は基本的にありません。テーマファイルのfunctions.phpにカスタマイズ用のお決まりの記述をしていくだけでカスタマイズできます。Codexログイン画面のロゴのカスタマイズWordPressのログイン画面で一番目立っているロゴを変更してみましょう。ロゴのソースコードはh1タグで囲まれ、リンク先はWordpress日本語公式ページとなっているだけで、画像が背景画像として読み込まれています。ロゴを変更するにはlogin_enqueue_scriptsフックを用います。functions.phpにロゴ部分の背景画像を変更する以下の記述を加えます。);ロゴのサイズによってはさらに背景画像サイズや高さの指定などを行う必要がありますが、上記コードに追記すれば上書きが可能です。ロゴ画像のパスは画像を置いたパスを適宜指定してください。これにより、ログイン画面は以下のように変わります。ロゴのリンク先とタイトルテキストの変更また、ロゴのリンク先やタイトルを変更するにはさらに以下の記述をfunctions.phpに加えます。‘http://...’;を入力します。タイトルはサイト名の部分を書き換えてください。背景やフォームやボタン、さらにはロゴのCSSとJavaScriptの変更については実は外部ファイルにまとめた方が管理上便利です。ログイン画面カスタマイズ用のスタイルシートとJSファイルをテーマファイル内に作成し、以下のコードをfunctions.phpに記述すれば毎回functions.php内でごちゃごちゃする必要がなくなります。);あとは外部ファイル内で各要素にカスタマイズ用の記述を指定していけばOKです。JavaScriptのカスタマイズはあまり必要ないかもしれませんが、一応こんな風に外部ファイルとして読み込めるということを覚えておきましょう。ログイン画面をカスタマイズするときに使えるセレクタ一覧Codexには指定できるCSSセレクタの一覧が紹介されています。どのセレクタがどの要素に使われているのかコメントを付しておきました。*/これらを利用してスタイルシート内に記述していけばログイン画面はかなり変わります。cover;}画像はテーマファイル内の画像フォルダに置いてパスを指定しています。背景画像は画面サイズに合わせて自動で拡大/縮小されるようにしています。画像を使わずに背景色のみを指定することもできます。ソースコードを見られてしまえばリンク先にアクセスされてしまうのですが、ソースコードからも消したいならばコアファイルwp-login.phpを直接編集してください。(※重要なファイルなのでwp-login.phpを直接編集するのはあまりおすすめしません。自己責任でお願いします。)ログイン画面カスタマイズ例ログイン画面をCSSセレクタのみ指定していくだけでものの10分で以下のようなログイン画面ができあがります。背景画像とロゴが変わるだけでも雰囲気がガラッと変わります。応用として疑似要素beforeとafterを駆使していけばコアファイルをいじることなく追加のテキストを加えることも可能です。最後にWordPressで構築したサイトに一度ログインしてしまえば、ログイン状態が保存されているかぎりログイン画面を見る機会はありません。ログイン状態の保存が切れれば定期的にログイン画面を見ることになります。自分1人で運営しているサイトであればデフォルトの殺風景なログイン画面でもいいかもしれません。複数の人、さらには不特定多数の人がログインする会員サイトをWordpressで運営しているのであれば第一印象がやはり大事です。ログイン画面のカスタマイズはかなり簡単なのでぜひ挑戦してみてくださいね。おすすめ記事【最新版】WordPressのおすすめプラグイン11選!本当に必要なものだけ厳選しましたおすすめ記事【無料あり】本気でオススメしたいプログラミングスクール3つ【実際に受講した】この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイート1シェアはてブ20Pocket81この記事をかいた人ケイタ都内に潜むWebエンジニア。制作/運用/データ解析など幅広くやってます。応援は@keitaoriginalからどうぞ。