วิธีปรับแต่งและแยกหน้าเข้าสู่ระบบและลงทะเบียนใน WooCommerce

ไม่ว่าคุณจะใช้ WooCommerce หรือไม่ก็ตาม คุณอาจทราบแล้วว่าเป็นหนึ่งในโซลูชันอีคอมเมิร์ซโอเพนซอร์ซที่ได้รับความนิยมมากที่สุดในปัจจุบัน อย่างไรก็ตาม เช่นเดียวกับซอฟต์แวร์อื่นๆ มันมีข้อจำกัดและข้อเสียบางประการ ในบทความนี้ เราจะพูดถึงหนึ่งในนั้น… การไม่สามารถปรับแต่งและ/หรือแยกหน้าการเข้าสู่ระบบและการลงทะเบียนได้อย่างเต็มที่

หนึ่งในคำขอที่พบบ่อยที่สุดจากผู้ใช้ WooCommerce คือการสามารถอัปเดตและปรับแต่งทั้งหน้าเข้าสู่ระบบและหน้าลงทะเบียน ตามหลักการแล้ว ผู้ใช้จำนวนมากต้องการแยกหน้าเหล่านี้ออกแทนที่จะให้เป็นหน้า 'ทั้งหมดในหน้าเดียว' ในบทความนี้ เราจะมาดูกันว่าคุณจะบรรลุทั้งสองสิ่งนี้ได้อย่างไร… หน้าเข้าสู่ระบบ/การลงทะเบียนที่กำหนดเองและแยกจากกันสำหรับเว็บไซต์ WooCommerce ของคุณ

มาเริ่มกันเลย!

การใช้ปลั๊กอิน

อาจจะไม่น่าแปลกใจเลยที่วิธีที่ง่ายที่สุดในการแก้ปัญหาเกี่ยวกับการปรับแต่งหน้าเข้าสู่ระบบ/การลงทะเบียนคือการใช้ปลั๊กอิน เราได้เลือกสิ่งที่ดีที่สุดบางส่วนที่คุณอาจต้องการพิจารณาใช้ ลองมาดูที่พวกเขา

Woocommerce เข้าสู่ระบบ / สมัครสมาชิก Lite

ไปที่เมนูผู้ดูแลระบบ WordPress ของคุณและในส่วน "ปลั๊กอิน -> เพิ่มใหม่" ให้ติดตั้งและเปิดใช้งานปลั๊กอิน

ปลั๊กอิน Woocommerce Login / Signup Lite เป็นปลั๊กอินฟรีที่มีเวอร์ชันพรีเมียม สำหรับความต้องการของเรา อย่างไรก็ตาม เวอร์ชันฟรีน่าจะใช้ได้ มันค่อนข้างใช้งานง่าย เมื่อติดตั้งแล้ว คุณจะสามารถสร้างรหัสย่อที่ตรงกับประเภทของแบบฟอร์มที่คุณต้องการ (เช่น แบบฟอร์มการเข้าสู่ระบบหรือการลงทะเบียน) จากนั้นคุณสามารถวางรหัสย่อนี้ลงในหน้าใดก็ได้ที่คุณต้องการ รหัสย่อรวมถึง:

• รหัส [lsphe-login-form] เพื่อสร้างแบบฟอร์มการเข้าสู่ระบบ
• รหัส [lsphe-signup-form] เพื่อสร้างแบบฟอร์มการลงทะเบียน
• รหัส [lsphe-header] เพื่อสร้างแบบฟอร์มที่มีทั้งแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียน

คุณสามารถดูรหัสย่อที่มีได้ในพื้นที่ผู้ดูแลระบบของปลั๊กอิน

คุณสมบัติที่ยอดเยี่ยมอีกอย่างหนึ่งที่ปลั๊กอินนี้มีให้คือความสามารถในการสร้างหน้าต่างเข้าสู่ระบบ/ลงทะเบียนป๊อปอัปจากรายการเมนู สิ่งนี้ดูค่อนข้างเรียบร้อยและให้ความยืดหยุ่นเพิ่มเติมในการเสนอตัวเลือกการเข้าสู่ระบบให้กับลูกค้าของคุณ ในการสร้างตามขั้นตอนเหล่านี้:

• คลิก ลักษณะที่ปรากฏ > เมนู เพื่อเข้าสู่หน้าจอผู้ดูแลระบบเมนู
• ใช้ลูกศรที่ด้านบนขวาเพื่อเปิดตัวเลือกหน้าจอและเปิดใช้งาน 'คลาส CSS' ใน 'แสดงคุณสมบัติเมนูขั้นสูง'

• สร้างรายการเมนูลิงก์แบบกำหนดเองและระบุ URL “#” ตั้งชื่อรายการตามที่คุณต้องการและเพิ่มลงในเมนู
• เมื่อปรากฏในรายการเมนู ให้เปิดส่วนหีบเพลงและในคลาส CSS ให้เพิ่มสิ่งต่อไปนี้: phoen-login-popup-open

เมื่อต้องการทำเช่นเดียวกันสำหรับป๊อปอัปการลงทะเบียน ให้ทำตามขั้นตอนเดียวกันและใช้คลาส phoen-signup-popup-open และเพื่อแสดงทั้งสองแบบฟอร์ม ให้ใช้คลาส phoen-login-signup-popup-open

การลงทะเบียนผู้ใช้

ปลั๊กอินการลงทะเบียนผู้ใช้ช่วยให้คุณสร้างแบบฟอร์มส่วนหน้าโดยใช้ฟิลด์ลาก 'n' วาง ซึ่งช่วยให้ออกแบบและจัดลำดับแบบฟอร์มได้ง่าย

หลังจากที่คุณติดตั้งปลั๊กอินแล้วให้ไปที่ 'การลงทะเบียนผู้ใช้' ซึ่งคุณสามารถเริ่มต้นสร้างแบบฟอร์มการลงทะเบียนสำหรับร้านค้า WooCommerce ของคุณ คุณจะสังเกตเห็นว่ามีแบบฟอร์มที่สร้างไว้ล่วงหน้าซึ่งมีรหัสย่อที่คุณสามารถคัดลอกและวางลงในเว็บไซต์ของคุณในตำแหน่งที่คุณเลือก แบบฟอร์มจะมีลักษณะดังนี้:

คุณสามารถแก้ไขแบบฟอร์มหรือสร้างแบบฟอร์มใหม่ได้อย่างง่ายดาย เพียงทำตามคำแนะนำภายในปลั๊กอิน คุณก็จะพร้อมใช้งานรูปแบบที่คุณเลือกได้ในเวลาไม่นาน

เข้าสู่ระบบ/สมัครสมาชิกป๊อปอัป

ปลั๊กอินอื่นที่ควรพิจารณาคือป๊อปอัปเข้าสู่ระบบ/สมัครสมาชิก (แบบฟอร์มอินไลน์ + Woocommerce) แทนที่จะใช้แบบฟอร์มในหน้า ปลั๊กอิน (ตามชื่อที่แนะนำ) ช่วยให้คุณสร้างแบบฟอร์มการเข้าสู่ระบบแบบป๊อปอัปที่สามารถเรียกใช้งานได้จากลิงก์หรือปุ่มบนเว็บไซต์ของคุณ ป๊อปอัปนั้นยอดเยี่ยมและสามารถช่วยประหยัดเนื้อที่บนหน้ารวมทั้งเปิดโอกาสให้ผู้คนเข้าสู่ระบบจากจุดใดก็ได้บนไซต์ของคุณโดยไม่ถูกเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบหรือหน้าลงทะเบียนเฉพาะ

เช่นเดียวกับปลั๊กอินทั้งหมดที่อยู่ในรายการ คุณสามารถปรับแต่งการออกแบบของแบบฟอร์มได้อย่างเต็มที่ คุณสมบัติเด่นอื่น ๆ ได้แก่ การเข้าสู่ระบบ 'โซเชียล' ซึ่งอนุญาตให้ผู้ใช้เข้าสู่ระบบโดยใช้การเข้าสู่ระบบ Google หรือ Facebook สิ่งนี้ทำได้ด้วยส่วนเสริมของฟิลด์การลงทะเบียนที่กำหนดเองแบบชำระเงิน

เขียนรหัสลงทะเบียน WooCommerce และหน้าเข้าสู่ระบบของคุณเอง

หากคุณไม่ต้องการใช้ปลั๊กอินเพื่อสร้างหน้าเข้าสู่ระบบ/ลงทะเบียน WooCommerce ของคุณเอง ทำไมไม่เขียนโค้ดของคุณเองล่ะ! เช่นเคย การเขียนโค้ดมอบการควบคุมคุณลักษณะ การออกแบบ และฟังก์ชันขั้นสูงสุด และดังนั้นจึงเป็นตัวเลือกที่สมบูรณ์แบบหากคุณต้องการทำงานเฉพาะให้สำเร็จหรือต้องการหลีกเลี่ยงปัญหาที่อาจเกิดขึ้นที่มาพร้อมกับปลั๊กอิน

ในการเริ่มต้นใช้งานบทช่วยสอนนี้ ขั้นแรกให้ตั้งค่ารายการเมนูที่เชื่อมโยงไปยังหน้า 'บัญชีของฉัน' มาตรฐานของ WooCommerce ตอนนี้ ถ้าคุณไปที่ลิงก์เมนูนี้ที่ส่วนหน้าของเว็บไซต์ คุณจะเห็นแบบฟอร์มการเข้าสู่ระบบหรือรูปแบบสองคอลัมน์ที่มีทั้งแบบฟอร์มการลงทะเบียนและแบบฟอร์มการเข้าสู่ระบบ ซึ่งจะขึ้นอยู่กับสิ่งที่คุณตั้งค่าไว้ในตัวเลือกการสร้างบัญชี WooCommerce ที่แสดงด้านล่าง

ใช้ไคลเอ็นต์ SFTP เข้าสู่ระบบเว็บเซิร์ฟเวอร์เพื่อให้คุณสามารถดูโฟลเดอร์เว็บไซต์ของคุณได้ ภายใต้ /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 และ WooCommerce form-login.php อยู่ภายใต้ plugins/woocommerce/templates/myaccount/ นั่นหมายความว่าเพื่อแทนที่แบบฟอร์ม เราต้องสร้างลำดับชั้นดังนี้: /themes/twentytwenty/woocommerce/myaccount/ และใส่ไฟล์ form-login.php ไว้ข้างใน

มาทดสอบกัน ณ จุดนี้ เราเห็นผลลัพธ์นี้เมื่อไปที่หน้าบัญชีที่ส่วนหน้าของเว็บไซต์ของเรา:

ตอนนี้ถ้าเราพยายามเปลี่ยนแปลงอะไรในโค้ดภายใน form-login.php ซ้ำกัน เราจะสังเกตเห็นว่ามันจะส่งผลต่อเลย์เอาต์ตามที่คาดไว้ มาลองเปลี่ยนแปลงเล็กน้อยเพื่อตรวจสอบว่าใช้งานได้ เราจะเปลี่ยนข้อความ 'จดจำฉัน' เป็น 'จดจำข้อมูลรับรองของฉัน' และ voila หากเรารีเฟรชหน้าส่วนหน้า เราควรเห็นว่าการอัปเดตนั้นมีผลแล้ว

แยกล็อกอิน/ลงทะเบียน

นี่คือขั้นตอนที่คุณต้องปฏิบัติตามเพื่อแยกหน้าเข้าสู่ระบบและลงทะเบียน:

ในการเริ่มต้น เราจะลงทะเบียนเทมเพลตที่กำหนดเองใหม่ ในการดำเนินการนี้ ให้สร้างไฟล์ใหม่ชื่อ 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 จากนั้นเราจะตรวจสอบว่าผู้ใช้เข้าสู่ระบบแล้วหรือไม่ ส่วนที่เหลือของรหัสนั้นเป็นสำเนาของเนื้อหาการ login-form.php ที่เกี่ยวข้องกับแบบฟอร์มการลงทะเบียนที่อยู่ใน <div class="custom-registration"> องค์ประกอบ

ต่อไป เราเพิ่มหน้าใหม่ในหน้าจอ wp-admin Pages และตั้งชื่อตามที่เราชอบ มันอาจจะสมเหตุสมผลที่จะเรียกมันว่า 'หน้าลงทะเบียน' จากนั้น ตรวจสอบให้แน่ใจว่าคุณได้เลือกเทมเพลตที่ถูกต้อง (เทมเพลตที่เราเพิ่งสร้างขึ้น) โดยใช้ตัวเลือกเทมเพลตในแถบด้านข้างทางขวา

ตอนนี้ สิ่งที่เราต้องทำคือจัดเตรียมวิธีการใช้งานเพื่อเข้าถึงหน้านี้ คุณสามารถสร้างรายการเมนู 'ลงทะเบียน' และเชื่อมโยงไปยังหน้าการลงทะเบียนที่คุณเพิ่งสร้างขึ้น หรือคุณสามารถแก้ไข form-login.php และแทนที่รหัสการลงทะเบียนด้วยลิงก์ไปยังหน้าการลงทะเบียน

หากเราทำสิ่งนี้ เราจะแก้ไขไฟล์ form-login.php ภายใต้ themes/twentytwenty/woocommerce/myaccount/ เพื่อให้เนื้อหามีลักษณะดังนี้:

 <?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 คือรหัสของหน้าการลงทะเบียนที่กำหนดเอง เพื่อเป็นการเตือนความจำอย่างรวดเร็ว คุณสามารถดูรหัสเพจใน URL เมื่อเปิดอยู่ในตัวแก้ไขแบ็กเอนด์

ตอนนี้ หากคุณดูที่หน้าจากส่วนหน้า คุณควรเห็นสิ่งนี้เมื่อคุณไปที่หน้ารายละเอียดบัญชี:

หากคุณคลิกลิงก์ลงทะเบียน คุณควรถูกเปลี่ยนเส้นทางไปยังหน้าการลงทะเบียนที่เราสร้างไว้ดังที่แสดงด้านล่าง:

ค่อนข้างง่ายใช่มั้ย

การสร้างรหัสย่อ

หน้าบัญชี WooCommerce มีรหัสย่อ [woocommerce_my_account] ซึ่งสามารถใช้เพื่อส่งออกแบบฟอร์มโดยใช้ไฟล์ form-login.php ในส่วนนี้ เราจะมาดูกันว่าเราจะสร้างรหัสย่อของเราได้อย่างไร รหัสหนึ่งสำหรับแบบฟอร์มการเข้าสู่ระบบ และอีกรหัสสำหรับแบบฟอร์มการลงทะเบียนที่เราสร้างไว้ด้านบน

รหัสย่อการลงทะเบียน 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 hook ได้ดังนี้:

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

/?p=207 URL ที่ใช้ด้านบนอ้างอิง ID ของเพจที่เราต้องการนำผู้ใช้ไปเมื่อออกจากระบบ แทนที่สิ่งนี้สำหรับ ID ของหน้าออกจากระบบที่คุณเลือก

หมายเหตุสำคัญ!

จำไว้เสมอว่าทุกคนสามารถเยี่ยมชมหน้าเข้าสู่ระบบและ/หรือหน้าลงทะเบียนใหม่ของคุณ... และใครก็ตามที่เราหมายถึงบอทด้วยเช่นกัน! ดังนั้นจึงเป็นสิ่งสำคัญมากที่คุณจะต้องปกป้องเว็บไซต์ของคุณจากการลงทะเบียนปลอมและการเข้าสู่ระบบแบบเดรัจฉาน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการปกป้องไซต์ของคุณ เราขอแนะนำให้คุณใช้เวลาอ่านคำแนะนำเกี่ยวกับวิธีการรักษาความปลอดภัยเว็บไซต์ WordPress ของคุณ และวิธีจัดการกับกิจกรรมสแปมบนเว็บไซต์ WordPress ของคุณ

หวังว่าบทความนี้จะให้แนวคิดบางประการแก่คุณเกี่ยวกับวิธีที่คุณสามารถจินตนาการถึงหน้าการลงทะเบียนและเข้าสู่ระบบ WooCommerce ของคุณและให้เครื่องมือในการเปลี่ยนแปลงตามที่เห็นสมควร