人々が特別な機能を利用するためにサインアップするメンバーシップWebサイトを作成したい場合は、専用のログインおよび登録ページを作成することをお勧めします。 これにより、Webサイトをよりプロフェッショナルに感じさせたり、サインアップ手順中に追加のユーザー情報を要求したりすることができます。
そのため、 Elementorページビルダーpluginを使用してカスタムログインおよび登録ページを作成するのに役立つ詳細なチュートリアルをまとめました。
Elementorは、WordPress用の最も人気があり機能満載のページビルダーpluginの1つです。 pluginの無料バージョンには、基本的なサイト構築のための大量のブロックとウィジェットが付属しています。 pluginプロバージョンが存在するのに対し、より高度なウィジェットとブロックを提供します。
現在、Elementorに付属しているフォームビルダーウィジェットは、プロバージョン内にロックされています。 ただし、登録フォームを作成するためにElementor Proを入手する代わりに、 ElementorProと比較して強力なブロックとウィジェットが多数付属しているUltimateAddon for Elementor(UAE) plugin使用することをお勧めします。
目次
機能だけでも、ウェブサイトで一般的な登録ページを使用しても問題はありません。 しかし、これを行うと、Webサイトに合わせて作成された登録ページに付属する多くの利点を逃してしまいます。
カスタム登録ページを作成してアイデアを得る主な利点のいくつかを次に示します。
カスタム登録ページを使用すると、カスタムフィールドを使用して登録フォームを作成し、要件に応じてそれらを設計できます。 ニーズや要件に合わせてフォームのスタイルを設定し、ビジネスアイデアやWebサイトに共鳴するようにすることができます。
ユーザー登録フォームウィジェットは次の目的で使用できます。
メンバーから収集したい特定の情報がある場合は、それを登録フォームの一部にすることができます。
つまり、ユーザーが選択できるのはユーザー名とパスワードだけではなく、それだけです。 名前、メールアドレス、連絡先の詳細などのフォームフィールドをさらに追加できます。 登録フォームの一部となるカスタムフィールドを使用して、包括的なフォームをエレガントに作成できます。
カスタマイズされたユーザーエクスペリエンスをメンバーに提供できます。 これは、ユーザーを特定のページにリダイレクトしたり、アカウントへの自動ログインを支援したり、受信トレイにメールを送信したりする場合があります。
HoneypotとReCaptchaを追加すると、スパマーと戦い、偽の登録を防ぐことができます。
登録フォームは、Webサイトの他のページと同じように表示されます。 カスタム登録フォームを使用すると、ビジネスに響くフォームを作成できます。
カスタムユーザー登録フォームがビジネスにどのように役立つかについての基本的な理解ができたので、ElementorとUAEアドオンを使用して独自のカスタムユーザーログインエクスペリエンスを作成する方法に関する包括的なステップバイステップガイドを次に示します。
ここでは、Webサイトのユーザー登録フォームを作成する方法に関する3つのステップのガイドを示します。
注:先に進む前に、 [ダッシュボード]>[設定]>[一般]>[メンバーシップ:有効]メンバーシップ]オプション。
メンバーシップオプションを有効にすると、すべてのユーザーがWebサイトに登録できます。
カスタムユーザー登録フォームを作成するには、ブロックがアクティブ化されたUAE plugin更新バージョンがあることを確認してください。
ログインページを作成するための前提条件を確認したら、新しいページを作成または追加する必要があります。 そして、ユーザー登録フォームを添付するページを編集します。
ウィジェットをドラッグアンドドロップすると、デフォルトのフォームフィールドが表示されます。
フィールドをいじることができます。不要なフィールドを削除したり、ユーザー名、名などの他のフィールドを追加したりできます。
個々のフォームフィールドで必要な列幅を管理するオプションがあります。
入力サイズ、フィールドのラベル(フィールドを表示するか非表示にするか)、または必須マークを管理することもできます。
基本を説明した後、 [一般設定]セクションにアクセスしてフォーム設定を構成できます。 ここから次の機能を実行できます。
ここに両方の詳細な説明があります:
ユーザーが自分のWebサイトに登録する必要があるメンバーシップサイトがある場合、デフォルトでは、「ユーザーロール」をサブスクライバー。
メンバーのデフォルトのユーザーロールを設定できます。割り当てられたロールは、Webサイトに登録したすべての新しいユーザーに設定されます。
ユーザーは、ユーザー登録フォームウィジェットを使用して、メンバーシップサイトに登録した後に実行できる次のアクションを選択できます。
次に、ウィジェットの「スタイル」タブを使用して、ユーザー登録フォームをデザインおよびスタイルできます。
これで、ユーザー登録フォームウィジェットの作成と構成のプロセスは完了です。 フォームは、すべてライブWebサイトで公開されるように設定されています。
この部分はかなり基本的でシンプルです。 他のElementorウィジェットと同様に、このウィジェットを直接ドラッグアンドドロップして追加できます。 ウィジェットを含むセクションを保存し、必要な登録ページで保存したセクションをフェッチすることもできます。
以下では、Elementorエディターでウィジェットを追加するのに役立ついくつかの方法を詳しく説明しました。
例: WooCommerceページのユーザー登録フォーム
カスタムWooCommerceページ、つまりマイアカウントページをカスタムアカウントページという名前で作成する場合は、次のようにするだけです。
Elementorボタンで編集をクリックすると、Elementorエディターに移動します。
このように別の登録フォームを作成し、上記と同じ手順に従って、カスタムアカウントページで使用するために保存できます。
最後に、ページを「マイアカウントページ」に設定するには、WordPressダッシュボードに移動します。 そして、WooCommerceオプションの下で次のパスに従ってください:
WooCommerce>設定>詳細設定>ページ設定>マイアカウントページ>マイアカウントページ>カスタムアカウントページを選択
WooCommerceアカウントページでUAEを含むページを見ることができ
ElementorとUAEを使用して、Webサイト用に、選択したオプション設定でスタイリッシュな登録フォームを作成できます。
この記事に記載されている手順に従うことで、 UAEのユーザー登録フォームウィジェットを使用してユーザーを登録できます。 これは、新しいユーザー向けのスタイリッシュなユーザー登録フォームを作成するためのシンプルでエレガントなソリューションです。