WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
Plugin "Custom Login" to change the design of the login screen

ログイン画面のデザインを変更するプラグイン「Custom Login」

公開日:2016年8月11日 バックエンド(管理)

WordPressで作成したサイトを自分で全て管理・編集している場合には必要ないかもしれませんが、

  1. 多人数で管理画面を見ることがあるようなサイト
  2. 作成したサイトを他の方に管理してもらう(クライアントに提供する)サイト
  3. 公開用ではなく社内の情報伝達として運営するサイト

などでは一目でWordPressで作成したサイトと分かるのはちょっと格好悪いですね。「Custom Login」は素っ気ないWordPressのログイン画面のデザインをカスタマイズしてよりオリジナルなサイトを構築するためのプラグインです

【Custom Login】プラグインの基本的な機能・できること

公式の紹介ページでは詳しく書かれていないので、変更できる点を列挙します

ログイン画面デザイン変更機能

  1. 背景色の変更
  2. 背景画像の挿入と大きさの変更
  3. ワードプレスロゴを非表示にする
  4. ロゴの代わりに画像を挿入する
  5. ユーザー名・パスワード入力欄の背景に画像を使う
  6. 文字色の変更
  7. フォーム下部の表示項目とデザインの変更
  8. カスタムCSSの使用
  9. カスタムHTMLの使用
  10. カスタムjQueryの使用

おまけ機能

  1. Custom Loginの設定内容を反映するかどうかの選択
  2. ログイン失敗時の揺れ画面を停止
  3. WordPressの login CSSを削除
  4. パスワード忘失に関する文章を削除

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。
    ※また、ページによってはテスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

【Custom Login】プラグインの設定画面や表示の日本語化と翻訳

当サイトで私が翻訳した【Custom Login】プラグインの日本語化ファイルを配布しています。

翻訳ファイルは

からダウンロードできます(ダウンロードの方法や日本語の適用方法なども解説しています)

翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Custom Login】プラグインのインストールと設定

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。
    ※また、ページによってはテスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

【Custom Login】プラグインの基本的な使い方

日本語化すれば設定は容易にできます。設定では前述した「このプラグインでできる機能」の設定が使用できます

設定は管理画面の「設定」→「Custom Login」から行います

使い方

設定を変更すればすぐに反映され、ログイン画面のデザインが変更されます。

プラグイン使用上の注意点

プラグインの設定画面に「WordPressのコアファイルにCustom Loginの設定内容を挿入することを許可します(Custom Loginの設定を反映します)」というチェック欄があります。設定した内容を反映したままプラグインの削除を行うと不具合が発生する可能性がありますから、必ずこの項目をオフにして再度ログイン画面を表示し、通常のログイン画面が表示されるかどうかを確認してからプラグインの停止・削除をするようにしてください。

このプラグインは有料で拡張機能が用意されています。未検証ですが、必要なら使ってみてください

  1. Style Pack #2/スタイルの変更に関する拡張機能です
  2. Style Pack #1/スタイルの変更に関する拡張機能です
  3. No Password Login/パスワードなしでログインできるようになります(この機能は不要だと思います)
  4. Login Redirects/ログイン後にダッシュボード以外のページへリダイレクトします(これは別の無料プラグインを追加することで解決できます)
  5. Page Template/ログインを通常のログインURLから別の固定ページへ変更します
  6. Stealth Login/2段階認証機能です

拡張機能の代わりになりそうな無料プラグイン

ログイン後のリダイレクト

ログインURLを別ページにする(wp-login.phpを変更します)

2段階認証

代替プラグインについては当サイトの紹介ページや公式ページを確認の上、判断ください

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。