WordPress でパスワードで保護されたページをカスタマイズする方法


Web サイト上にパスワードで保護されたカスタム ページを作成したいですか?

WordPress パスワード保護を使用して、コンテンツを非表示にし、特定のページへのアクセスを制限できます。ただし、デフォルトのログインとパスワード入力のレイアウトは単純で魅力的ではありません。

この記事では、WordPress でパスワードで保護されたページをカスタマイズする方法を説明します。

WordPress でパスワードで保護されたページをカスタマイズする理由

WordPress ブログ上に、選択したクライアントまたはメンバーのみに表示されるページまたは投稿を作成する場合は、パスワード保護機能を使用してコンテンツをロックできます。

同様に、新しい WordPress Web サイトを作成していて、誰にでも閲覧されたくない場合は、パスワードで保護されたページを使用するのが合理的です。

ただし、デフォルトのパスワードで保護されたページのデザインは非常に基本的で、魅力的ではありません。以下にそのプレビューを示します。

パスワードで保護されたページをカスタマイズすると、デザインやレイアウトを自由に変更できます。ページをより魅力的なものにするのに役立ち、ブランドに合わせてよりプロフェッショナルな外観と優れたユーザー エクスペリエンスを得ることができます。

つまり、WordPress でパスワード保護を有効にする方法と、特定のページ、サイト全体、さまざまなセクションをカスタマイズするさまざまな方法を説明します。

以下のリンクをクリックして、希望のセクションに進むことができます。

WordPress でページをパスワード保護する方法

WordPress ページをカスタマイズする方法を説明する前に、WordPress にはページと投稿をパスワードで保護するための設定が組み込まれていることを知っておく必要があります。

ページを編集するか、新しいページを追加するだけです。 WordPress コンテンツエディターを開いたら、右側の設定パネルの「ステータスと公開設定」の下にある「パブリック」オプションをクリックします。

次に、さまざまな投稿の可視性オプションが表示されます。

「パスワード保護」オプションを選択し、ページのパスワードを入力するだけです。

次に、[更新] または [公開] をクリックすると、ライブ ページがパスワードで保護されます。

これで、Web サイトにアクセスして、ページが実際に動作しているのを確認できるようになります。

次に、デフォルトのパスワードで保護されたページをカスタマイズする方法を見てみましょう。

CSS ヒーローを使用してデフォルトのパスワードで保護されたデザインをカスタマイズする

WordPress コンテンツエディターからパスワード保護を有効にすると、ページのスタイル設定にサイトのテーマが使用されます。

ページをカスタマイズするには、CSS Hero などのツールを使用するだけです。コードを編集せずにページのデザインとレイアウトを編集できます。

まず、CSS Hero プラグインをインストールして有効にする必要があります。詳細については、WordPress プラグインのインストール方法に関するガイドをご覧ください。

アクティブ化すると、CSS ヒーロー オプションが WordPress 管理バーの上部に追加されます。 「CSS Hero でカスタマイズ」オプションをクリックしてください。

これにより、CSS Hero ビジュアル ビルダーが起動し、ページを編集およびカスタマイズできます。

まず、ページ上の任意の要素をクリックするだけです。

次に、左側のパネルから背景色の変更、背景画像の追加、別のフォントの使用、間隔の編集などを行うことができます。

たとえば、「背景」タブに移動して、グラデーション効果のある背景色を追加してみましょう。また、ユーザーがパスワードを入力する必要があるボックスの色と、「Enter」ボタンの色も変更します。

さらに、[境界線] タブに移動して、ページのメイン見出しの周囲に境界線を追加できます。

枠線の幅、色、スタイル、その他お好みの変更を選択するだけです。

変更を行ったら、下部にある「保存して公開」ボタンをクリックすることを忘れないでください。

これで、Web サイトにアクセスして、カスタマイズされたデフォルトのパスワードで保護されたページを表示できるようになります。

CSS Hero を使用する場合の欠点は、ランディング ページ ビルダーが提供する柔軟性と高度なカスタマイズ オプションが得られないことです。

たとえば、CSS ヒーローを使用して、連絡先フォーム、ソーシャル メディア ボタン、オプトイン フォーム、カウントダウン タイマーなどの要素を追加することはできません。

とはいえ、ランディング ページ ビルダーを使用して WordPress の特定のページをカスタマイズする方法を見てみましょう。

SeedProd を使用して特定のパスワードで保護されたページをカスタマイズする

パスワードで保護された特定のページをカスタマイズする最も簡単な方法は、SeedProd を使用することです。最高の WordPress ウェブサイトおよびページビルダーです。

このチュートリアルでは、プレミアム テンプレートとより多くのカスタマイズ機能が含まれている SeedProd Pro バージョンを使用します。 SeedProd Lite バージョンを無料で使用して、近日公開ページを作成することもできます。

まず、SeedProd プラグインをインストールしてアクティブ化する必要があります。サポートが必要な場合は、WordPress プラグインのインストール方法に関するガイドを参照してください。

アクティブ化すると、WordPress ダッシュボードの SeedProd のようこそ画面が表示されます。次に、ライセンス キーを入力し、[キーを確認] ボタンをクリックする必要があります。ライセンス キーは、SeedProd アカウント領域で見つけることができます。

その後、WordPress ダッシュボードから SeedProd » ランディング ページ に移動し、パスワードで保護された新しいカスタム ランディング ページを追加します。

この記事の後半では、パスワードで保護するページを選択する方法を説明します。サイト全体または特定のページのみをパスワードで保護できます。

このチュートリアルでは、パスワード保護を備えた Web サイト立ち上げ用の近日公開ページを作成します。ただし、特定のページをパスワードで保護するためにのみ使用する場合は、デザインを簡単にカスタマイズできます。

開始するには、「近日公開ページを設定する」ボタンをクリックするだけです。

次の画面では、SeedProd にさまざまなページ テンプレートが表示されるので、それらをすばやくカスタマイズできます。

使用したいテンプレートの上にカーソルを置き、オレンジ色のチェックマーク ボタンをクリックします。

テンプレートを選択すると、SeedProd は「新しいページの詳細を入力してください」というタイトルのポップアップ ウィンドウを開きます。

ページ名と URL スラッグを選択し、[保存してページの編集を開始] ボタンをクリックするだけです。

これにより、SeedProd ドラッグ アンド ドロップ ページ ビルダーが起動します。

ここでは、パスワードで保護されたランディング ページをカスタマイズし、テキスト、画像、ボタンなどのさまざまな要素を追加できます。 SeedProd は、オプトイン フォーム、お問い合わせフォーム、カウントダウン タイマー、プログレス バー、ソーシャル共有オプションなどの高度なブロックを提供します。

要素を追加するには、左側のメニューから任意のブロックをドラッグし、右側のテンプレートにドロップするだけです。その後、要素をクリックして表示されるオプションを調整するだけで、要素をカスタマイズできます。

これは、SeedProd でページのフロントエンドにパスワード フォームを追加してコンテンツを保護する方法でもあります。

まず、SeedProd ビルダーに「カスタム HTML」ブロックを追加できます。カスタム HTML ブロックをテンプレートにドラッグ アンド ドロップするだけです。

次に、カスタム HTML ブロックをクリックします。

ここから、[カスタム コード] フィールドに[seed_bypass_form] ショートコードを入力します。それでおしまい!完了したら、忘れずに「保存」ボタンをクリックしてください。

SeedProd は、さまざまな電子メール マーケティング サービスとも統合します。ランディング ページに問い合わせフォームを追加し、電子メール マーケティング ツールに接続して電子メール リストを作成し、ユーザーと連絡を取り合うことができます。

ランディング ページ ビルダーの [接続] タブに移動し、電子メール マーケティング サービスを選択するだけです。

SeedProd の特定のページにパスワード保護を設定する

[seed_bypass_form] ショートコードを使用するカスタムの近日公開ページを作成したら、次のステップは SeedProd を使用して特定のページにパスワード保護を設定することです。

まず、SeedProd ビルダーの [ページ設定] タブに移動し、[アクセス制御] 設定をクリックする必要があります。

その後、「バイパス URL」フィールドにパスワードを入力すると、制限されたコンテンツにアクセスするために使用できるようになります。

[バイパス URL] フィールドに入力したテキストはパスワードとして機能するだけでなく、クライアントやチーム メンバーがパスワード保護を回避してページにアクセスするために使用できるリンクとしても機能することに注意してください。

SeedProd を使用すると、管理者、ログイン、ダッシュボード、アカウントなどの特定の URL をサイトから除外できます。これにより、サイト所有者がサイトからロックアウトされることがなくなります。

次に、どの URL をパスワードで保護するかを選択する必要があります。

「アクセス制御」設定の「URL を含める/除外する」セクションまで下にスクロールするだけです。その後、「URL を含める」オプションを選択し、制限したい特定のページを入力します。

完了したら、上部にある「保存」ボタンをクリックするだけです。

次に、[ページ設定] タブの [一般] 設定に移動し、ページのステータスを [下書き] から [公開] に変更します。

その後、ランディング ページ ビルダーを閉じて、WordPress 管理パネルからSeedProd » ランディング ページに移動します。

ここから、「Coming Soon Mode」の下のトグルをクリックして、パスワードで保護されたカスタム ページをアクティブにします。

それだけです! WordPress の特定のページにのみ表示される、パスワードで保護されたカスタムのランディング ページが正常に作成されました。

Web サイト上のこれらのページにアクセスするだけで、カスタマイズされたパスワードで保護されたページが動作していることを確認できます。

Web サイト全体に対してパスワードで保護されたカスタム ページを作成する

SeedProd を使用すると、Web サイトのすべてのページにパスワードで保護されたページを表示することもできます。このようにすると、ユーザーはコンテンツにアクセスするためにパスワードを入力する必要があります。

まず、WordPress ダッシュボードからSeedProd » ランディング ページに移動します。次に、「近日公開モード」パネルの「ページの編集」ボタンをクリックします。

次に、上部の「ページ設定」タブに移動し、「アクセス制御」設定に移動します。

その後、「URL を含める/除外する」セクションまで下にスクロールし、「Web サイト全体に表示」オプションを選択します。

変更を加えたら、上部にある「保存」ボタンをクリックしてください。

SeedProd は、Web サイト全体にパスワードで保護されたカスタム ページを表示します。

WordPress でカスタムのパスワードで保護されたセクションを作成する

WordPress のさまざまな Web サイトセクションをさまざまなユーザーセットからパスワードで保護することもできます。これは、会員制 Web サイトを運営していて、コンテンツ、プラグイン、アプリ、その他のダウンロード可能なファイルへのアクセスを制御したい場合に便利です。

Web サイトのさまざまな部分を制限する最良の方法は、MemberPress を使用することです。これは、コンテンツをパスワードで保護するために複数のメンバーシップ レベルを作成できる、最高の WordPress メンバーシップ プラグインです。

MemberPress を使用してさまざまなルールを設定すると、ユーザーは自分のメンバーシップ レベルに基づいてのみコンテンツにアクセスできるようになります。詳細については、WordPress メンバーシップ サイトの作成に関するガイドをご覧ください。

まず、Web サイトにメンバーシップを追加する必要があります。 WordPress ダッシュボードから MemberPress » メンバーシップ に移動し、[新規追加] ボタンをクリックするだけです。

その後、メンバーシップ レベルの名前を入力し、説明を追加し、価格を設定できます。

また、請求タイプを 1 回限りから定期的なものに変更したり、メンバーシップを永久にしたり、一定期間後に期限切れになるように編集したりすることもできます。

完了したら、忘れずに「公開」ボタンをクリックしてください。

次に、WordPress ダッシュボードから MemberPress » ルール に移動し、[新規追加] ボタンをクリックします。

ここから、「保護されたコンテンツ」オプションの下のドロップダウン メニューをクリックできます。 MemberPress は、単一のページであっても、WordPress ページ全体であっても、コンテンツを保護するための多くのオプションを提供します。

このチュートリアルでは、単一のページをパスワードで保護します。ドロップダウン メニューから [単一ページ] オプションを選択し、ページのタイトルを入力するだけです。

次に、アクセス条件を設定し、制限されたページを閲覧できるユーザーを設定する必要があります。 MemberPress を使用すると、メンバーシップ レベル、WordPress ユーザーの役割、機能、および個々のメンバーに基づいてコンテンツを保護できます。

このチュートリアルでは、ドロップダウン メニューから [メンバーシップ] を [プレミアム] に設定しましょう。これにより、プレミアム会員のみがページにアクセスできるようになります。さらに条件を追加して、複数のメンバーシップ レベルがページを表示できるようにすることができます。

完了したら、[ルールを保存] ボタンをクリックすることを忘れないでください。

その後、Web サイトにアクセスして、パスワードで保護されたページが動作していることを確認できます。メンバーは、ページのコンテンツを表示するには、自分のアカウントにサインインする必要があります。

ビデオにパスワードを設定したり、企業チームにグループ メンバーシップを提供したりできます。さらに、パスワードを作成して購読者に有料のニュースレターなどへのアクセスを許可することもできます。

WordPress でフォームをパスワードで保護する方法に関するガイドもあります。

この記事が、WordPress でパスワードで保護されたページをカスタマイズする方法を学ぶのに役立つことを願っています。コードを書かずに完全にカスタムの WordPress テーマを作成する方法に関するガイドや、最高の WordPress SEO プラグインの比較もご覧ください。

この記事が気に入っていただけましたら、WordPress ビデオ チュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。