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

WordPressサイトにプレミアムコンテンツを何時間もかけて作成しました。しかし、訪問者がパスワード保護されたページにたどり着くと、古びた使いにくいデフォルトのフォームが表示されます。

ページがブランドを反映していなかったり、信頼を築けなかったりするために、潜在的な顧客が離脱するのを見るのはフラストレーションが溜まります。🤷

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

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

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

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

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

要するに、デフォルトのパスワードページのデザインは古臭くプロフェッショナルではないため、信頼とエンゲージメントを損なう可能性があります。

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

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

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

基本的なパスワード保護ページ

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

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

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

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

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

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

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

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

コンテンツエディターで表示設定を変更する

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

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

パスワード保護オプションを選択

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

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

コンテンツエディターを使用したパスワード保護ページプレビュー

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

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

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

ページをカスタマイズするには、CSS Heroのようなツールを単純に使用できます。

コードを編集せずに、ページのデザインとレイアウトを編集できます。広範にテスト済みであり、すべてを当社のCSS Heroレビューで見つけることができます。

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

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

CSSヒーローボタンでカスタマイズ

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

開始するには、ページ上の任意の要素をクリックするだけです。

要素をクリックして編集を開始

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

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

背景色を変更する

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

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

境界線を編集して変更を保存する

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

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

CSSヒーローを使用したカスタマイズされたパスワード保護ページのプレビュー

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

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

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

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

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

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

まず、SeedProdプラグインをインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

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

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

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

SeedProdライセンスキーを入力

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

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

例としてメンテナンス中のページを使用しますが、これらのカスタマイズテクニックは、WordPressサイトのパスワードで保護されたコンテンツであれば何にでも適用できます。

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

新しい「近日公開」ページを作成

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

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

SeedProd で「近日公開」テンプレートを選択する

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

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

ページテンプレート名を入力

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

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

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

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

テンプレートにブロックを追加する

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

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

カスタムHTMLブロックを追加

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

ここから、[seed_bypass_form] ショートコードを「カスタムコード」フィールドに入力します。

SeedProdにショートコードを入力

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

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

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

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

メールマーケティングサービスを接続する
SeedProdで特定のページのパスワード保護を設定する

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

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

その後、制限されたコンテンツにアクセスするために人々が使用できるパスワードを「バイパスURL」フィールドに入力するだけです。

SeedProdのアクセス制御設定

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

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

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

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

パスワード保護するページを含める

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

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

SeedProdでランディングページを公開する

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

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

SeedProdで「近日公開」ページを有効にする

これで完了です!

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

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

カスタムパスワード保護ページプレビュー

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

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

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

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

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

SeedProd で公開準備完了ページを編集する

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

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

SeedProdの「ウェブサイト全体に表示」オプション

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

ヒント2:WordPressでカスタムパスワード保護セクションを作成する

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

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

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

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

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

MemberPressで新しいメンバーシッププランを追加

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

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

MemberPressでメンバーシップレベルを追加する

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

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

MemberPressで新しいメンバーシップルールを追加

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

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

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

MemberPressでパスワード保護のルールを設定する

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

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

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

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

メンバーシップのパスワード保護されたページを表示する

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

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

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

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

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

詳細については、WordPress の公開投稿、非公開投稿、パスワード保護投稿の違いに関するガイドをご覧ください。公開、非公開、パスワード保護された投稿の違いについて。

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

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

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

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

いいえ、検索エンジンのクローラーはパスワードを入力してコンテンツにアクセスすることはできません。これは、パスワードフォームの背後にあるすべてのものがインデックスに登録されないか、検索結果に表示されないことを意味します。

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

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

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

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

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

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

4 CommentsLeave a Reply

  1. 私は有料Patreonユーザー向けにパスワードで保護された記事をいくつか持っていますが、私のデザインはあまり良くないことを認めなければなりません。SeedProdのガイドは、私がすでにそれを使用しており、あなたのスクリーンショットでそのようなページがどれほど素晴らしい見た目になるかを見ると、もっと早くやらなかったことに少し恥ずかしくなるので、私の注意を引きました。パスワード保護されたページが私のウェブサイトのデザインと一致せず、まったく審美的に魅力的でなかったことが私を悩ませていたので、貴重なガイドをありがとうございました。

  2. こんにちは。
    パスワード保護されたページの手順に従い、ログアウトしました。
    その後、別のブラウザでそのページへのURLリンクを開くと、パスワードを入力しても、管理者ログインも表示されますか?そのため、これらのページを共有できません…
    どうしてですか?
    ありがとうございます。

    • サイトが近日公開中またはユーザーがコンテンツを表示する必要があるメンバーシップサイトになっていないことを確認することをお勧めします。それがその問題の最も一般的な理由です。

      管理者

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。