WooCommerceでログインページと登録ページをカスタマイズして分離する方法

WooCommerceを使用しているかどうかに関係なく、WooCommerceが現在利用可能な最も人気のあるオープンソースのeコマースソリューションの1つであることをすでにご存知かもしれません。 ただし、他のソフトウェアと同様に、特定の制限と欠点があります。 この記事では、これらの1つに対処します…ログインページと登録ページを完全にカスタマイズおよび/または分離できないこと。

WooCommerceユーザーからの最も一般的なリクエストの1つは、ログインページと登録ページの両方を更新およびカスタマイズできるようにすることです。 理想的には、多くのユーザーは、これらのページを「オールインワン」ページとして表示するのではなく、分離できるようにしたいと考えています。 この記事では、これらの両方を実現する方法を見ていきます…WooCommerceWebサイト用に完全にカスタマイズされ分離されたログイン/登録ページ。

始めましょう！

プラグインの使用

おそらく当然のことながら、ログオン/登録ページのカスタマイズのジレンマを解決する最も簡単な方法は、プラグインを使用することです。 私たちはあなたが使用を検討したいと思うかもしれない最高のもののいくつかを選択しました。 それらを見てみましょう。

Woocommerceログイン/サインアップライト

WordPress管理メニューに移動し、[プラグイン]-> [新規追加]領域で、プラグインをインストールしてアクティブ化します。

Woocommerce Login / Signup Liteプラグインは、プレミアムバージョンも提供する無料のプラグインです。 ただし、私たちのニーズには、無料バージョンで十分です。 使い方はとても簡単です。 インストールすると、必要なフォームの種類（ログインフォームや登録フォームなど）に対応するショートコードを作成できるようになります。 その後、このショートコードを任意のページに貼り付けることができます。 ショートコードは次のとおりです。

• ログインフォームを作成するための[lsphe-login-form]ショートコード。
• 登録フォームを作成するための[lsphe-signup-form]ショートコード。
• ログインフォームと登録フォームの両方を含むフォームを作成するための[lsphe-header]ショートコード。

プラグインの管理エリアで利用可能なショートコードを確認できます。

このプラグインが提供するもう1つの優れた機能は、メニュー項目からポップアップログイン/登録ウィンドウを作成する機能です。 これは非常に見栄えがよく、顧客にログインオプションを提供する際にさらに柔軟性を提供します。 これらを作成するには、次の手順に従います。

• [外観]>[メニュー]をクリックして、メニュー管理画面に入ります。
• 右上の矢印を使用して画面オプションを開き、[詳細メニューのプロパティを表示]で[CSSクラス]を有効にします。

• カスタムリンクメニュー項目を作成し、「＃」URLを指定します。 アイテムに好きな名前を付けて、メニューに追加します。
• メニューリストに表示されたら、そのアコーディオンセクションを開き、CSSクラスに次を追加しますphoen-login-popup-open

登録ポップアップに対して同じことを行うには、同じ手順に従ってphoen-signup-popup-openクラスを使用し、両方のフォームを表示するにはphoen-login-signup-popup-openクラスを使用します。

ユーザー登録

ユーザー登録プラグインを使用すると、ドラッグ'n'ドロップフィールドを使用してフロントエンドフォームを作成できます。これにより、フォームのデザインと並べ替えが簡単になります。

プラグインをインストールしたら、「ユーザー登録」に移動します。ここで、WooCommerceストアのオーダーメイドの登録フォームの作成を開始できます。 選択した場所のWebサイトにコピーして貼り付けることができるショートコードを含むビルド済みのフォームがあることに気付くでしょう。 フォームは次のようになります。

もちろん、フォームを編集したり、新しいフォームを簡単に作成したりすることもできます。 プラグイン内のプロンプトに従うだけで、すぐに選択したフォームを使用できるようになります。

ログイン/サインアップポップアップ

検討する価値のあるもう1つのプラグインは、ログイン/サインアップポップアップ（インラインフォーム+ Woocommerce）です。 プラグインは、ページ上のフォームではなく、（名前が示すように）Webサイトのリンクまたはボタンからトリガーできるポップアップログインフォームを作成するのに役立ちます。 ポップアップは優れている可能性があり、ページのスペースを節約するだけでなく、特定のログインページまたは登録ページにリダイレクトされることなく、サイトの任意の場所からログインする機会を人々に与えることができます。

リストされているすべてのプラグインと同様に、フォームのデザインを完全にカスタマイズできます。 その他の注目すべき機能には、ユーザーがGoogleまたはFacebookのログインを使用してログインできる「ソーシャル」ログインなどがあります。 これは、有料のカスタム登録フィールドアドオンを使用して行われます。

独自のWooCommerce登録およびログインページをコーディングする

プラグインを使用して独自のWooCommerceログイン/登録ページを作成したくない場合は、独自のコードを作成してみてください。 いつものように、コーディングは機能、デザイン、機能を究極的に制御できるため、特定のタスクを実行する必要がある場合、またはプラグインに伴う潜在的な肥大化を回避したい場合に最適なオプションです。

このチュートリアルを開始するには、まず、標準のWooCommerceの[マイアカウント]ページにリンクするメニュー項目を設定します。 これで、Webサイトのフロントエンドにあるこのメニューリンクにアクセスすると、ログインフォーム、または登録フォームとログインフォームの両方を含む2列のレイアウトが表示されます。 これは、以下に示すWooCommerceアカウント作成オプションで設定した内容によって異なります。

SFTPクライアントを使用して、Webサーバーにログインし、Webサイトのフォルダーを表示できるようにします。 /wp-content/plugins/woocommerce/templates/myaccount/の下に、 form-login.phpファイルがあります。 お気に入りのエディタでそのファイルを開きます。

このファイルのコードには、ログインフォームと登録フォームの両方が含まれています。 このファイルの内容は、公式のgitページで確認できます。 上のスクリーンショットの管理オプションを参照するif条件<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>があることに気付くでしょう。

これを使用すると、ログインページと登録ページを分離したり、わずかな調整でフォームをカスタマイズしたりできます。

ログインフォームをカスタマイズする

まず、ログイン/登録フォームに加えた変更が安全な方法で行われていることを確認して、将来の更新時に元に戻せないようにする必要があります。

Pressidiumであなたのウェブサイトをホストする

60日間の返金保証

私たちの計画を見る

SFTPクライアントを介してすでにログインしている場合は、 wp-content/themes/__my__theme__ます。 'woocommerce'フォルダを作成します。 このフォルダー内に、Woocommerceテンプレートのコピーを作成します。 ファイル構造を維持しながら、/templates/サブディレクトリを削除することが重要です。 たとえば、Twenty Twentyテーマがインストールされており、WooCommerceform form-login.phpはplugins/woocommerce/templates/myaccount/の下にあります。 つまり、フォームをオーバーライドするには、 /themes/twentytwenty/woocommerce/myaccount/のような階層を作成し、その中にform-login.phpファイルを配置する必要があります。

テストしてみましょう。 この時点で、当社のWebサイトのフロントエンドにあるアカウントページにアクセスすると、次の出力が表示されます。

ここで、 form-login.php重複内のコードで何かを変更しようとすると、期待どおりにレイアウトに影響することがわかります。 これが機能していることを確認するために、小さな変更を試してみましょう。 「Rememberme」のテキストを「RemembermyCredentials」に変更し、出来上がりです。フロントエンドページを更新すると、更新が有効になっていることがわかります。

個別のログイン/登録

ログインページと登録ページを分けるために従う必要のある手順は次のとおりです。

まず、新しいカスタムテンプレートを登録します。 これを行うには、 register.phpという名前の新しいファイルを作成し、それをテンプレートフォルダーに配置します。 このファイル内に次のコードを挿入します。

 <?php /* * Template name: Registration Form */ ?> <?php if(is_user_logged_in()){ wp_redirect(get_permalink(get_option('woocommerce_myaccount_page_id'))); } ?> <?php get_header();?> <?php do_action( 'woocommerce_before_customer_login_form' ); ?> <div class="custom-registration"> <h2><?php esc_html_e( 'Register', 'woocommerce' ); ?></h2> <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> > <?php do_action( 'woocommerce_register_form_start' ); ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php endif; ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" autocomplete="new-password" /> </p> <?php else : ?> <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p> <?php endif; ?> <?php do_action( 'woocommerce_register_form' ); ?> <p class="woocommerce-form-row form-row"> <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?> <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button> </p> <?php do_action( 'woocommerce_register_form_end' ); ?> </form> </div> <?php do_action( 'woocommerce_after_customer_login_form' ); ?> <?php get_footer();?>

このコードで最初に行ったことは、 Template name: Registration Formのコメントでテンプレート名を定義することです。 次に、ユーザーがすでにログインしているかどうかを確認します。残りのコードは、基本的に、 <div class="custom-registration">でラップされた登録フォームに関連するlogin-form.phpコンテンツの一部のコピーです。 <div class="custom-registration">要素。

次に、wp-admin Pages画面に新しいページを追加し、好きな名前を付けます。 「登録ページ」のようなものと呼ぶのはおそらく理にかなっています。 次に、右側のサイドバーにあるテンプレートセレクターを使用して、適切なテンプレート（先ほど作成したもの）を選択していることを確認します。

今私たちがしなければならないのは、このページにアクセスするための使用方法を提供することです。 [登録]メニュー項目を作成して、作成した登録ページにリンクするか、 form-login.phpを編集して、登録コードを登録ページへのリンクに置き換えることができます。

これを行った場合、 themes/twentytwenty/woocommerce/myaccount/の下のform-login.phpファイルを変更して、コンテンツが次のようになるようにします。

 <?php /** * Login Form * * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 4.1.0 */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } do_action( 'woocommerce_before_customer_login_form' ); ?> <h2><?php esc_html_e( 'Login', 'woocommerce' ); ?></h2> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <a href="/?p=202">Sign Up</a> <?php do_action( 'woocommerce_after_customer_login_form' ); ?>

番号202は、カスタム登録ページのIDです。 簡単に言うと、バックエンドエディタで開いたときにURLにページIDが表示されます。

フロントエンドからページを見ると、アカウントの詳細ページにアクセスすると、次のように表示されます。

[サインアップ]リンクをクリックすると、次のような登録ページにリダイレクトされます。

とても簡単ですね。

ショートコードの作成

WooCommerceアカウントページには、 form-login.phpファイルを使用してフォームを出力するために使用できる[woocommerce_my_account]ショートコードが含まれています。 このセクションでは、ログインフォーム用と上記で作成した登録フォーム用の独自のショートコードを作成する方法を説明します。

WooCommerce登録ショートコード

テーマのfunctions.phpファイルをエディターで開き、次の行を挿入します。

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; // OUR REGISTRATION FORM CONTENT } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

これにより、別のカスタムテンプレートを使用する必要がなくなります。 代わりに、前に作成したテンプレートのコンテンツを次のように含めます。

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); do_action( 'woocommerce_before_customer_login_form' ); ?> <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> > <?php do_action( 'woocommerce_register_form_start' ); ?> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php endif; ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" autocomplete="new-password" /> </p> <?php else : ?> <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p> <?php endif; ?> <?php do_action( 'woocommerce_register_form' ); ?> <p class="woocommerce-form-row form-row"> <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?> <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button> </p> <?php do_action( 'woocommerce_register_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

ご覧のとおり、Shortcode [wc_registration_form]という名前を付け、HTMLをob_start（）関数でラップしました。 このようにして、出力バッファリングをオンにして、HTMLが保存され、文字列として返されるようにします。

これで、管理エリアに移動して登録ページを編集する準備が整いました。 登録ページを開いたら、[wc_registration_form]ショートコードを挿入するだけです。 この場合、登録フォームの生成はテンプレート自体に依存しないため、任意のテンプレートを使用できます。

これで、フロントエンドの登録ページを開くと、登録フォームが表示されます。

ショートコードを使用すると、テンプレートファイルを再コーディングしなくてもページ全体のデザインをその場で変更できるため、テンプレートページを使用するよりも柔軟性が高くなります。 これ自体が、WordPressでショートコードが非常に人気がある理由を説明しています。

WooCommerceログインショートコード

これで、登録フォームのショートコードができました。次に進み、ログインフォームのショートコードを作成します。 もう一度、 functions.phpファイルを開き、次のコードを挿入します。

 // LOGIN SHORTCODE function wc_login_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); ?> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_login_form', 'wc_login_form_function' );

これで、登録ページについては、「ログイン」ページを作成し、ショートコード[wc_login_form]を挿入することができます。これで準備完了です。

さらに一歩進んで、ユーザーがサイトからログアウトしたときに表示されるページを指定する場合は、次のようなwp_logoutフックを使用できます。

 add_action('wp_logout','my_redirect_after_logout'); function my_redirect_after_logout(){ wp_redirect( '/?p=207' ); exit(); }

上記で使用されている/?p=207 URLは、ログアウト時にユーザーを誘導するページのIDを参照しています。 選択したログアウトページのIDをこれに置き換えてください。

重要な注意！

誰でも新しいログインページや登録ページにアクセスできることを覚えておく価値があります…そして誰でもボットを意味します！ したがって、偽の登録やブルートフォースログインからWebサイトを保護することが非常に重要です。 サイトを保護する方法の詳細については、WordPressWebサイトを保護する方法とWordPressWebサイトでのスパム活動に対処する方法に関するガイドを読むことを強くお勧めします。

この記事が、WooCommerceの登録ページとログインページを再考する方法についてのアイデアを提供し、適切と思われる場所で変更を加えるためのツールを提供してくれることを願っています。