WordPressとしてメンバーシップサイトを運営する場合は、Ultimate MemberやWP-Membersなどの会員制プラグインを使用できます。メンバーシッププラグインを使用して、すべてのコンテンツまたは特定のコンテンツにメンバーのみがアクセスできるように制限できます。
Ultimate Memberプラグインで、コンテンツ全体または特定のページにログインユーザーのみがアクセスできるようにアクセス制限を設定すると、非ログインユーザーが制限されたコンテンツにアクセスしようとするとログインページに移動します。
ログインページにログインフォームのみを表示したい場合は、テーマの機能を使用するか、CSSを使用して不要な要素を非表示または削除できます。この記事では GeneratePress テーマでUltimateメンバーのログインページにログインフォームのみが表示されるようにする方法を見てみましょう。別のテーマを使用している場合は、同様の方法でアクセスできます。
Ultimate Memberログインページにログインフォームのみを表示させる（feat。 GeneratePress)
Ultimate Member アクセス制限の設定
会員のみがサイトにアクセスできるように制限したい場合 WordPress 管理者ページ » アルティメットメンバー » 設定 » アクセスタブから グローバルサイトへのアクセス オプションを"ログインしたユーザーがアクセス可能「」と指定します。
Ultimate Member (UM) プラグイン銀ハングル化が良くなっていて使うのに大きな難しさはないと思います。
ホームページへのアクセスを許可する オプションをチェックして有効にすると、ホームページ（前面ページ）は誰でもアクセスできるようになります。
また、 次のURLを除外から 新しいURLを追加 ボタンをクリックして例外URLを指定できます。
特定のページや投稿にのみアクセスを制限したい場合 グローバルサイトへのアクセス オプション 誰でもアクセスできるサイトを選択し、アクセスを制限するページまたは投稿編集画面でアクセス制限を設定できます。
たとえば、次のように設定すると、ログインユーザーだけがそのページまたは投稿を表示できます。
- "この投稿へのアクセスを制限しますか？チェックボックスを選択
- "誰がこの投稿にアクセスできますか？「 ログインしたユーザー 選択
UMログインページにログインフォームのみを表示する
Ultimateログインページには、ログインフォームと一緒にヘッダー、メニュー、ページタイトル、サイドバー、フッターなどの要素が表示されることがあります。
ログインページに表示される要素はテーマです エレメンなどのページビルダーで制御できます。
エレメントがインストールされている場合は、ページテンプレート エレメンターキャンバス（Elementor キャンバス）で選択すると、ヘッダー、フッターなどのすべての要素が削除されます。
GeneratePress テーマ 有料版を使用している場合は、ヘッダー、サイトのタイトル、サイドバー、フッターなどのすべての要素を無効にできます。
デザイン » GeneratePressに移動し、 モジュール(Modules) セクションで 要素を無効にする モジュールを有効にします。
その後、ページ編集画面で サイドバーレイアウト（Sidebar Layout）을 No Sidebarsで選択して 要素を無効にするでヘッダー、ナビゲーション、コンテンツタイトル（ページタイトル）、フッターなどの要素をチェックします。
変更を保存してからUltimate Memberログインページにアクセスすると、ログインフォームのみが表示されます。ログインフォームが画面の真ん中に位置するように調整したい場合 デザイン » カスタマイズ » 追加のCSSに次のCSSコードを追加できます。
/* Ultimate Member 로그인 페이지에 로그인 폼을 화면 가운데에 위치하도록 설정하기 */
body.page-id-29685 .site-main {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
}
body.page-id-29685 .site-main article {
width: 100%;
max-width: 800px; /* Ensures a maximum width */
margin: 0;
padding: 0;
box-sizing: border-box;
}
body.page-id-29685 .inside-article {
width: 100%;
padding: 20px;
box-sizing: border-box;
}
ページIDは適切に変更します。これで確認すると、ログインフォームのみが表示され、ログインフォームが画面の中央に配置されます。
ログインフォームを少し上に移動したい場合 min-height: 100vh; 行を適切に修正します。たとえば、100vhを85vhに変更すると、ログイン入力フィールドボックスが少し上に移動します。 CSS100vh単位は、ビューポートの高さの100％を意味します。
コメントを残す