Добавляем форму входа (авторизации) wordpress в сайдбар или на страницу
+38

Из этого урока вы узнаете как установить форму авторизации (входа) на страницу или в сайдбар сайта на wordpress.
Как многим известно, чтобы расширить функциональность сайта, построенного на wordpress, прибегают к помощи плагинов сторонних разработчиков. Задачу установки формы авторизации в сайдбар сайта также можно решить с помощью установки соотвествующего плагина.Однако, плагины, вместе с функционалом и удобством, которые они вносят в работу сайта, добавляют еще и дополнительную нагрузку на сервер. А при условии высокой посещаемости интернет-ресурса это совсем ни к чему. Поэтому, тем, кто разбирается в HTML, CSS и PHP, нужно стараться избегать устанавливать плагины, без которых можно обойтись.

Это было небольшое лирическое отсупление, а теперь приступим к созданию формы авторизации (входа) на сайт, и размещении ее в сайдбаре или на странице сайта wordpress.
Однако, чтобы воплотить эту идею в жизнь, нам все же придется сделаь исключение, и прибегнуть к помощи стороннего плагина. И так, первым делом устанавливаем плагин для wordpress Exec-PHP. Этот плагин позволяет добавлять исполняемый код PHP в виджеты, в записи и на страницы сайта, построенного на системе wordpress. Эти возможности плагина Exec-PHP возможно понадобятся вам и в дальнейшем, чтобы использовать дополнительные функции wordpress.
Работа с плагином проста как дважды два. Нужно всего лишь установить его, активировать в консоли, зайти на страницу настроек плагина и нажать кнопку SaveChanges. Все — плагин готов к работе. Можно добавлять исполняемый код PHP, что нам собственно от него и нужно.

Для создания формы авторизации на нашем сайте мы будем использовать следующие функции wordpress:

get_currentuserinfo();
is_user_logged_in();
wp_login_form();
wp_logout_url();

Немного подробнее о том, что у нас должно получиться.
В зависимости от того, произведен вход на сайт или нет, должны отображаться различные данные. Если вход на сайт не произведен, то должна отображаться форма входа, состоящая из полей ввода логина и пароля, а если же пользователь вошел на сайт, то должно отображаться приветствие и меню управления профилем.

Для лучшего восприятия материала приведу весь код сразу, а затем рассмотрю его подробнее

<div class="login_form_widget">
<?php if (!is_user_logged_in()) { 
		echo "<p>Здравствуйте, <strong>гость</strong>!</p>";
		wp_login_form(); ?>
		<p><?php if ( get_option( 'users_can_register' ) ) : ?><a href="<?php echo esc_url( site_url( 'wp-login.php?action=register', 'login' ) ); ?>"><?php _e( 'Register' ); ?></a> | <?php endif; ?><a href="<?php bloginfo('wpurl'); ?>/wp-login.php?action=lostpassword">Забыли пароль?</a></p><?php } 
	else { ?>
		<?php global $user_identity;
		get_currentuserinfo(); ?>
		<p>Здравствуйте, <strong><?php echo $user_identity; ?></strong>!</p>
		<ul>
			<li><a href="<?php bloginfo('url'); ?>/wp-admin/profile.php">Изменить профиль</a></li>
			<li><a href="<?php echo wp_logout_url(get_permalink()); ?>">Выйти</a></li>
		</ul>
<?php } ?>
</div>

а так данный код выглядит в окне добавления виджета PHP code
Код формы авторизации в сайдбар

Во-первых, мы поместим весь код формы входа на сайт в отдельный контейнер DIV для удобства применения к форме стилей оформления.

С помощью функции is_user_login() проверям произведен ли вход на сайт или нет

!is_user_logged_in()

Если вход не произведен
Форма входа wordpress

сначала на экран выводим приветствие

echo "<p>Здравствуйте, <strong>гость</strong>!</p>";

а затем уже форму входа wordpress

wp_login_form();

и дополнительно две дополнительные ссылки:
регистрация — для перехода к форме регистрации на сайте

<a href="<?php echo esc_url( site_url( 'wp-login.php?action=register', 'login' ) ); ?>"><?php _e( 'Register' ); ?></a>

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

за это отвечает следующая функция wordpress

<?php if ( get_option( 'users_can_register' ) ) : ?>

забыли пароль? — для перехода к форме восстановления пароля.

<a href="<?php bloginfo('wpurl'); ?>/wp-login.php?action=lostpassword">Забыли пароль?</a>

Далее идет вторая часть кода, которая будет исполняться если вход на сайт произведен.
Форма входа wordpress в сайдбар

Сначала получаем данные о пользователе

<?php global $user_identity;
get_currentuserinfo(); ?>

и выводим приветствие текущего пользователя

<p>Здравствуйте, <strong><?php echo $user_identity; ?></strong>!</p>

а далее выводим меню управления профилем пользователя

<ul>
	<li><a href="<?php bloginfo('url'); ?>/wp-admin/profile.php">Изменить профиль</a></li>
	<li><a href="<?php echo wp_logout_url(get_permalink()); ?>">Выйти</a></li>
</ul>

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

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

Например ссылка на добавление новой записи будет выглядеть следующим образом

<li><a href="<?php bloginfo('url'); ?>/wp-admin/post-new.php">Добавить статью</a></li>

На страницу wordpress форма входа вставляется также с помощью вышеприведенного кода. Плагин Exec-PHP позволит вам вставить исполняемый код PHP на страницу.

И единственное что вам останется после этого, так это оформить форму входа wordpress с помощью таблиц стилей в соответствии с вашей темой.

+38
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: Уроки Wordpress, Хаки Wordpress. Прямая ссылка на запись.

Комментарии к записи Добавляем форму входа (авторизации) wordpress в сайдбар или на страницу: 47

  1. Олег сказал(а):

    Здравствуйте, Очень понравилась ваша статья но почему то поля вылезают за вёрстку((причём их ширина 315px а на странице wp-login 264px изрыл весь stylecss не нашёл как изменить((

    • remak сказал(а):

      У вас для полей назначен класс class=»input» к которому в файле page_templates.css (38 строка) применено свойство width=»300px». Значит есть два выхода: изменить класс для полей, или изменить значение вышеуказанного свойства.

  2. Олег сказал(а):

    Спасибо огромное)))Всё отлично теперь, а не подскажете как вы определили что стиль для полей именно в этом файле описан?

    • remak сказал(а):

      Есть такой замечательный инструмент для разработчика FireBug. Это если вы пользуетесь Firefox.
      В Google Chrome есть встроенный инструмент.

  3. Евгений сказал(а):

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

  4. Сергей сказал(а):

    Здравствуйте!!! Долго искал форму авторизации, ваша по нраву. Но вот проблема, установил, на сайте вот-такая ерунда вышла:

    Здравствуйте, гость!

    «; wp_login_form(); ?>

    | Забыли пароль?

    Здравствуйте, !

    Изменить профиль
    Выйти

    Как можно исправить это ???

  5. Михаил сказал(а):

    Почему-то ссылка на «Авторизацию» не выводиться

    • Михаил сказал(а):

      Прошу прощения — ссылки «Регистрация»

      • Михаил сказал(а):

        Разобрался.Была отключена опция «Любой может зарегистрироваться». Всё работает! Спасибо за код!

  6. Евгений сказал(а):

    А как к примеру сделать так! Если ты админ или нужный пользователь, то тебе надо выводить в сайдбаре нужный код, если нет, то ничего не выводить? Подскажите плиз! Такой вариант не работает:

    qwerty

    • remak сказал(а):

      Можно так:

      < ?php
          wp_get_current_user();
          $current_user = wp_get_current_user();
          if ( !($current_user instanceof WP_User) )
      		return;
          
      	if ($current_user->user_login == 'admin') { // Выбор нужного пользователя по логину
      		echo 'Hello, Admin!'; // Заменить на нужный код
      		}
      ?>
      
  7. Жанна сказал(а):

    Спасибо огромное!
    Форма отлично встала!

  8. WordPress уроки сказал(а):

    Отлично, сейчас попробую.

  9. Андрей сказал(а):

    Почему-то ссылка на «Регистрацию» не выводиться. Опция «Любой может зарегистрироваться» включена

  10. Art-n1 сказал(а):

    Не работает. помогите сделать форму в сайдбаре! Вот что получается: Авторизация
    Здравствуйте, гость!
    » wp_login_form(); ?>
    | Забыли пароль?
    Здравствуйте, !
    Изменить профиль
    Выйти

    • admin сказал(а):

      Попробуйте, вставить одну строку
      < ?php wp_login_form(); ?>
      Если появится форма, значит проверяйте правильность ввода кода.

      • Agor сказал(а):

        У меня такая же проблема, выводится:

        Здравствуйте, гость!
        » wp_login_form(); ?>
        | Забыли пароль?
        Здравствуйте, !
        Изменить профиль
        Выйти

        Если вставляю:

        форма не появляется

  11. Наташа сказал(а):

    Здравствуйте,скажите а как можно сделать регистрацию чтобы человек не переходил на страницу wp-login.php, а оставался на сайте(Как оформлено у вас на сайте)?

  12. x1313 сказал(а):

    Да, было бы интересно сделать такую же форму входа как у Вас на сайте

  13. Jamba сказал(а):

    А я не понял куда всё это писать =((

    • Оксана сказал(а):

      Мне захотелось поставить форму авторизации в виджет сайдбара. Для этого я загрузила плагин Exec-PHP, который мне дал возможность записывать РНР-коды в ТЕКСТ, который добавляю в виджет. На страничке виджетов, выбираю ТЕКСТ и переношу в нужный виджет. В нём и копирую код, написанный разработчиками. Можно добавить ещё своего текста и всё работает.

  14. aleksej сказал(а):

    а как сделать, чтобы когда ты зашел на свой пользователь у тебя высвечивалась твоя аватарка?

    • remak сказал(а):

      Не задавался целью, но думаю, нужно использовать функцию
      get_avatar

      Вставьте в приведенный код после седьмой строки
      global $user_ID;

      а после восьмой

      < ?php echo get_avatar( $user_ID, 32 ); ?>

  15. Вахит сказал(а):

    Здравствуйте. А как прописать для этого виджета отдельный css стиль?

    • admin сказал(а):

      Здравствуйте!
      Нужно добавить в файл style.css вашей темы стили для класса .login_form_widget и его дочерних элементов.

  16. Вахит сказал(а):

    Вот что получилось после применения к этому виджету стиль http://itmages.ru/image/view/1016217/ce1a32e5

  17. Ирина сказал(а):

    Форма авторизации встала, можно зарегистрироваться и приходит пароль, по ссылке вход осуществляется, но потом зайдя на сайт — вводим логин и пароль — выходит ошибка.
    Подскажите, что не так?

  18. Сергей сказал(а):

    Админ, не можешь поделиться своей формой входа? Свяжись со мной по e-mail, указанному в комментарии, пожалуйста…

  19. admin сказал(а):

    Два плагина:
    Theme My Login
    Theme My Profile

  20. Оксана сказал(а):

    Долго искала себе плагин авторизации для вордпресса, и ничего меня не устраивало. Наверное, я слишком щепетильна. Попробовала через ввод текста в виджет с поддержкой РНР, всё как вы описали и… мне понравилось) Дописала там своего, чего хотела и… кароче, вы молодцы. Пойду поищу, что предлагает инет для того, чтоб пользователь моего сайта мог управлять своей страничкой (добавлением статей, изменением аватарки и другими возможностями) из странички, а не из консоли вордпресса. Если у вас что то по этому вопросу есть, дайте ссылку, если нет, дайте сылку, где есть инфа по этому. Буду благодарна) Я новичок, но у вас всё так понятно и просто написано, и, главное немного, что разобралась во всём.
    Ещё один вопрос, наверняка вы знаете ответ. Я делаю сайт для блоггеров. И немного смутно различаю «автора» от «юзера». Т.е. «автор» — тот, что опубликовал статью. Я могу зайти на его страничку, посредствам , который я вывела в статье. А вот, если пользователь зарегистрирован, но ничего ещё не написал, как мне выйти на его страничку, это же надо что то идентичное, но с юзером. Как сделать ссылку на страничку пользователя, наведя на его имя, скажем, в чате, или в списке пользователей? Я не очень путано написала?)

  21. Lirila сказал(а):

    Здраствуйте admin у меня слово пороль отображается с боку от поля ввода пороля, а не сверху. Можете помочь.

  22. Mariya сказал(а):

    Привет! Спасибо большое за форму! Прям как я желала :)
    У меня возник такой же вопрос как у последнего комментатора. Я все сделала, но поле для ввода логина и пароля отображается в одной строчке со словами «Логин», «Пароль». Неудобно и некрасиво. Сравнила с Вашим сайтом и у вас поля перенесены на следующую строчку. Хотела поправить сама в коде, но увидела, что там только функция wp_login_form();. Я так понимаю нужно править в самой этой функции? А где она находится? И я нашла вроде ее в одном файле, решила чуть поправить, а слетел весь сайт :( Как же сделать этот перенос строки? Заранее спасибо!

    • admin сказал(а):

      На этом сайте форма с помощью плагина Theme My Login.
      А если вы добавили форму с помощью дополнительной функции, то вам нужно оформить ее, добавив некоторые правила CSS в style.css

  23. Дмитрий сказал(а):

    Представим, что данная форма авторизации находилась на домашней странице нашего сайта и пользователь решил ничего не вводить, а просто нажать «Войти».. его переместило на site.ru/wp-login.php
    Что хотелось бы видеть:
    1. Если есть пустое поле и пользователь нажал «Войти» то никакого перенаправления на site.ru/wp-login.php не происходит, а только подсвечиваются поля которые не заполнены в форме авторизации.
    2. Если пользователь заполнил поля в форме авторизации «Неверно» и нажал «Войти» то его перенаправляет на site.ru/wp-login.php с предупреждением об ошибке ввода «Имя пользователя или пароль были введены неправильно».
    3. Если вход осуществлялся с site.ru/wp-login.php и пользователь заполнил поля «Неверно» то выводится предупреждение об ошибке ввода «Имя пользователя или пароль были введены неправильно».
    4. Если вход осуществлялся с site.ru/wp-login.php и пользователь заполнил поля «Верно» то его перенаправляет на домашнюю страницу сайта с приветствием авторизованного пользователя.
    5. Если вход осуществлялся с домашней страницы сайта то появляется приветствие авторизованного пользователя.
    6. Если пользователь решил покинуть систему то его перенаправляет на главную страницу сайта без каких-либо предупреждений о выходе.
    Думаю остальным читателям это будет тоже интересно реализовать на своем сайте.
    Помогите нам :)

    • admin сказал(а):

      Попробуйте обойтись малой кровью — плагины Theme my login и Theme my profile.
      В TML есть много настроек перенаправления, модерации и т.п.

  24. Floop сказал(а):

    После регистрации не приходит письмо с паролем, что делать? Код такой как в примере

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *