كيفية تخصيص وفصل صفحات تسجيل الدخول والتسجيل في WooCommerce

سواء كنت تستخدم WooCommerce أم لا ، فقد تكون على دراية بالفعل بأنه أحد أشهر حلول التجارة الإلكترونية مفتوحة المصدر المتاحة اليوم. كما هو الحال مع أي برنامج ، فإنه يحتوي على بعض القيود والعيوب. في هذه المقالة سنقوم بمعالجة واحدة من هذه ... عدم القدرة على التخصيص الكامل و / أو فصل صفحات تسجيل الدخول والتسجيل.

أحد أكثر الطلبات شيوعًا من مستخدمي WooCommerce هو أن تكون قادرًا على تحديث وتخصيص كل من صفحات تسجيل الدخول والتسجيل. من الناحية المثالية ، يرغب العديد من المستخدمين أيضًا في التمكن من فصل هذه الصفحات بدلاً من جعلها صفحة "الكل في واحد". في هذه المقالة سنلقي نظرة على كيفية تحقيق هذين الأمرين ... صفحة تسجيل دخول / تسجيل مخصصة ومنفصلة بالكامل لموقع WooCommerce الخاص بك.

هيا بنا نبدأ!

باستخدام البرنامج المساعد

ربما ليس من المستغرب أن أسهل طريقة لحل معضلة تخصيص صفحة تسجيل الدخول / التسجيل هي باستخدام مكون إضافي. لقد اخترنا بعضًا من أفضل ما قد ترغب في استخدامه. دعونا نلقي نظرة عليهم.

Woocommerce تسجيل الدخول / الاشتراك لايت

انتقل إلى قائمة مسؤول 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 .

تسجيل المستخدم

يسمح لك المكون الإضافي تسجيل المستخدم بإنشاء نماذج الواجهة الأمامية باستخدام حقول السحب والإفلات التي تسمح بتصميم النموذج وإعادة الترتيب بسهولة.

بعد تثبيت المكون الإضافي ، انتقل إلى "تسجيل المستخدم" حيث يمكنك البدء في إنشاء نموذج التسجيل المخصص لمتجر 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. من المهم أن تحتفظ ببنية الملف ولكن تزيل الدليل الفرعي / قوالب /. على سبيل المثال ، لدينا قالب Twenty Twenty مثبتًا و WooCommerce form-login.php موجود ضمن plugins/woocommerce/templates/myaccount/ . هذا يعني أنه من أجل تجاوز النموذج ، يتعين علينا إنشاء تسلسل هرمي مثل هذا: /themes/twentytwenty/woocommerce/myaccount/ ووضع ملف form-login.php في الداخل.

دعونا نختبرها. في هذه المرحلة ، نرى هذا الناتج عند زيارة صفحة الحساب في الواجهة الأمامية لموقعنا على الويب:

الآن إذا حاولنا تغيير أي شيء في الكود داخل form-login.php المكررة ، فسنلاحظ أنه سيؤثر على التخطيط كما هو متوقع. دعنا نجرب تغييرًا طفيفًا فقط للتحقق من أن هذا يعمل. سنقوم بتغيير النص "تذكرني" إلى "تذكر بيانات الاعتماد الخاصة بي" وفويلا ، إذا قمنا بتحديث الصفحة الأمامية ، فسنرى أن هذا التحديث ساري المفعول.

تسجيل دخول / تسجيل منفصل

فيما يلي الخطوات التي يجب اتباعها لفصل صفحات تسجيل الدخول والتسجيل:

للبدء سنقوم بتسجيل قالب مخصص جديد. للقيام بذلك ، قم بإنشاء ملف جديد يسمى 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 ونسميها كما نحب. ربما يكون من المنطقي تسميتها شيئًا مثل "صفحة التسجيل". بعد ذلك ، تأكد من تحديد القالب الصحيح (النموذج الذي أنشأناه للتو) باستخدام محدد القالب في الشريط الجانبي الأيمن.

الآن كل ما يتعين علينا القيام به هو توفير طريقة لاستخدامات للوصول إلى هذه الصفحة. يمكنك إنشاء عنصر قائمة "تسجيل" وربطه بصفحة التسجيل التي أنشأتها للتو أو يمكنك تعديل 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' );

كما ترى ، قمنا بتسمية الرمز القصير [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 المستخدم أعلاه إلى معرف الصفحة التي نريد توجيه الأشخاص إليها عند تسجيل الخروج. استبدل هذا بمعرف صفحة الخروج التي اخترتها.

ملاحظة مهمة!

من الجدير بالذكر أنه يمكن لأي شخص زيارة صفحات تسجيل الدخول و / أو التسجيل الجديدة الخاصة بك ... ونعني من قبل أي شخص روبوتات أيضًا! لذلك من المهم حقًا حماية موقع الويب الخاص بك من عمليات التسجيل المزيفة وعمليات تسجيل الدخول بالقوة الغاشمة. لمزيد من المعلومات حول كيفية حماية موقعك ، نوصي بشدة أن تأخذ الوقت الكافي لقراءة دليلنا حول كيفية تأمين موقع WordPress الخاص بك وأيضًا كيفية التعامل مع نشاط البريد العشوائي على موقع WordPress الخاص بك.

نأمل أن يكون هذا المقال قد أعطاك بعض الأفكار حول كيفية إعادة تخيل تسجيل WooCommerce وصفحات تسجيل الدخول ومنحك الأدوات اللازمة لإجراء التغييرات في المكان الذي تراه مناسبًا.