Как изменить форму регистрации wordpress

Изменение страницы входа WordPress. C учётом сообщений об ошибках и редиректов.

На своём блоге я всегда стараюсь брать те темы, которые наиболее актуальны русскоязычным пользователям. Иногда получается… а иногда нет. Поэтому прежде всего хочу напомнить — если у вас есть предложение для поста, свяжитесь со мной любым удобным вам способом. Буду вам за это очень благодарен.

А теперь ближе к делу. Представляю вам серию постов, посвящённых нестандартным формам пользователей, а именно — форме входа (этот пост), форме регистрации и форме сброса пароля (ссылки на новые посты появятся по мере их появления).

Итак, форма авторизации пользователей. Как она по умолчанию выглядит в WordPress.

Форма выглядит и работает прекрасно. Однако, если вы работаете над серьёзным сайтом, возможно хотелось бы сделать форму, вписывающуюся в общий дизайн, и без логотипа WordPress. Ну хорошо, логотип вы можете заменить + немного своих стилей подобавлять, но идеальной кастомизации вы всё же не добьётесь, только потратите массу времени и сил.

Итак, произвольная форма входа для WordPress (в этой статье я её ещё буду называть кастомной формой — просто потому что мне так удобнее).

Начну с такого важного преимущества кастомной формы, как возможность задавать свой URL, например http://ваш-сайт/login .

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

Как и всегда, я буду стараться описывать всё максимально простым языком, однако если вам что-либо непонятно, вы всегда можете оставить свой вопрос в комментариях — постараюсь ответить максимально подробно, либо мы можем просто связаться по скайпу (его вы можете найти на странице контактов).

Шаг 1. Форма входа в виде шорткода

В принципе вам даже не нужно каких-либо знаний кода — просто копируете этот код и вставляете его в functions.php текущей темы.

Но тут вам важно обратить внимание на URL страницы входа и страницы личного кабинета. Этот код уже оптимизирован для URL вашсайт.com/login (на этой странице форма входа пользователей) и вашсайт.com/account (на этой странице личный кабинет).

Если вы будете использовать другие URL, то просто замените их в этом коде и в коде из следующего шага. Кода в принципе немного, думаю у вас не возникнет с этим проблем.

/* * Добавляем шорткод, его можно использовать в содержимом любой статьи или страницы, вставив [misha_custom_login] */ add_shortcode( 'misha_custom_login', 'misha_render_login' ); function misha_render_login() { // проверяем, если пользователь уже авторизован, то выводим соответствующее сообщение и ссылку "Выйти" if ( is_user_logged_in() ) { return sprintf( "Вы уже авторизованы на сайте. %s'>Выйти.", wp_logout_url() ); } // присваиваем содержимое формы переменной и затем возвращаем её, выводить через echo() мы не можем, так как это шорткод $return = '
'; // если возникли какие-либо ошибки, отображаем их if ( isset( $_REQUEST['errno'] ) ) { $error_codes = explode( ',', $_REQUEST['errno'] ); foreach ( $error_codes as $error_code ) { switch ( $error_code ) { case 'empty_username': $return .= '
'; break; case 'empty_password': $return .= '
'; break; case 'invalid_username': $return .= '
'; break; case 'incorrect_password': $return .= sprintf( "
Неверный пароль. %s'>Забыли?
", wp_lostpassword_url() ); break; case 'confirm': $return .= '
Инструкции по сбросу пароля отправлены на ваш email.
'; break; case 'changed': $return .= '
Пароль успешно изменён.
'; break; case 'expiredkey': case 'invalidkey': $retun .= '
'; break; } } } // используем wp_login_form() для вывода формы (но можете сделать это и на чистом HTML) $return .= wp_login_form( array( 'echo' => false, // не выводим, а возвращаем 'redirect' => site_url('/account/'), // куда редиректить пользователя после входа ) ); $return .= ' . wp_lostpassword_url() . '">Забыли пароль
'; // и наконец возвращаем всё, что получилось return $return; }

Теперь вы можете вставить шорткод [misha_custom_login] в содержимое страницы и у вас выведется форма. В принципе вы можете использовать этот шорткод много раз и на многих страницах и записях, но имейте ввиду, что у вас должна быть основная страница авторизации, как я уже писал выше, у меня это вашсайт.com/login , но вы можете использовать и другой URL, главное не забыть поменять его в коде.

Я использовал стандартную тему twentyfifteen и форма у меня получилась следующая:

Шаг 2. Проставляем нужные редиректы

На самом деле сделать форму — проще простого, а самое интересное начинается сейчас. В этом шаге мы сделаем две важные вещи:

• при возникновении ошибок (неверный пароль или несуществующий пользователь) будем направлять пользователя обратно на нашу произвольную форму, а не на стандартную,
• в случае если пользователь выходит с сайта и параметр редиректа не задан, так же будем направлять его на нашу форму (но разумеется вы можете задать любой URL, какой захотите).

Итак, код для functions.php :

/* * Редиректы обратно на кастомную форму входа в случае ошибки */ add_filter( 'authenticate', 'misha_redirect_at_authenticate', 101, 3 ); function misha_redirect_at_authenticate( $user, $username, $password ) { if ( $_SERVER['REQUEST_METHOD'] === 'POST' ) { if ( is_wp_error( $user ) ) { $error_codes = join( ',', $user->get_error_codes() ); $login_url = home_url( '/login/' ); $login_url = add_query_arg( 'errno', $error_codes, $login_url ); wp_redirect( $login_url ); exit; } } return $user; } /* * Редиректы после выхода с сайта */ add_action( 'wp_logout', 'misha_logout_redirect', 5 ); function misha_logout_redirect(){ wp_safe_redirect( site_url( '/login/?logged_out=true' ) ); exit; }

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

По теме

• Изменение страниц восстановления пароля в WordPress.
• wp_login_form() — Создание формы входа
• site_url() — возвращает URL директории установки WordPress

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Как изменить форму входа в WordPress

Здравствуйте, друзья! В этом уроке мы поговорим о том, как можно изменить форму входа в WordPress.

Вы узнаете как заменить стандартный логотип WordPress на свой собственный, изменить фон, размер формы, шрифты, цвет и множество других элементов на форме входа в административную панель.

Хочу сразу предупредить, что урок на первый взгляд может показаться достаточно большим. Не пугайтесь, на самом деле все очень-очень просто и делается за 5 минут.

Как изменить внешний вид формы входа в WordPress

Изменять форму входа в админку мы будем с помощью достаточно нового и функционального плагина Custom Login Plugin. Итак, приступим!

1. Устанавливаем и активируем плагин Custom Login Plugin.

2. После активации плагина переходим к настройкам плагина: Настройки -> Admin custom Login.

3. Самое первое что нужно сделать — включить использование «пользовательской формы». Проще говоря, нужно заменить стандартную форму входа на форму плагина.

Для этого устанавливаем значение на «Enable Custom Login» и нажимаем кнопку «Save Changes».

Теперь форма включена, и можно начинать изменять ее по своему желанию.

Замена фона на форме входа WordPress

4. Для замены стандартного фона переходим на вкладку настроек «Background Design». В выпадающем списке выберите один из трех вариантов:

• Static Background Color — сделать фон одним цветом
• Static Background Image — загрузить изображение на фон
• Background SlideShow — установить слайд-шоу на фоне

Для установки изображения на фон выбираем «Static Background Image» и загружаем картинку нажав чуть ниже кнопку «Upload».

Настройка формы входа

5. Настроить форму входа с помощью этого плагина также очень просто. На вкладке «Login form Setting» можно настроить позиционирование формы (Login from Floating), изменить фон на картинку или сплошной цвет (Select Background), а также изменить:

• Login Form Opacity — прозрачность формы
• Background Effect — эффект фона
• Login Form Width — ширина формы
• Border Color — цвет границы
• Border Radius — радиус границы
• Border Style — стиль формы
• Border Thickness — толщина границы
• Enable form shadow? — тень формы
• Form Shadow Color — цвет тени

Настройка шрифтов

6. Настройки шрифтов находятся на вкладке «Font Setting». Там же можно изменить цвет кнопки и иконки на форме входа. Сложностей в настройке шрифтов возникнуть не должно.

Как изменить логотип в WordPress при входе в админку

Для того, чтобы изменить стандартный логотип WordPress нужно перейти на вкладку «Logo Settings» и нажав кнопку «Upload» загрузить новый логотип. На этой вкладке также можно изменить ширину и высоту логотипа.

Социальные иконки, импорт/экспорт настроек плагина

С помощью этого плагина можно также под форму входа добавить кнопки соц. сетей. Включить и настроить их можно на вкладке «Social Settings».

Также можно импортировать и экспортировать настройки плагина. Делается все это на вкладке «Export / Import».

Результат изменения страницы входа

Всего за 5 минут у меня получилась вот такая форма входа в административную панель сайта WordPress:

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

В случае если у Вас возникли вопросы или что-то не получилось — смело пишите в комментариях.

Здравствуйте, друзья! В этом уроке мы поговорим о том, как можно изменить форму входа в WordPress. Вы узнаете как заменить стандартный логотип WordPress на свой собственный, изменить фон, размер формы, шрифты, цвет и множество других элементов на форме входа в административную панель. Хочу сразу предупредить, что урок на первый взгляд может показаться достаточно большим. Не пугайтесь, на самом деле все очень-очень просто и делается за 5 минут. Как изменить внешний вид формы входа в WordPress Изменять форму входа в админку мы будем с помощью достаточно нового и функционального плагина Custom Login Plugin. Итак, приступим! 1. Устанавливаем и активируем плагин Custom Login Plugin. 2. После активации плагина переходим к…

WordPress. Как оставить только «Личный кабинет». Изменить форму веб-авторизации

1. Зайдите в администраторскую панель WordPress http:///wp-admin
2. Перейдите в меню Плагины
3. Нажмите на кнопку Добавить новый и введите в строку поиска Simple 301 Redirects
4. Установите плагин Simple 301 Redirects

Восстановить .htaccess, если он был отредактирован, через командную строку командой:

yes | cp /app/asr_cabinet/skelet/var/wordpress/.htaccess /app/asr_cabinet/var/wordpress/.htaccess

Отключение основного меню сайта

1. Перейдите в меню «Страницы»
2. Выделите все страницы
3. Выберите пункт меню «Удалить»
4. Нажмите кнопку «Применить»

Перейти в меню «Внешний вид»

Подменю «Меню»

Выбрать пункт «Меню главного сайта»

Нажать кнопку «Выбрать»

Нажать ссылку «Удалить меню»

Как оставить только «Личный кабинет» (Устарело)

Данный метод устарел и при использовании может привести к не предусмотренному поведению личного кабинета.

Для этого редактируем файл /app/asr_cabinet/var/wordpress/.htaccess и приводим его к такому виду:

# BEGIN WordPress RewriteEngine On RewriteBase / RedirectMatch ^/$ /cabinet RewriteCond % !-f RewriteCond % !-d RewriteCond % !cabinet RewriteRule (.*) /cabinet [NC,R=301,L] #RewriteRule ^index\.php$ - [L] RewriteCond % !-f RewriteCond % !-d RewriteRule . /index.php [L] # END WordPress php_value short_open_tag 1 

При входе на сайт абоненты будут попадать сразу в личный кабинет.

Для редактирования файла понадобятся права учетной записи root

Изменить форму веб-авторизации

Чтобы модифицировать форму веб-авторизации необходимо изменить шаблон /app/asr_cabinet/usr/local/lib/cabinet_modules/modules/tpls/Authorize.php по статье Замена шаблонов страниц личного кабинета или Пользовательские модули в cabinet_modules.
Модуль Authorize входит в список исключений редактирования шаблона, тоесть модифицированный шаблон должен иметь путь /app/asr_cabinet/var/cabinet_tmpl/Authorize.php
Независимо от установленной темы, плагин личного кабинета использует для страницы авторизации шаблон из основной темы личного кабинета /app/asr_cabinet/var/wordpress/wp-content/themes/carbonsoft/_cab_login.php

Редирект после оплаты

Перенаправление после оплаты может не работать, если на сайт подключили SSL. Для корректного редиректа меняем «http» на «https» в wp-config.php:
if ( !defined(‘ABSPATH’) )
define(‘ABSPATH’, dirname(FILE) . ‘/’);
define(‘WP_SITEURL’, «http://$/»);
define(‘WP_HOME’, «http://$/»);

Конечный вариант должен выглядеть так:

define('WP_SITEURL', "https://$/"); define('WP_HOME', "https://$/");; 

WebPoint Login — бесплатный плагин авторизации и регистрации пользователей с защитой от ботов

WebPoint Login – это бесплатный плагин для замены стандартных страниц авторизации, регистрации, восстановления и сброса пароля в WordPress с защитой от роботов с помощью Google reCAPTCHA.

Функции и возможности

Основными функциями плагина WebPoint Login являются:

• Создание страниц авторизации, регистрации и сброса пароля в пользовательской части сайта.
• Блокировка стандартных страниц авторизации, регистрации и сброса пароля в административной части сайта.
• Защита форм авторизации, регистрации и сброса пароля от роботов при помощи Google reCAPTCHA.
• Проверка пользовательских данных при регистрации с подробными рекомендациями по исправлению ошибок.
• Проверка сложности пароля при регистрации пользователя или восстановлении доступа к аккаунту.

Системные требования

• WordPress версии 4.7 или выше.
• PHP версии 5.6 или выше.

Скриншоты

Установка плагина

Вы можете установить плагин непосредственно в административной панели своего сайта. Для этого перейдите в Консоль > Плагины > Добавить новый и в строке поиска пропишите WebPoint Login.

Далее выберите из списка плагин WebPoint Login и нажмите кнопку «Установить», а затем «Активировать».

Также вы можете скачать и установить плагин вручную из архива. Скачать архив с файлами плагина можно на официальном сайте WordPress.

Для установки плагина перейдите в Панель управления > Плагины > Добавить новый, затем нажмите кнопку «Загрузить плагин», выберите файл и нажмите кнопку «Установить».

После завершения установки не забудьте активировать плагин.

Настройка плагина

Процесс настройки плагина WebPoint Login состоит из двух шагов:

1. Установка ключей Google reCAPTCHA.
2. Изменение заголовков служебных страниц.

Установка ключей Google reCAPTCHA

Чтобы обеспечить надежную защиту административной панели WordPress от автоматического подбора паролей, крайне рекомендуется сразу активировать защиту при помощи Google reCAPTCHA.

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

Крайне важно проверить корректность работы Google reCAPTCHA после сохранения настроек. Если вы допустите ошибку при вводе ключей и выйдете из аккаунта, то не сможете вновь авторизоваться, так как не сможете пройти защиту от роботов.

Для проверки корректности работы Google reCAPTCHA, попробуйте авторизоваться на сайте, используя другой браузер или анонимную вкладку. Если авторизация прошла без ошибок — настройка защиты завершена. В противном случае проверьте правильность ввода ключей Google reCATPCHA.

Изменение заголовков страниц

Сразу после установки и активации плагина WebPoint Login, будет создано 4 служебных страницы:

• Log in (login) – страница авторизации.
• Sign up (register) – страница регистрации.
• Forgot your password? (password-lost) – страница восстановления пароля.
• Password reset (password-reset) — страница установки нового пароля.

Все что вам требуется, это перейти в Панель управления > Страницы и изменить заголовки страниц плагина на собственные.

Как вариант, можете использовать эти заголовки:

• Log in → Авторизация
• Sign up → Регистрация
• Forgot your password? → Забыли пароль?
• Password reset → Сброс пароля

Вы также можете изменять любые параметры статических страниц кроме адресов и шорткодов в тексте.

Плагин WebPoint Login использует 4 шорткода:

• [webpoint-login-form] — форма авторизации.
• [webpoint-register-form] — форма регистрации.
• [webpoint-password-lost-form] — форма запроса нового пароля.
• [webpoint-password-reset-form] — форма установки нового пароля.

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

Решение возможных проблем

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

Решить эту проблему можно как минимум двумя способами.

1. Переименовать или удалить папку с плагином. Для этого подключитесь к сайту по FTP, перейдите в /wp-content/plugins/ и переименуйте/удалите папку webpoint-login . Это приведет к деактивации плагина и вы сможете войти на сайт, используя стандартную форму авторизации WordPress.
2. Удалить настройки плагина в базе данных. Для этого подключитесь к базе данных сайта и удалите опцию webpoint_login_settings в таблице wp_options .

На этом обзор плагина WebPoint Login подошел к концу. Если у вас остались какие-то вопросы по использованию плагина или пожелания по его улучшению — пишите в комментарии к записи.