Шаг №31.Добавляем форму авторизации на сайт в сайдбар.

Приветствую Вас на сайте http://wpcreate.ru

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

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

Задача которая стоит перед нами: На движке wordpress добавить форму авторизации,похожую как на рисунке.

Добавляем форму авторизации на сайт в сайдбар.

А вот как выглядит стандартная панель для входа в wordpress:

Форма авторизации на сайте

При нажатии на кнопку “Войти” нас перебрасывает на внутреннюю страницу авторизации:

Стандартная форма авторизации на сайте WordPress

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

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

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

А кому то проще напрямую код добавить в шаблон.

Рассмотрим два случая.

Добавления формы авторизации в виджет wordpress.

Для того что бы установить форму авторизации на сайт необходимо установить дополнительный плагин под названием Exec-PHP.

Я надеюсь Вы еще не забыли как устанавливать плагины на wordpress.

Ну а если забыли,то вкратце напомню.

Идем в админку сайта->Плагины->Добавить новый

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

Вводим название плагина и нажимаем на кнопку “Поиск плагинов”

Ну а дальше нужно найти в списке нужный плагин и нажать кнопку установить.

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

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

Настройки плагина Exec-PHP.

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

<div class="login_form_widget"><!--?php if (!(current_user_can('level_0'))){ ?-->
<table>
<tbody>
<tr>
<td><form action="<?php echo get_option('home'); ?>/wp-login.php" method="post"><input id="log" type="text" name="log" size="25" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" /></form></td>
<td><input id="pwd" type="password" name="pwd" size="25" value="Пароль" /></td>
</tr>
<tr>
<td><input id="rememberme" type="checkbox" checked="checked" name="rememberme" value="forever" /> Запомнить</td>
<td><input class="button" id="search-submit" type="submit" name="submit" value="OK" /></td>
</tr>
<tr>
<td><a href="<?php echo get_option('home'); ?>/wp-register.php">Регистрация</a></td>
<td><a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Восстановить пароль </a></td>
</tr>
</tbody>
</table>
<ul>
	<li class="cat-item"><a href="<?php echo get_option('home'); ?>/wp-admin/">В админку</a></li>
	<li class="cat-item"><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Новая статья</a></li>
	<li class="cat-item"><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Новая страница</a></li>
	<li class="cat-item"><a href="<?php echo get_option('home'); ?>/wp-login.php?action=logout&redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Выход</a></li>
</ul>
</div>

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

Форма авторизации на сайте

Добавления формы авторизации в виджет wordpress в файл sidebar.php

Открываем файл sidebar.php и находим нужное место для вставки формы авторизации на сайте.

sidebar.php

В моем случае код необходимо разместить сразу же после [sourcecode language=’html’][/sourcecode]во 2 строке.

В нужное место необходимо вставить немного измененный код:

[sourcecode language=’html’]

  • http://wmascat.blogspot.com/ Константин

    Ох и вариант вы предложили Артем. Начну с того, что упомянутых вами плагин явно использует eval(), а это не самая быстрая штука имхо. Да и с $_SERVER[‘REQUEST_URI’] поосторожней, его бы как-то обрабатывать, а то мало ли. Вообще, всю эту авторизацию лично я скрываю и даже блокирую по IP в .htaccess (о чём уже писал у себя, не буду повторяться, да и вы наверное знаете). Скажу лишь, что такая блокировка солидно снизила нагрузку на сервер. И поисковики любят лезть куда не надо и другие товарищи. Впрочем, всё относительно.

  • Тёма

    А как вставить капчу-антиспам в стандартную (по умолчанию)форму авторизации

    • http://wmascat.blogspot.com/ Константин

      Вроде как в этом может помочь плагин WP-NOTCAPTCHA.

  • Тёма

    Спасибо, попробую.

  • http://webmasster.ru Максим

    Здравствуйте!
    Можно ли заказать у вас шаблон? или отдать на редактирование имеющийся?

    • http://wpcreate.ru Артем Петрусенко

      Ответил вам на почту.

  • http://referral-money.ru Николай

    Спасибо. Взял на вооружение.

  • http://www.ukrdomik.wordpress.com Юрий

    Здравствуйте!
    С интересом читаю Ваши статьи и нахожу их очень полезными для таких как я «чайников». Особенно я убедился в этом, читая Раздел «Добавления формы авторизации в виджет wordpress».

    Вы пишете:»Идем в админку сайта->Плагины->Добавить новый». Это, наверное, смешно, но я не нашел админки и тем более где эти плагины. Прошу помочь.
    С уважением!!!

    • http://wpcreate.ru Артем Петрусенко

      Здравствуйте.Вам необходимо перейти в раздел http://адрес_вашего_сайта/wp-admin/plugins.php В ближайшее время напишу подробный урок по добавлению новых плагинов, подписывайтесь на обновления,и не упустите ничего нового!

  • http://www.annaweb.msk.ru Аня

    Спасибо за совет. Обычная форма входа реально перегруженная. Я только не сразу поняла метод действия плагина Exec-PHP — что он обрабатывает обычный текстовый виджет. А я долго искала именно Exec-PHP среди виджетов)

  • http://школа-в-липовке.рф Надежда

    Здравствуйте Артем! Совсем недавно я начала делать свой сайт и во многом, конечно, не разбираюсь. Твои статьи для меня настоящий клад))) все так понятно написано, некоторые советы я уже использовала. Теперь о форме авторизации: здесь я не поняла код — это то, что выделено синим цветом? или что? И еще, можно я буду обращаться за помощью в некоторых вопросах, но только не в комментариях, а то так долго выходит?

    • http://wpcreate.ru Артем Петрусенко

      Здравствуйте Надежда, да код, этот тот который подсвечен синим.Я попрошу задавать вопросы в комментариях, когда появляется новый комментарий мне приходит уведомление на телефон, так что на вопросы на сайте я отвечаю очень быстро.А так да, конечно задавайте вопросы!

  • http://hardopen.ru abs

    Добрый день. плагин установил, «Добавления формы авторизации в виджет «, сделал ( в Right Sidebar). но не понял вот этого -» Открываем файл sidebar.php и находим нужное место для вставки» …. у меня имеется «sidebar-left.php и sidebar-right.php» просто sidebar.php» у меня нет. не пойму куда вставлять надо — «Добавления формы авторизации в виджет wordpress в файл sidebar.php». и вооще, не понятно, это два варианта вставки или один вариант с двумя действиями?!

    • http://wpcreate.ru Артем Петрусенко

      Добрый день. sidebar-left.php — это файл который отвечает за сайдбар в левой колонке, sidebar-right.php — соответственно в правой колонке, в зависимости в каком сайдбаре Вы хотите разместить виджет, в тот сайдбар нужно и вставлять код.Так как у меня всего один сайдбар, поэтому я и расписывал вариант установки общий.

  • http://www.moreotdiha.com.ua Людмила

    Здравствуйте! Я применила первый вариант получилось вот так :
    Авторизация
    В админку
    Новая статья
    Новая страница
    Выход
    Допустила ошибку

  • http://www.moreotdiha.com.ua Людмила

    Здравствуйте! Еще добавила код в файл sidebar.php и только тогда заработало Т е в моем случае нужен 1-й вариант и 2-й Это правильно?

  • http://archdialog.ru Sveta

    Артем, а можно от этого уйти и поставить виджет авторизации вконтакте и фейсбук? Если да, то куда их вставлять?

    • http://wpcreate.ru Артем Петрусенко

      Светлана, конечно можно.Добавляйте текстовый виджет, а в нем размещайте код авторизации вконтакте и фейсбука.

      • http://prodam-whiskas.ru/ Ольга

        Можно вклинюсь? А где взять этот код вконтакте и фейсбуке?

  • Антон

    Пользуюсь первым способом, установил плагин, галочку поставил, добавляю в виджет код и всё кривое получается… Объясните с цифрами вставлять код? Просто скопировать его и вставить?

  • http://uznaemmirvmeste.ru Brilthor

    Нашел более удобный на мой взгляд плагин авторизации, кому интересно посмотрите. Устанавливается очень просто, настройка тоже очень простая. Плагин русифицирован — Theme My Login

  • http://big-bigmoney.ru Залина

    Артем, здравствуйте! У меня появилась проблема с добавлением меню авторизации как с 1-ым способом, так и со 2-ым. В первом способе у меня получается столбик с перечислением возможностей, вот так:
    В админку
    Новая статья
    Новая страница
    Выход
    Во втором способе у меня все перекашивается и нет ни слова, одни знаки вопроса в зеленым ромбиках… Что делать не понимаю, пробовала даже совместить оба способа, но получалась ужасная каша… Помогите, пожалуйста!!

    • http://wpcreate.ru Артем Петрусенко

      Попробуйте воспользоваться плагином Theme My Login. Который посоветовали чуть выше.

      • http://big-bigmoney.ru Залина

        Заработало, вот только видок, конечно, не совсем то, что хотелось бы увидеть…

  • http://nogti-fenix.ru Анастасия

    день добрый! плагин установила, код в виджет вписала, панель такая появилась, но при нажатии на панели на слово регистрация, выдает 404 ошибку, что страница не существует и пишет «Запрашиваемый URL /wp-register.php не был найден на этом сервере.» ЧТО делать?

  • Esko

    «Sideways8 Custom Login and Registration» — я вот этот плагин скачал и он меня вроде как устраивает, но вот можно было бы еще перевести «Remember me» и «Forgot Password?» на русский и было бы вообще отлично. Возможно ли это как-то исправить?

  • женя

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

    • Esko

      Да не парьтесь, лучше просто плагин loginza установите — там авторизоваться можно, через любую соцсеть 🙂

  • http://adfdfdf.org tyh

  • http://biznessxema.org Melnik

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

    • http://wpcreate.ru Артем Петрусенко

      Ну wordpress не только для блогов используется. На вордпрессе еще иногда создают порталы.Вот для порталов и используется регистрация пользователей. Ну или есть несколько авторов на сайте, тогда что бы не из под одного аккаунта работать, то для каждого автора создается свой аккаунт. 😐

  • LauraVV

    Артем, выложите, пожалуйста, CSS к этому PHP коду, спасибо! 😉

  • Андрей

    Артем, я вставил указанный код в файл sidebar, форма появилась. Однако не работает кнопка «Ок», т.е. по ее нажатию ничего не происходит. Ссылка регистрации ищет файл wp-register.php, но его нет — вылетает с ошибкой.

    • http://dljzarabotka.ru/ Alex

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

  • http://www.vktz.ru Иван

    У меня не работает кнопка выхода выбивает 404 не знаю в чем дело

  • шелепова марина

    Скопировала шорт-код и вылезла совершенно другая форма авторизации, не та что на картинке.У вас более симпатичная!Функционал тот же,но выглядит ужасно!