WordPressのマルチステップ登録フォームの構築

キーテイクアウト

• WordPressによって提供されるデフォルトのフォームは、多くの場合、サイトの設計とブランディングと一致せず、カスタムログイン、登録、パスワードリセットフォームの需要の増加につながります。
チュートリアルでは、サーバー側のPHP検証、認証、およびカスタムフォームの承認を処理するProfilEpressというプラグインを使用して、WordPressマルチステップ登録フォームを構築する方法について説明します。
• プロセスでは、WordPressユーザープロファイルに連絡先情報フィールドを追加し、HTML、CSS、およびJavaScriptを使用したマルチステップフォームの構築、プラグインのMelange機能を使用してフォームを機能するWordPress登録フォームに変換します。
マルチステップフォームはCSSを通じてカスタマイズでき、他のツールやサービスと統合できます。フォームがモバイルフレンドリーであることを確認し、ユーザー入力を検証することが重要です。フォームが長い場合、Cookieまたはローカルストレージを使用してユーザーの進捗を節約することができます。
WordPressに含まれるデフォルトのログイン、登録、パスワードリセットフォーム（Webサイトの外側）は、多くの場合、サイトの設計とブランディングに適合しないことがよくあります。
• WordPressがブログエンジンだった過去には、これで問題ありませんでした。その後、WordPressはコンテンツ管理システムに進化し、カスタムログイン、登録、パスワードリセットフォームの需要が増え続けています。 このチュートリアルでは、ProfilEpressと呼ばれるプラグインを使用して、WordPressマルチステップ登録フォームを構築する方法を学びます。
以前にカスタムログイン、登録、パスワードリセットフォームをプロフィリプレスとタブ付きログインとサインアップウィジェットを作成する方法を説明したことがあることは注目に値します。

以下は、このチュートリアルの最後までに構築されるマルチステップ登録フォームの設計です。

agbonghama Collins（@collizo4sky）によるJQueryとCSS3を使用したPen Multi Step登録フォームを参照してください。

このチュートリアルの前にジャンプしたい場合は、WordPress搭載サイトのフォームのライブデモを次に示します。

これ以上苦労せずに、マルチステップ登録フォームの構築にまっすぐにジャンプしましょう。

コーディングへのダイビング

上記のデモでは、ソーシャルプロファイルセクションにはFacebook、Twitter、Googleフィールドが含まれています。これは、デフォルトのWordPressユーザープロファイルに存在しません。その結果、WordPressが登録ユーザーのプロファイルに対してフィールドに入力されたデータを保存するために、上記のソーシャルプロファイルフィールドの連絡先方法を作成する必要があります。 「functions.php」ファイルを使用して連絡先フィールドの追加

WordPressユーザープロファイルに連絡先情報フィールドを追加する方法を説明するオンラインチュートリアルがいくつかあります。

• WordPressユーザープロファイルの連絡先情報をカスタマイズします
• ユーザープロファイルに追加の連絡方法を追加
• WordPressのユーザー連絡先情報を拡張

これらのチュートリアルは、次のコードがテーマのfunctions.phpファイルに貼り付けられている場合、WordPressユーザープロファイルの連絡先情報セクションにFacebook、Twitter、Googleフィールドを追加することを説明しています。

<span>function add_contact_methods( $user_contact ){
</span>    <span>/* Add user contact methods */
</span>    <span>$user_contact['facebook'] = __('Facebook Username'); 
</span>    <span>$user_contact['twitter'] = __('Twitter Username');
</span>    <span>$user_contact['google'] = __('Google+ Profile');
</span> 
    <span>return $user_contact;
</span><span>}
</span> 
<span>add_filter('user_contactmethods', 'add_contact_methods');</span>

ProfilEpressプラグインを使用して連絡先フィールドを追加します

プラグインを使用して、キー/ラベルフォームに記入して連絡先情報フィールドを追加できます（下の画像を参照）。これは、連絡先情報設定ページにあります。キーは、フィールドを認識し、ユーザーに表示されるフィールドの説明にラベルを付けるためにWordPressが内部的に使用する一意の名前です。

詳細については、ProfilEpressプラグインを使用してWordPressプロファイルに連絡先情報を追加することを見てください。

WordPressプロファイルに移動して、Facebook、Twitter、Googleフィールドが表示されていることを確認します。

WordPressプロファイルにFacebook、Twitter、Googleの連絡先情報フィールドを追加した場合、Melange機能を介してマルチステップフォームを構築する必要があります。

マルチステップフォームの構築

HTML、CSS、およびJavaScriptでマルチステップフォームがどのように構築されているかというプロセスを説明するつもりはありません。それについて学ぶために、ソースコードを自由に突き刺してください。むしろ、フォームを実際の機能するWordPress登録フォームに変換する方法を学びます。

プラグインのメランジュ機能は、ほぼすべてのログイン、登録パスワードリセットを変換することができ、プロファイルフォームテンプレートを編集して、動作するWordPressの等価物が利用可能になるようにすることもできます（ただし、これはプレミアムバージョンでのみ利用可能です。プラグイン）。

プラグインをインストールした状態で、下の画像に示すメランジュメニューをクリックしてから、新しいボタンを追加して建築プロセスを開始します。

フォームが表示されます。次のようにフィールドを入力します

名前フィールドにフォームの名前を入力します。 Stride MultiStep Signup Formと呼びましょう

マルチステップフォームのHTMLコードをMelange Design Tinymceエディターにコピーし、入力フィールドをそれぞれのショートコードに置き換えます。

プロフィリプレスショートコードに相当するものに置き換えることなく、フィールドをフォームでフィールドを離れることができたでしょう。ただし、ショートコードを使用すると、入力フィールドに正しい名前属性を追加することができます。

フィールドの名前属性を決定できる場合（たとえば、ユーザー名フィールドの場合、名前属性はreg_usernameです）、ショートコードの使用を廃止することもできます。

profiLepressにはJavaScriptを挿入するためのテキスト領域が含まれていないため、JavaScriptコードはフォームのHTMLコードの直後にメランジュデザインフィールドに入ります。

注：Novalidate属性が

タグに追加され、name = focusable = "focusable" not focult of "blinkベースのエラー）ブラウザー（ChromeやOperaなど）を回避する迷惑な「Formid Form Control」を回避します。提出されることからのフォーム。

<span>function add_contact_methods( $user_contact ){
</span>    <span>/* Add user contact methods */
</span>    <span>$user_contact['facebook'] = __('Facebook Username'); 
</span>    <span>$user_contact['twitter'] = __('Twitter Username');
</span>    <span>$user_contact['google'] = __('Google+ Profile');
</span> 
    <span>return $user_contact;
</span><span>}
</span> 
<span>add_filter('user_contactmethods', 'add_contact_methods');</span>

コード説明：まず、JQuery Easing Libraryへの延期された呼び出しを含めました。これは、フォームに緩和効果を追加するために行われ、その後にマルチステップを実際に処理するJavaScriptコードが続きます。

マルチステップフォームのCSSをCSS StyleSheetコード領域に貼り付けます。

注：登録フォームによって生成されたエラーは、ProfilEpressを搭載した登録フォームに生成されます。クラス名ProfilEpress-Reg-StatusのDIVに包まれているため、スタイルシートのクラス。

登録成功フィールドに以下のコードを入力して、成功したユーザー登録に関するカスタマイズされた通知を表示します。

フォームを保存して、メランジュカタログに戻ります。

生成されたショートコードをコピーして、選択したWordPressページに貼り付けます。

ページを保存してから、プレビューして、動作中のマルチステップ登録を確認してください。

マルチステップ登録フォームのライブデモはこちらでご覧いただけます。

要約 このチュートリアルでは、ProfilEpressと呼ばれるプラグインを使用してWordPressマルチステップ登録フォームを構築する方法を学びました。このプラグインは、カスタムログイン、登録、パスワードリセット、フロントエンドの編集プロファイルフォームのサーバー側のPHP検証、認証、および認証を処理します。

質問、提案、または貢献がある場合は、コメントでお知らせください。

WordPressのマルチステップ登録フォームの構築に関するよくある質問（FAQ）

プラグインを使用せずにマルチステップフォームを作成するにはどうすればよいですか？

プラグインを使用せずにマルチステップフォームを作成するには、コーディングが含まれます。 HTML、CSS、およびJavaScriptを基本的に理解する必要があります。このプロセスには、HTMLフォームの作成、CSSでスタイリングし、JavaScriptを使用してフォームの手順を制御することが含まれます。 Ajaxを使用して、ページを更新せずにフォームを送信することもできます。ただし、この方法では、これらの言語とWordPress開発を十分に理解する必要があります。コーディングに慣れていない場合は、プラグインを使用する方が良いかもしれません。

登録以外に他の目的のためにマルチステップフォームを使用できますか？マルチステップフォームは、さまざまな目的に使用できます。ユーザーから多くの情報を収集する必要がある場合に特に便利です。たとえば、調査、求人アプリケーション、または複雑な連絡先フォームに使用できます。重要なのは、情報を管理可能なチャンクに分解して、ユーザーがフォームに簡単に記入できるようにすることです。マルチステップフォームのCSSを介して実行できます。色、フォント、ボタンスタイルなどを変更できます。プラグインを使用している場合は、カスタマイズオプションが付属する場合があります。たとえば、一部のプラグインを使用すると、さまざまなレイアウトテンプレートから選択したり、カスタムCSSを追加したりできます。マルチステップフォームへの条件付きロジック。これは、フォームの手順またはフィールドがユーザーの入力に基づいて変更できることを意味します。たとえば、ユーザーの以前の回答に基づいてさまざまな質問を表示することをお勧めします。これは、JavaScriptを介して、または条件付きロジックをサポートするプラグインを使用して実行できます。モバイルフレンドリーは、ユーザーエクスペリエンスにとって重要です。これを行うには、レスポンシブデザインテクニックを使用できます。これは、フォームのレイアウトと要素が異なる画面サイズに合うように自動的に調整されることを意味します。プラグインを使用している場合は、レスポンシブデザインをサポートしていることを確認してください。

ユーザーの進捗状況をマルチステップ形式で保存できますか？マルチステップフォーム。これは、フォームが長く、ユーザーが1回のセッションで完了しない場合に役立ちます。これは、ユーザーのブラウザでCookieまたはローカルストレージを使用して使用できます。一部のプラグインもこの機能を提供します。

マルチステップ形式でユーザーの入力を検証するにはどうすればよいですか？

ユーザーの入力を検証することは、正しい情報を収集するために重要です。これを行うには、フォームが送信される前にJavaScriptを使用して入力を確認できます。いくつかのプラグインは、組み込みの検証機能も提供しています。

マルチステップフォームを他のツールやサービスと統合できますか？サービス。たとえば、フォームデータを電子メールマーケティングサービスまたはCRMに送信することをお勧めします。これは、APIを介して、または統合をサポートするプラグインを使用して実行できます。

マルチステップフォームが正しく機能していることを確認するにはどうすればよいですか？

マルチステップフォームのテストが重要であることを確認するために重要です。これを自分で記入し、データが正しく保存または送信されているかどうかを確認することでこれを行うことができます。また、さまざまなデバイスとブラウザでフォームをテストして、応答性があり互換性があることを確認する必要があります。

マルチステップフォームの作成中に問題に遭遇した場合はどうすればよいですか？マルチステップフォームを作成している間、コードまたはプラグインの設定をチェックすることで、自分で問題のトラブルシューティングを試してみてください。まだ問題が発生している場合は、オンラインコミュニティ、フォーラム、またはプラグインのサポートチームから支援を求めることができます。覚えておいてください、あなたがそれを必要とするときに助けを求めても大丈夫です。

以上がWordPressのマルチステップ登録フォームの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。