Astra + Gutenberg：ログイン登録ブロックをカスタマイズする簡単な方法

ある ワードプレス ウェブサイトを構築する際、ユーザーのログインや登録体験はコンバージョン率に直接影響します。AstraテーマとGutenbergエディタを使えば、コードを書くことなく簡単に美しいフロントエンドのログイン・登録フォームを作成することができます。今回は、Eコマースや会員制サイトなど様々なシーンに適したAstra + Gutenbergで、これらの機能を素早く設定する方法をご紹介します。

I. なぜログインと登録にAstra + Gutenbergなのか？

アストラ は軽量で高速なWordPressテーマで、付属のGutenbergを含む様々なページエディターと相性が良い。コードやプラグインを必要とする従来の方法に比べ、ブロックを通して直接ログインフォームを追加できるAstraの機能は、より統一された、よりメンテナンス性の高いサイトを実現します。

グーテンベルク WordPressに付属しているドラッグ＆ドロップ式のエディタで、簡単なモジュール操作で素早くページを作ることができ、特に初心者には優しい。

ログインと登録の準備

始める前に、以下のことを行ってください：

• インストールと有効化 アストラのテーマ

• 利用する グーテンベルク・エディター(デフォルトで有効）
• 推奨プラグインのいずれかをインストールする：
  • WPユーザーマネージャ
  • ユーザー登録
  • ログイン/サインアップ ポップアップ

ヒント：これらのプラグインはそれぞれ、ショートコードやブロックを使ってGutenbergにログイン／登録フォームを挿入するのに使えます。

Gutenbergでログイン登録ブロックを追加する手順

ステップ1：プラグインをインストールし、ログインと登録機能を有効にする

WP User Managerプラグインを例にとってみましょう：

• Backend → Plugins → Add Pluginで "WP User Manager "を検索してください。

• インストールされて有効になると、システムは自動的に以下のページを生成します：
  • ログイン
  • 登録
  • アカウント

また、例えばショートコードを使ってページ内の表示をカスタマイズすることも可能だ：

[wpum_login_form] ログインフォームを表示する
[wpum_register_form] 登録フォームを表示する

ステップ2：使用 グーテンベルク フォームブロックの追加

• 新規ページの作成または既存ページの編集

• "➕"ボタンをクリックし、"ショートコード "ブロックを検索する。
• スティック [wpum_login_form]。 もしかしたら [wpum_register_form]。

• ページを保存してプレビューする

ブロックをサポートしているプラグイン（ユーザー登録など）を使用している場合、提供されている専用ブロックを直接追加することができ、フォームフィールドやスタイルを直感的に編集することができます。

IV.ユーザー・エクスペリエンスを向上させる実践的なヒント

1.ナビゲーションボタンの追加

利用する アストラ ページの上部またはナビゲーションバーに「ログイン/登録」ボタンを追加し、セットアップのログイン/登録ページにリンクします。

2.ポップアップログイン登録（オプション）

ログイン/サインアップポップアップなどのプラグインのインストールは、ボタンをクリックすることでページに飛ぶことなくログインウィンドウをポップアップさせることができ、ユーザーの継続率向上に適しています。

3.ページレイアウトの最適化

アストラのコンテナ幅設定を グーテンベルク カラムレイアウトブロックを使ってフォームを中央に配置し、レイアウトを美しくすることができます。また、背景画像を追加したり、カラムを分割して画像＋フォームを表示することで、視覚的なアピールを強化することもできます。

V. よくある問題と解決策

課題	治療
ログイン後、ホームページにジャンプしない	プラグインの設定で「ログイン後」を手動で設定する。リダイレクトリンク"
フォームのスタイルとテーマの不一致	外観 → カスタマイズ → エクストラ カスケーディングスタイルシート カスタムスタイルを
多言語切り替えフォームの内容エラー	WPMLまたはTranslatePressでフォームページの翻訳を設定する

まとめ

とおす アストラ + Gutenberg を使えば、コードを書くことなく、美しいフロントエンドのログインページと登録ページを素早く実装できます。このアプローチは、サイト構築初心者の方にも、サイトのユーザーフローをシンプルにしたい中級から上級の開発者の方にも適しています。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み