Password Protectedの使い方!ログイン画面のデザイン変更方法も解説

  • Webサイトやブログのコンテンツを特定の人だけに閲覧できるように制限したい
  • ローカル環境にWordPressを設置しているが、公開しないようにアクセス制限をかけたい
  • WordPressの管理画面にアクセスできる人を限定したい
  • セキュリティ上の理由で、WordPressサイトにアクセスする際にパスワードを必要とするようにしたい

そんな方におすすめのWordPressにパスワードを設定できるプラグイン「Password Protected」の使い方について解説してきます。

この記事を執筆・監修する人

浅賀 理生(あさか まさお)

株式会社インスパイアデザイン代表/ディレクター
Web制作に携わって15年以上

主にWordPressを用いて、お客様のWebサイト制作のプロジェクトを進めている立場から、記事を執筆していきます。

Password Protectedの特徴・他のプラグインとの比較

Password Protectedの使い方を解説する前に、特徴や他のプラグインとの違いなどについて触れていきたいと思います。

すぐに使い方を見たい方はこちらのセクションへ

Password Protectedの使い方について本記事に辿り着いた方は、特定の人(会員やお客様)に限定してコンテンツを見せたい方や、公開前のサイトなので制限をかけたいなどなんらかの理由があると思いますが、そのような時にBasic認証という手段もあったかと思います。

私も実際にお客様から、会員限定のコンテンツなので、Basic認証をかけたい。その際、知識がないのでプラグインを使いたいとの意向から、色々調べた結果、Password Protectedに辿り着きました。

Basic認証を実装するためのプラグインとしては、「WP BASIC Auth」というものと「HTTPS Auth」というプラグインがありましたが、少し信頼度に欠けることから使用は避けました。

その理由としては

  • 公式プラグインとして登録されていない
  • インストール数が少ない

などの理由でした。

上記2つのプラグインと比較した際に、Password Protectedは、WordPress公式ディレクトリに登録されていたため、信頼度という点と、シンプルな使い勝手が良かったため選びました。(WordPress公式ディレクトリに登録されるには厳しい審査がある)

Password Protectedの使い方

前置きが長くなりましたが、実際の使い方について解説していきます。

まずはプラグイン新規追加より、Password Protectedで検索し、今すぐインストールをクリックしてください。
Password Protectedインストール
インストールしたら、プラグインを有効化してください。
Password Protectedプラグイン有効化
有効化した後、管理画面左側のメニューより[設定]→[パスワード保護]をクリック
Password Protectedメニュー項目
パスワードを設定

何項目か設定する箇所がありますが、基本的には下記のような設定でOKです。パスワードを入力後、[変更を保存]ボタンを押して設定完了です。

Password Protected設定画面

項目について

No名称説明
1パスワード保護の状況パスワード保護を有効にするか無効にするか選択できます。 有効にしたい場合はチェックを入れてください。
2許可する権限パスワードの入力なしにWebサイトが閲覧できる権限の範囲を指定できます。
3新しいパスワード保護パスワードを変更する際に使用します。
4許可する IP アドレスパスワードなしでログインできるIPアドレスを指定できます。
5二度目以降は不要にする一度パスワードを入力した方は、二度目以降パスワードなしでログインすることができます。
6許可を保持する日数二度目以降は不要にするにチェックを入れた場合の有効日数を指定できます。
設定完了

設定が完了すると、画面上のバーの部分に鍵のマークが追加されます。

管理者ログアウトを行い、サイトを見ると、下記のようにパスワードを求められる画面が表示されます。

パスワードの設定はこれで完了!めちゃくちゃ簡単ですよね。

変更の際も同じ手順で行えばOKです。

ログイン画面のデザインを変更したい場合

会員などの特定の人がログインする画面について、デフォルトのままだとWordPressのロゴが表示されており、少し微妙に感じますよね?

標準のログイン画面

ですが、Custom Login Page Customizerというプラグインを使用すれば、このログイン画面のデザインを変更することが可能となります。

Custom Login Page CustomizerもWordPress公式ディレクトリに登録されている

Custom Login Page Customizerをインストール
[カスタマイズ]よりカスタマイズのメニューを選択
編集画面

下記のような編集画面が表示されます。見ての通り、標準のログイン画面が表示されています。

ロゴを変更する(非表示にする)

Logo Styleメニューをクリックすると、Logoの設定画面が表示されます。

ファイルを選択で変更したいロゴ(企業ロゴやブランドロゴ)を選択することができ、URLでは、WordPress上に登録してあるページを選ぶことでリンクを設定できます。(トップページなど)

Disable Logoを選択するとロゴを非表示にすることができます。

今回は下記のように変更してみました。

文言等を変更する

Label Stylesを選択するとログイン部分の文言や文字の大きさ、色などを変更することができます。

下記、右側が変更したもの。Passwordの文字をわかりやすいよう日本語にし、大きく赤字にしてみました。

ビフォー
アフター
背景画像を変更する

Body Backgroundより背景画像を変更することも可能です。

今回はデフォルトで登録されていた画像に差し替えてみましたが、印象がかなり変わってますよね。

Custom Login Page Customizerプラグインを使えば、このような手順でログイン画面のデザインを変更することができますので、あなたの会社やサービス、ブランドのイメージを手軽に表現することが可能です。

この記事を書いた人

浅賀理生(あさかまさお)

株式会社インスパイアデザイン代表。釣りとコーヒーをこよなく愛する家族LOVEな二児のパパ。WordPressを用いたWeb制作&開発のご相談はお気軽にどうぞ