Custom Login логинпароль демо

7 мая 2020 Автор: Forexguru

Пользовательский логин / регистрация / пароль.
Автор: Джефф Старр • Обновлено 28 июля 2017 г..
Слишком много функций и деталей, чтобы объяснить их заранее, поэтому потратьте немного времени на ознакомление с рабочей демонстрацией, чтобы увидеть готовый продукт.
В меню.

А вот и живая демка:
Страница входа в WordPress по умолчанию.
Из коробки WordPress использует wp-login.php для входа в систему администратора, восстановления утерянных паролей и регистрации на сайте.

Каждое из этих действий выполняется на одной странице, обычно называемой страницей входа в WordPress..
Как видно здесь, страница входа показывает форму входа по умолчанию. Под формой находятся две ссылки «Зарегистрироваться» и «Забыли пароль?», Которые позволяют пользователям (да, вы уже догадались) зарегистрироваться и восстановить свой пароль..

Крутая вещь на странице входа в систему состоит в том, что страница не перезагружается при нажатии любой из этих ссылок. Вместо этого форма мгновенно меняется с логина на регистрацию или пароля на что угодно. Все три формы включены на страницу wp-login.php и скрыты / раскрыты по мере необходимости с помощью JavaScript.

Эта функция «на одной странице» является ключом к настройке нашей собственной формы входа / регистрации / пароля в другом месте нашей темы..
Перемещение формы входа / регистрации.
Хотя перемещать весь файл wp-login.php не рекомендуется, можно отображать формы входа / регистрации / пароля в любом месте вашей темы. Например, размещение форм в вашем sidebar.php упрощает регистрацию и вход пользователей из любой точки вашего сайта. Вы могли бы даже создать страницу WordPress для каждого события: страницы входа в систему, регистрации и восстановления пароля, которые настраиваются / оптимизируются по-настоящему уникальным способом..

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

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

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

Поэтому, если вы просто добавите эту вещь в свой файл sidebar.php, вы увидите форму входа в систему и три ссылки: вход в систему, регистрация и восстановление пароля. Две другие формы включены в разметку, но скрыты с помощью CSS (display: none;). Как есть, три ссылки ничего не сделают, потому что для работы им требуется JavaScript. Как только мы добавим jQuery, ссылки будут переключать три разные формы.
Внедрение и демонстрация.

Сначала давайте разберемся с использованием этого кода в вашей теме, а затем мы посмотрим демонстрацию, чтобы увидеть, как она работает..
Поместите пользовательский код входа в файл sidebar.php. Захватите код jQuery и включите его в файл footer.php.

Включите код CSS в файл style.css вашей темы..
..и сделано. Как только эти три элемента будут на месте, загрузите все на свой сервер и проверьте это. Вот демонстрация, показывающая этот код, используемый на пользовательской странице в цикле.
Обратите внимание, что здесь, на DigWP.com, регистрация отключена, поэтому формы не будут особенно полезны, кроме как для демонстрации работы вкладок и стиля форм.

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

Пользовательский логин / регистрация / пароль.
Автор: Джефф Старр • Обновлено 28 июля 2017 г..
Слишком много функций и деталей, чтобы объяснить их заранее, поэтому потратьте немного времени на ознакомление с рабочей демонстрацией, чтобы увидеть готовый продукт.
В меню.

А вот и живая демка:
Страница входа в WordPress по умолчанию.
Из коробки WordPress использует wp-login.php для входа в систему администратора, восстановления утерянных паролей и регистрации на сайте.

Каждое из этих действий выполняется на одной странице, обычно называемой страницей входа в WordPress..
Как видно здесь, страница входа показывает форму входа по умолчанию. Под формой находятся две ссылки «Зарегистрироваться» и «Забыли пароль?», Которые позволяют пользователям (да, вы уже догадались) зарегистрироваться и восстановить свой пароль..

Крутая вещь на странице входа в систему состоит в том, что страница не перезагружается при нажатии любой из этих ссылок. Вместо этого форма мгновенно меняется с логина на регистрацию или пароля на что угодно. Все три формы включены на страницу wp-login.php и скрыты / раскрыты по мере необходимости с помощью JavaScript.

Custom Login логинпароль демо

Эта функция «на одной странице» является ключом к настройке нашей собственной формы входа / регистрации / пароля в другом месте нашей темы..
Перемещение формы входа / регистрации.
Хотя перемещать весь файл wp-login.php не рекомендуется, можно отображать формы входа / регистрации / пароля в любом месте вашей темы. Например, размещение форм в вашем sidebar.php упрощает регистрацию и вход пользователей из любой точки вашего сайта. Вы могли бы даже создать страницу WordPress для каждого события: страницы входа в систему, регистрации и восстановления пароля, которые настраиваются / оптимизируются по-настоящему уникальным способом..

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

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

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

Поэтому, если вы просто добавите эту вещь в свой файл sidebar.php, вы увидите форму входа в систему и три ссылки: вход в систему, регистрация и восстановление пароля. Две другие формы включены в разметку, но скрыты с помощью CSS (display: none;). Как есть, три ссылки ничего не сделают, потому что для работы им требуется JavaScript. Как только мы добавим jQuery, ссылки будут переключать три разные формы.
Внедрение и демонстрация.

Сначала давайте разберемся с использованием этого кода в вашей теме, а затем мы посмотрим демонстрацию, чтобы увидеть, как она работает..
Поместите пользовательский код входа в файл sidebar.php. Захватите код jQuery и включите его в файл footer.php.

Включите код CSS в файл style.css вашей темы..
..и сделано. Как только эти три элемента будут на месте, загрузите все на свой сервер и проверьте это. Вот демонстрация, показывающая этот код, используемый на пользовательской странице в цикле.
Обратите внимание, что здесь, на DigWP.com, регистрация отключена, поэтому формы не будут особенно полезны, кроме как для демонстрации работы вкладок и стиля форм.

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

С этой реализацией, в основном, есть три вещи для настройки: jQuery, пользовательский код входа и CSS .
Как и в любом коде, существует бесчисленное множество способов изменить внешний вид и функциональность, поэтому, надеюсь, у вас есть что-то конкретное, и вы достаточно знакомы с дизайном, чтобы прыгать и настраивать вещи. Если нет, не беспокойтесь — вот несколько идей, которые помогут вам начать.
Настройка форм входа.
Как есть, пользовательские формы входа перенаправляются на текущую страницу. Чтобы перенаправить любую / все формы на другую страницу, найдите и измените следующую строку кода:

Есть три экземпляра этого скрытого поля ввода, которое WordPress использует для перенаправления. Значение возвращает текущий URL, поэтому необходимо изменить каждую форму для перенаправления в другое место..
Другая полезная модификация включает в себя настройку того, что видят вошедшие в систему пользователи. Показывать граватар и имя пользователя довольно аккуратно, но есть множество интересных трюков, которые помогут обеспечить бесперебойную работу пользователей..
Настройка jQuery.

JQuery, используемый для отображения / скрытия различных панелей входа в систему, на самом деле довольно простой и используется только для переключения состояний отображения. Я предполагаю, что есть способ настроить это, но он уже обрабатывает дополнительные пункты меню, так что, возможно, вы захотите изменить имена классов или оптимизировать скрипт или что-то еще.
Однако мне нравится смотреть на хороший кусок хорошо отформатированного jQuery, поэтому я еще больше побалую себя, включив весь фрагмент кода прямо здесь:
Возможно, немного сложновато, но прекрасно работает без редактирования;)

Custom Login логинпароль демо

Настройка CSS.
Просто ссылки.
Последний трюк: используйте этот код для отображения ссылок на страницу входа / регистрации WordPress по умолчанию:

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

Это позволяет вашим пользователям и посетителям легко входить / выходить из системы, регистрироваться на вашем сайте и восстанавливать пароли, не покидая своей текущей страницы. Код для входа в систему прекрасно работает как есть или легко преобразуется в меню входа со вкладкой, используя немного CSS и черту jQuery. Небо это предел, когда дело доходит до настройки.
Наконец, одна из замечательных особенностей WordPress заключается в том, что всегда есть несколько способов настройки. Так что, если вы видите способ улучшить код, пожалуйста, поделитесь с сообществом, оставив комментарий.

Спасибо!

Похожие статьи

Оставить комментарий

XHTML: Разрешенные теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>