2018.08.25

[WordPress]ログイン画面のロゴ・デザインを変更する方法

こんばんは、webエンジニアのゾノ( @ozonosho )です。

さて、今日のブログではWordPressでログイン画面のロゴ・デザインを変更する方法を紹介したいと思います。

今回は「僕の運営する相談サイト『ココトモ』のログイン画面のように自分のサイトに合わせたデザインにしたい」という相談をいただいたので実装してみました。

※ココトモのログイン画面はこちら

このようにログイン画面を好きなデザインにカスタマイズすることができます。

WordPressでログイン画面のロゴ・デザインを変更する方法

実装は簡単で、下記の2ステップでおこないます。

  1. ログイン画面のCSSを編集する
  2. ロゴ画像のリンク先・リンクタイトルを変更する

それぞれ説明していきます。

①ログイン画面のCSSを編集する

テーマのスタイルシートではログイン画面のCSSを編集できないため、ログイン画面用のCSSファイル「login.css」をテーマ内に作成したうえでfunctions.phpに下記のコードを追加してください。

あとは「login.css」でログイン画面の各要素にたいしてCSSを設定すれば、ログイン画面のデザインを自分好みにカスタマイズすることができます。

ちなみにココトモで使用している「login.css」はこちらです。

ロゴ画像を変更する部分だけすこし工夫が必要なので、上記のコードを参考にしてください。

②ロゴ画像のリンク先・リンクタイトルを変更する

CSSだけではリンク先などを変更することはできないので、ロゴ画像のリンク先・リンクタイトルを変更するためにはfunctions.phpに下記のコードを追加しましょう。

これで自分のサイトのURLとタイトルに変更されます。

上記コードでは管理画面の設定ページで登録したURLやタイトルを挿入していますが、下記のように手動でリンク先・リンクタイトルを挿入することも可能です。

これですべての作業が完了です!

ログイン画面をカスタマイズしていると「お!」と思われることが多いので、ぜひご自身のサイトでも色々と試してみてください。

おわりに

以上、今回の記事ではWordPressでログイン画面にテキストやリンクを追加する方法を紹介させていただきました。

当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。

あなたのサイトに理想の機能を実装!WordPressカスタマイズサービス

はじめまして、webエンジニアのゾノ( @ozonosho )です。 本サービスはあなたのWordPressサイトに要望どおりの機能......

→この記事を読む

ゾノについて

お仕事のご相談はこちら