Как настроить и разделить страницы входа и регистрации в WooCommerce

Опубликовано: 2021-04-28

Независимо от того, используете ли вы 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 .

Регистрация пользователя

Плагин регистрации пользователей woocommerce

Плагин User Registration позволяет создавать внешние формы, используя поля перетаскивания, которые позволяют легко создавать формы и изменять их порядок.

После того, как вы установили плагин, перейдите в раздел «Регистрация пользователя», где вы можете приступить к созданию собственной регистрационной формы для своего магазина WooCommerce. Вы заметите, что есть готовая форма с коротким кодом, который вы можете скопировать и вставить на свой веб-сайт в любом месте по вашему выбору. Форма будет выглядеть примерно так:

Конечно, вы можете легко отредактировать форму или создать новую. Просто следуйте инструкциям в плагине, и вы сразу же получите форму по вашему выбору.

Всплывающее окно входа/регистрации

Еще один плагин, который стоит рассмотреть, — всплывающее окно входа/регистрации (встроенная форма + Woocommerce). В отличие от форм на странице, плагин (как следует из названия) помогает вам создавать всплывающие формы входа, которые могут запускаться по ссылке или кнопке на вашем веб-сайте. Всплывающие окна могут быть отличными и могут помочь сэкономить место на странице, а также дать людям возможность войти в систему из любой точки вашего сайта без перенаправления на конкретную страницу входа или регистрации.

Как и во всех перечисленных плагинах, вы можете полностью настроить дизайн форм. Другие примечательные функции включают в себя такие вещи, как «социальные» логины, которые позволяют пользователям входить в систему, используя свои логины Google или Facebook. Это делается с помощью платного дополнения Custom Registration Field.

Кодируйте свои собственные страницы регистрации и входа в 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' ) ) : ?> , которое относится к опции администратора на снимке экрана выше.

Используя это, мы сможем разделить страницы входа и регистрации, а также настроить формы с помощью всего нескольких настроек.

Настройте форму входа

Для начала вам нужно убедиться, что любые изменения, которые вы вносите в форму входа/регистрации, вносятся безопасным способом, чтобы их нельзя было отменить при будущих обновлениях.

Если вы уже вошли в систему через 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 , мы заметим, что это повлияет на макет, как и ожидалось. Давайте попробуем небольшое изменение, чтобы убедиться, что это работает. Мы изменим текст «Запомнить меня» на «Запомнить мои учетные данные» и вуаля, если мы обновим страницу переднего плана, мы увидим, что обновление вступило в силу.

страницы регистрации и входа в woocommerce

Отдельный вход/регистрация

Вот шаги, которые необходимо выполнить, чтобы разделить страницы входа и регистрации:

Для начала мы зарегистрируем новый пользовательский шаблон. Для этого создайте новый файл с именем 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(); }

URL-адрес /?p=207 , использованный выше, ссылается на идентификатор страницы, на которую мы хотим направить людей при выходе из системы. Замените это на идентификатор выбранной вами страницы выхода.

Важное примечание!

Стоит помнить, что кто угодно может посетить ваши новые страницы входа и/или регистрации… и под кем угодно мы подразумеваем ботов! Поэтому очень важно, чтобы вы защищали свой веб-сайт от фальшивых регистраций и входа в систему методом грубой силы. Для получения дополнительной информации о том, как защитить свой сайт, мы настоятельно рекомендуем вам прочитать наше руководство о том, как защитить свой веб-сайт WordPress, а также о том, как бороться со спамом на вашем веб-сайте WordPress.

Надеюсь, эта статья дала вам некоторые идеи о том, как вы можете переосмыслить свои страницы регистрации и входа в WooCommerce, и предоставила вам инструменты для внесения изменений там, где вы считаете нужным.