2018.08.25 2018.08.25

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

こんばんは、ゾノ( @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
無料相談フォーム

Wordpressのカスタマイズに関する相談ならどんな内容でもご相談ください。
相談への回答は記事にして公開し、公開後はツイッターでもお知らせいたします。
※すべての相談に回答するとは限らない点のみご了承ください

ゾノについて

興味ある方を探しています!

このブログと一緒によく読まれているブログ