صفحه جداگانه برای ورود و ثبت نام ووکامرس

زمان‌هایی وجود دارد که شما نیاز به صفحه‌ای جداگانه برای ورود و ثبت‌نام مشتریان دارید. اما اگر روش این کار را نمی‌دانید یا می‌خواهید به آسان‌ترین شکل ممکن این را انجام دهید، با آموزش صفحه جداگانه برای ورود و ثبت نام ووکامرس همراه باشید.

همانظور که می‌دانید، صفحه حساب کاربری ووکامرس حاوی کد کوتاه woocommerce_my_account است. این کد کوتاه هر دو فرم ورود و ثبت‌نام را نمایش می‌دهد. اما این همیشه ایده خوبی نیست! سعی کنید از صفحه جداگانه برای ورود و ثبت‌نام استفاده کنید. این بسیار موثر برای صفحات فرود شما خواهد بود.

واضح است که زمانی که از کد کوتاه پیش‌فرض حساب کاربری ووکامرس استفاده می‌کنید، هر دو فرم برای شما نمایش داده می‌شود و نمی‌خواهید هنگام ثبت‌نام، فرم ورود نیز نمایش داده شود. دلایل زیادی برای جدا کردن صفحه ورود و ثبت‌نام وجود دارد.

در این مقاله، من به شما نشان می‌دهم که چگونه با استفاده از قطعه کدهای آماده که نوشته‌ام، فرم ثبت نام و فرم ورود اختصاصی ایجاد کنید. نقطه قوت این فرم‌ها این است که هر کدام دارای کد کوتاه مختص به خود هستند. این به شما در طراحی شکیل فرم‌ها و صفحات آن‌ها کمک بزرگی می‌کند.

فعال‌سازی اجازه ثبت‌نام مشتری

ابتدا بررسی کنید که آیا در منوی ووکامرس -> پیکربندی -> حفظ حریم خصوصی حساب‌های کاربری، گزینه “ابه مشتری اجازه ایجاد حساب کاربری در برگه حساب من دهید” را فعال کرده‌اید یا خیر، اگر تیک زده نشده است، آن را تیک بزنید و تنظیمات را ذخیره کنید.

ایجاد فرم ورود با کد کوتاه

برای نمایش فرم ورود، از قطعه کد زیر استفاده کنید. توسط این قطعه کد، فرم ورود ووکامرس برای مشتریان نمایش داده می‌شود. این قطعه کد را می‌توانید در فایل فانکشن functions.php قالب خود قرار دهید. همچنین اگر تسلط بیشتری به PHP دارید، قطعه کدها را در یک فایل جداگانه php بگذارید و آن را در فایل فانکشن include کنید.

/**
 * @snippet       WooCommerce User Login Shortcode
 * @how-to        Watch tutorial @ https://themefour.com/separate-page-for-registration-and-login/
 * @sourcecode    https://themefour.com
 * @author        THEMEFOUR.COM
 * @compatible    WooCommerce 3.5.8

 */
 
// THIS WILL CREATE A NEW SHORTCODE: [wc_login_form_tfc]
 
add_shortcode( 'wc_login_form_tfc', 'tfc_separate_login_form' );
 
function tfc_separate_login_form() {
if ( is_admin() ) return;
if ( is_user_logged_in() ) {
    wc_add_notice( sprintf( __( 'شما از قبل وارد شده‌اید. به حساب کاربری‌تان مراجعه کنید.', 'tfc' ), wc_logout_url() ) );
    wc_print_notices();
} else {
     
    ?>
 
         
<form class="woocommerce-form woocommerce-form-login login" method="post">
 
            <?php do_action( 'woocommerce_login_form_start' ); ?>
 
             
 
                <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" id="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
             
 
             
 
                <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" id="password" autocomplete="current-password" />
             
 
 
            <?php do_action( 'woocommerce_login_form' ); ?>
 
             
 
                <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
                <button type="submit" class="woocommerce-Button button" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button>
                <label class="woocommerce-form__label woocommerce-form__label-for-checkbox inline">
                    <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span>
                </label>
             
 
                <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a>
             
 
 
            <?php do_action( 'woocommerce_login_form_end' ); ?>
 
        </form>
 
 
    <?php
    // END OF COPIED HTML
    // ------------------
     
}
return ob_get_clean();
}

در خط ۱۷ و ۱۸ می‌توانید پیامی که هنگام حضور مشتری/کاربر در حساب کاربری را تغییر دهید. از کد کوتاه [wc_reg_form_tfc] جهت نمایش فرم ثبت نام استفاده نمایید.

ایجاد فرم ثبت با کد کوتاه

جهت نمایش فرم ثبت‌نام نیز، قطعه کد زیر را در فایل انتخابی‌تان یا فایل فانکشن قالب خود قرار بدهید.

/**
 * @snippet       WooCommerce User Registration Shortcode
 * @how-to        Watch tutorial @ https://themefour.com/separate-page-for-registration-and-login/
 * @sourcecode    https://themefour.com
 * @author        THEMEFOUR.COM
 * @compatible    WooCommerce 4.0.0

 */
 
// THIS WILL CREATE A NEW SHORTCODE: [wc_reg_form_tfc]
 
add_shortcode( 'wc_reg_form_tfc', 'tfc_separate_registration_form' );
   
function tfc_separate_registration_form() {
if ( is_admin() ) return;
ob_start();
if ( is_user_logged_in() ) {
    wc_add_notice( sprintf( __( 'شما وارد سایت شده‌اید. اگر می‌خواهید حساب دیگری را ثبت کنید، ابتدا <a href="%s">خارج شوید</a>.', 'tfc' ), wc_logout_url() ) );
    wc_print_notices();
} else {
     
    ?>
         
<form method="post" class="woocommerce-form woocommerce-form-register register" action="#registra" <?php do_action( 'woocommerce_register_form_tag' ); ?>
 >
 
            <?php do_action( 'woocommerce_register_form_start' ); ?>
 
            <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>
 
             
                <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" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
             
 
 
            <?php endif; ?>
 
             
 
                <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" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
             
 
 
            <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>
 
             
 
                <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" id="reg_password" autocomplete="new-password" />
             
 
 
            <?php endif; ?>
 
            <?php do_action( 'woocommerce_register_form' ); ?>
 
             
 
                <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
                <button type="submit" class="woocommerce-Button button" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button>
             
 
 
            <?php do_action( 'woocommerce_register_form_end' ); ?>
 
        </form>
 
    <?php
    // END OF COPIED HTML
    // ------------------
     
}
return ob_get_clean();
}

در خط ۱۷ و ۱۸ می‌توانید پیامی برای مشتری ارائه کنید اگر کاربر/مشتری به صفحه ثبت نام مراجعه کرد. در صورتی این پیام نمایش داده می‌شود که به حساب کاربری لاگین login شده باشد.

از کد کوتاه [wc_login_form_tfc] جهت نمایش فرم ورود استفاده نمایید.

به همین سادگی می‌توانید صفحه ورود و ثبت نام خود را ایجاد کنید. این روش ساده‌ترین و بهینه‌ترین روش برای ایجاد صفحات جداگانه Login – Register است. اگر کمی به CSS و HTML مسلط باشید، استایل خود را برای فرم‌های‌تان طراحی کنید.