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

WordPressサイトにプレミアムコンテンツを作成するために何時間も費やしたのに、訪問者がパスワード保護されたページにアクセスすると、時代遅れに見える使いにくいデフォルトのフォームが表示されることがよくあります。

ページがブランドを反映していなかったり、信頼を築けなかったりすると、潜在的な顧客が離れてしまう可能性があります。

わかります。これは、ビジネスに静かに影響を与える可能性のある、WordPressの些細な詳細の1つです。

メンバーシップサイトの管理経験から、パスワードページへの簡単なカスタマイズでもユーザーエクスペリエンスを向上させ、コンバージョンに役立つことがわかっています。

そのため、このガイドを作成しました。WordPressで、見た目が良く、ブランドに合い、訪問者を惹きつけるパスワード保護ページをカスタマイズする方法を学びましょう。🧑‍💻

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

WordPressでは、パスワード保護されたページは、特定のコンテンツの可視性をロックするセキュリティ機能です。アクセスを許可する前に、ユーザーは秘密のキーを入力する必要があります。

しかし、デフォルトのデザインは時代遅れでプロフェッショナルに見えないことがよくあります。そして、一貫したブランディングがユーザーの信頼を築くことが証明されているため、一般的なフォームはエンゲージメントを損なう可能性があります。

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

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

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

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

次のセクションでは、WordPressでパスワード保護を有効にする方法を説明します。また、特定のページ、サイト全体、およびさまざまなセクションをカスタマイズするさまざまな方法も紹介します。

ここでは、カバーするすべてのトピックの簡単な概要を説明します。

パスワード保護されたページのデザインを一新する準備はできましたか？始めましょう！

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

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

ページを編集するか、新しいページを追加するだけです。

WordPressコンテンツエディターに入ったら、右側の設定パネルにある「ステータスと表示設定」の下の「公開」オプションをクリックします。

次に、さまざまな「投稿の表示設定」オプションが表示されます。

単純に「パスワード保護」オプションを選択し、ページのパスワードを入力してください。

次に、「更新」または「公開」をクリックします。

これで、ウェブサイトにアクセスして、パスワード保護されたページが機能していることを確認できます。

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

方法1：CSS Heroを使用してデフォルトのパスワード保護デザインをカスタマイズ

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

ページをカスタマイズするには、CSS Heroのようなツールを使用するだけです。これにより、完全に新しいページをゼロから作成するのではなく、デフォルトのWordPressフォームをテーマに合わせてスタイル設定できます。

私たちはそれを広範囲にテストしました。詳細はCSS Heroレビューで確認できます。

まず、CSS Heroアカウントが必要です。CSS Heroウェブサイトで、「今すぐ入手」をクリックし、ニーズに合ったプランを選択して、サインアッププロセスを完了してください。

完了したら、CSS Heroアカウントにログインして、プラグインのzipファイルとライセンスキーにアクセスしてください。その後、ファイルをダウンロードし、パスワードマネージャーのような安全な場所にライセンスキーを保管できます。

これで、CSS Heroプラグインをインストールして有効化できます。

WordPressの管理画面で、プラグイン » プラグインを追加に移動します。

次に、「プラグインのアップロード」ボタンをクリックしてファイルアップローダーを開きます。

「ファイルを選択」ボタンをクリックしてCSS Heroのzipファイルをアップロードし、「今すぐインストール」をクリックします。

インストール後、「有効化」ボタンをクリックしてWordPressサイトで有効化することを忘れないでください。詳細については、WordPressプラグインのインストール方法に関するガイドを参照してください。

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

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

開始するには、パスワードフォームが表示されていることを確認する必要があります。ログインしている場合、代わりにページコンテンツが表示されることがあります。CSS Heroのツールを使用して表示を「ログアウト」モードに切り替えるか、パスワードフォームの要素が表示されている場合はクリックしてください。

次に、背景色を変更したり、背景画像を追加したり、別のフォントを使用したり、間隔を編集したりできます。これらはすべて左側のパネルから行えます。

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

それに加えて、[Borders]タブに移動することで、ページのメイン見出しの周りに境界線を追加できます。

境界線の幅、色、スタイル、およびその他の変更したいものを選択するだけです。

カスタマイズが完了したら、一番下にある「保存して公開」ボタンをクリックしてください。

これで、ウェブサイトにアクセスして、カスタマイズされたデフォルトのパスワード保護ページを確認できます。

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

たとえば、お問い合わせフォーム、ソーシャルメディアボタン、オプトインフォーム、カウントダウンタイマーなどの要素を追加することはできません。

これを踏まえて、ランディングページビルダーを使用してWordPressで特定のパスワード保護ページをカスタマイズする方法を見てみましょう。

方法2：SeedProdを使用して特定のパスワード保護ページをカスタマイズする

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

私たちはSeedProdを使用してカスタムランディングページやテーマ全体を構築したことがあり、その出来栄えに非常に満足しています。その機能についてさらに詳しく知りたい場合は、詳細なSeedProdレビューをご覧ください。

開始するには、SeedProdウェブサイトにアクセスしてアカウントを作成できます。「今すぐSeedProdを入手」ボタンをクリックし、プランを選択して、画面の指示に従ってサインアップを完了してください。

登録すると、独自のSeedProdダッシュボードが利用できるようになります。ここでは、プラグインのzipファイルとライセンスキーを見つけることができます。

それでは、SeedProdプラグインをインストールして有効化しましょう。

WordPress管理画面で、プラグイン » プラグインを追加 に移動します。次に、検索バーを使用してプラグインをすばやく見つけ、検索結果で「今すぐインストール」をクリックします。

プロセスを完了するには、「有効化」ボタンをクリックすることを忘れないでください。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

アクティベートすると、WordPressダッシュボードにSeedProdのウェルカム画面が表示されます。

ここから、ライセンスキーを入力し、「キーの検証」ボタンをクリックしてSeedProd Proをアクティブ化する必要があります。ライセンスキーはSeedProdアカウントエリアにあります。

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

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

ここでは、Coming Soonページを例として使用します。これは、特定のページで訪問者を傍受する「ゲートキーパー」またはオーバーレイとして使用されます。しかし、これらのカスタマイズ技術は、WordPressサイト上のパスワード保護されたコンテンツであれば、どれにでも機能します。

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

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

使用したいテンプレートにカーソルを合わせ、オレンジ色のチェックマークボタンをクリックしてください。

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

ページ名とURLスラッグを選択し、[Save and Start Editing the Page]ボタンをクリックするだけです。

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

ここで、パスワード保護されたランディングページをカスタマイズし、テキスト、画像、ボタンなどのさまざまな要素を追加できます。

SeedProdは、オプトインフォーム、コンタクトフォーム、カウントダウンタイマー、プログレスバー、ソーシャル共有オプションなどの高度なブロックも提供しています。

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

SeedProdは、このようにして、コンテンツを保護するためにページのフロントエンドにパスワードフォームを追加することもできます。

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

次に、「カスタムHTML」ブロックをクリックできます。

ここから、「カスタムコード」フィールドに[seed_bypass_form]ショートコードを入力します。この特定のショートコードは、訪問者が見る実際のパスワード入力ボックスと送信ボタンをレンダリングするものです。

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

SeedProdは、さまざまなメールマーケティングサービスとも統合されています。

ランディングページにコンタクトフォームを追加し、メールマーケティングツールを接続してメールリストを構築し、ユーザーと連絡を取り続けることができます。

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

詳細については、SeedProdで美しいComing Soonページを設定する方法に関するガイドを参照してください。

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

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

開始するには、SeedProdビルダーの「ページ設定」タブに移動し、「アクセス制御」設定をクリックします。

その後、「Bypass URL」というラベルのフィールドに、希望するパスワードを入力するだけです。これは「URL」と呼ばれていますが、このテキストは訪問者がコンテンツを表示するために必要なパスワードとして機能します。

このフレーズを使って、yourwebsite.com/page/?bypass=secret のような直接リンクを共有することもできます。これにより、クライアントはパスワードを入力せずにページを開くことができます。

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

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

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

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

次に、「Page Settings」タブの「General」設定に移動し、Page Status を「Draft」から「Publish」に変更できます。これにより、デザインテンプレートが保存および公開されますが、最終ステップで「Coming Soon Mode」を切り替えるまで保護は有効になりません。

ここから、ランディングページビルダーを閉じ、WordPress 管理パネルから SeedProd » Landing Pages に移動できます。

次に、「Coming Soon Mode」の下のトグルをクリックして、カスタムパスワード保護ページを有効にします。

これで完了です！

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

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

ボーナスヒント：その他のカスタムパスワード保護ページの使用例

WordPressサイトでパスワード保護を使用する他の方法をさらに探したいですか？サイトのパスワード保護されたページをレベルアップするための2つのヒントを次に示します。

ヒント1：ウェブサイト全体にカスタムパスワード保護ページを作成する

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

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

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

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

変更が完了したら、上部にある「保存」ボタンをクリックしてください。SeedProdは、カスタムパスワード保護ページをウェブサイト全体に表示します。

ヒント2：WordPressでメンバーシップ保護セクションを作成する

メンバーシップレベルに基づいて、さまざまなウェブサイトセクションを制限することもできます。

以前の方法とは異なり、誰でも共有できる単一の共有パスワードを使用するのではなく、この方法ではユーザーが登録して独自のユニークなアカウントでログインする必要があります。これにより、はるかに高いセキュリティと制御が提供されます。

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

私たちは、ビデオメンバーシップサイトでもこれを使用しており、その素晴らしさを保証できます。ツールの詳細については、完全なMemberPressレビューをご覧ください。

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

開始するには、まずウェブサイトにメンバーシップを追加する必要があります。WordPressダッシュボードからMemberPress » Membershipsに移動し、「新規追加」ボタンをクリックしてください。

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

また、請求タイプを1回限りから定期払いに変更したり、メンバーシップを無期限にするか、特定の期間後に失効するように編集したりすることもできます。無料トライアルを提供することもできます。

完了したら、「公開」ボタンをクリックすることを忘れないでください。

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

ここから、「保護されたコンテンツ」オプションの下にあるドロップダウンメニューをクリックできます。

MemberPressは、単一のページであっても、WordPressのすべてのページであっても、コンテンツを保護するための多くのオプションを提供します。このチュートリアルでは、単一のページをパスワード保護します。

それでは、ドロップダウンメニューから「単一ページ」オプションを選択し、ページのタイトルを入力しましょう。

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

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

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

次に、ウェブサイトにアクセスして、パスワードで保護されたページが機能していることを確認できます。メンバーは、コンテンツを表示するためにアカウントにサインインする必要があります。

もっとやりたいですか？MemberPressでできるクールなユースケースを以下に示します。

• 動画にパスワードを設定したり、企業のチーム向けにグループメンバーシップを提供したりすること。
• 購読者に有料ニュースレターへのアクセスを許可するパスワードを作成することなど。
• WordPressフォームのパスワードを追加すること。

よくある質問：WordPressのパスワード保護ページをカスタマイズする

WordPressでパスワード保護されたページをカスタマイズすることについて、まだ質問がありますか？ここでは、よくある質問とその回答を、迅速かつ明確にまとめています。

パスワード保護されたページと非公開ページの違いは何ですか？

パスワード保護されたページは、正しいパスワードを持っている人なら誰でも表示できます。非公開ページは、管理者やエディターなど、サイトにログインしているユーザーのみが表示できます。

パスワードページをカスタマイズするとサイトが遅くなりますか？

SeedProdのような適切にコーディングされたプラグインを使用している場合、サイトの速度に目立った影響を与えることはありません。SeedProdはパフォーマンスのために最適化されています。

ただし、最適化されていない大きな画像や複雑なスクリプトを追加すると、読み込み時間に影響を与える可能性があることに注意してください。ウェブ用の画像を最適化するためのベストプラクティスを常に遵守してください。

検索エンジンはパスワードで保護されたコンテンツをインデックスできますか？

いいえ、検索エンジンはパスワードで保護されたコンテンツをインデックス化できません。ただし、「Page Title」は検索結果に表示される場合があり、多くの場合「Protected:」という接頭辞が付いていることに注意してください。ページタイトルに直接機密情報を入れないようにしてください。

複数のページに同じパスワードを使用できますか？

はい、複数の異なるページに同じパスワードを使用できます。ただし、セキュリティと管理を向上させるためには、MemberPressのようなプラグインを使用して、異なるコンテンツグループへのアクセスを制御する方がはるかに優れたソリューションです。

コンテンツ保護とサイトセキュリティに関する追加ガイド

この記事がWordPressでパスワードで保護されたページをカスタマイズする方法を学ぶのに役立ったことを願っています。ウェブサイトを保護する他の方法をさらに探求することに興味がある場合は、これらのガイドが役立つかもしれません。

• WordPressループからパスワード保護された投稿を非表示にする方法
• WordPress でパスワード保護された投稿の抜粋を表示する方法
• WordPressでコンテンツを保護する方法
• WordPressでペイウォールを作成する方法（プレビューオプション付き）
• おすすめのWordPressコンテンツ保護プラグイン

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。