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を使用して特定のパスワード保護ページをカスタマイズする

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

私たちはSeedProdを実際に使用してカスタムランディングページやテーマ全体を構築しており、本当に気に入っています。SeedProdができることについてさらに詳しく知りたい場合は、私たちの詳細なSeedProdレビューをご覧ください。

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

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

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

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

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

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

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

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

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

例として、近日公開ページを使用します。これは、特定のページで訪問者をインターセプトする「ゲートキーパー」またはオーバーレイとして使用します。ただし、これらのカスタマイズテクニックは、WordPressサイトのパスワードで保護されたコンテンツに機能します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 に移動し、「新規追加」ボタンをクリックしてください。

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

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

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

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

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

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

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

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

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

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

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

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

• 動画のパスワード設定、または法人チーム向けのグループメンバーシップの提供。
• 有料ニュースレターなどへのアクセスを購読者に付与するためのパスワードを作成する。
• WordPressフォームにパスワードを追加する。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。