Главная › Новости

Форма регистрации на сайте WordPress без плагина

Опубликовано: 04.06.2018

Виджет авторизации для сайта на WordPress

Самописная форма регистрации на сайте WordPress пригодится многим веб-мастерам. Как вам известно, эта CMS предлагает для таких целей встроенный виджет регистрации wordpress , который всегда и везде не только одинаково выглядит, но и имеет несколько встроенных ссылок, которые, в принципе, никому не нужны.

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

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

Урок 14# Как сделать форму для регистрации у вас на сайте Вордпрес(Wordpress).

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

Морока, в общем. Да и выглядит страница авторизации некрасиво, хотя я в своей статье Работа плагина BM Custom Login писал, как можно улучшить ее юзабилити.

Впрочем, всем известно, что плагины нагружают блог, увеличивают количество запросов к базе данных, ets… Поэтому предлагаю обойтись сегодня без плагинов – будем работать с кодом.

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

Разница чувствуется, не так ли? Так вот, чтобы у вас появилась такая же форма регистрации wordpress , просто вставьте код, который вы видите ниже, в текстовый виджет сайдбара, ну или в то место основного шаблона index.php вашей темы, где вы хотите видеть эту форму.

Кнопки соцсетей я добавил другим виджетом, и к форме регистрации они отношения не имеют. Хотя потом я перенес этот код в код формы регистрации. Вот он:

<?php // ======================================================== // User Login Form // ======================================================== function serpentsoft_create_login($just_login = false) { global $user_ID, $user_identity, $user_level; if($user_ID): if($just_login == false): ?> <div id="logged-in"> <p class="welcome"><?php _e('Добро пожаловать', 'serpentsoft'); ?><strong><?php echo $user_identity; ?></strong> .</p> <span class="avatar-container"><?php echo get_avatar($user_ID, $size = '65'); ?></span> <ul class="icons-ul"> <li><i class="icon-li icon-caret-right"></i><a href="<?php echo esc_url( home_url('/') ); ?>wp-admin/"><?php _e('Управление', 'serpentsoft'); ?></a></li> <li><i class="icon-li icon-caret-right"></i><a href="<?php echo esc_url( home_url('/') ); ?>wp-admin/profile.php"><?php _e('Ваш профиль', 'serpentsoft'); ?></a></li> <li><i class="icon-li icon-caret-right"></i><a href="<?php echo esc_url( wp_logout_url( get_permalink() ) ); ?>"><?php _e('Выйти', 'serpentsoft'); ?></a></li> </ul> <ul class="author-personal-info social-networks clearfix"> <?php serpentsoft_login_user_social_icons_list($user_ID); ?> </ul> </div> <?php endif; // Just Login else: // else UserID ?> <div id="frmLogin"> <form action="<?php echo esc_url( home_url('/') ); ?>wp-login.php" method="post" class="login-form"> <!-- UserName Input --> <div class="input-prepend input-block-level"> <span class="add-on"><i class="icon-envelope"></i></span> <input id="log" name="log" class="span10" type="text" placeholder="User Name" required="required" value="<?php _e('Имя пользователя', 'serpentsoft'); ?>" onfocus="if(this.value == '<?php _e('UserName', 'serpentsoft'); ?>') { this.value = ''; }" onblur="if(this.value == '') { this.value = '<?php _e('UserName', 'serpentsoft'); ?>'; }" size="33" /> </div> <!-- Password Input --> <div class="input-prepend input-block-level"> <span class="add-on"><i class="icon-key"></i></span> <input id="pwd" name="pwd" class="span10" type="password" placeholder="Password" required="required" value="<?php _e('Пароль', 'serpentsoft'); ?>" onfocus="if(this.value == '<?php _e('Password', 'serpentsoft'); ?>') { this.value = ''; }" onblur="if(this.value == '') { this.value = '<?php _e('Password', 'serpentsoft'); ?>'; }" size="33" /> </div> <button type="submit" name="submit" class="btn-theme" value="<?php _e('Log in', 'serpentsoft'); ?>"><?php _e('Войти', 'serpentsoft'); ?></button> <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" /> <label class="checkbox" for="rememberme"> <input name="rememberme" id="rememberme" type="checkbox" /><?php _e('Запомнить меня', 'serpentsoft'); ?> </label> </form> <ul class="login-lost-pass icons-ul"> <?php if(get_option('users_can_register')) : wp_register('<li><i class="icon-li icon-circle"></i>', '</li>', true); endif; ?> <li><i class="icon-li icon-circle"></i><a href="<?php echo esc_url( home_url('/') ); ?>wp-login.php?action=lostpassword"><?php _e('Забыли пароль?', 'serpentsoft'); ?></a></li> </ul> </div> <?php endif; // UserID ?>

Есть еще одно решение, чтобы самописная регистрация в wordpress появилась на страницах вашего блога – оно намного проще в смысле количества строчек php кода. Вот оно:

<div> <?php global $user_ID, $user_identity; get_currentuserinfo(); if (!$user_ID): ?> <form name="loginform" id="autoriz" action="<?php echo get_settings('siteurl'); ?>/wp-login.php" method="post"> <div class="left"> <input type="text" name="log" placeholder="Логин" value="" id="login" /> </div> <div> <input type="password" name="pwd" placeholder="Пароль" value="" id="password" /> <input type="submit" name="submit" value="Войти" id="enter" /><br/> </div> <div> <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" /> <a href="<?php bloginfo('wpurl'); ?>/wp-login.php?action=lostpassword">Забыли пароль?</a> <a href="<?php bloginfo('wpurl'); ?>/wp-login.php?action=register">Регистрация</a> </div> </form> <?php else: ?> <h5 class="smile">Добро пожаловать, <?php echo $user_identity; ?>.</h5> <?php endif; ?> <?php if (current_user_can('level_10')){ ?><br/> <div class="left"> <a href="<?php bloginfo('url'); ?>/wp-admin/">Администрирование</a> </div> <div class="right" style="text-align:right"> <?php wp_loginout(); ?> </div> <?php } ?> </div>

Этот виджет выглядит вот так:

Даже без применения стилей css виджет выглядит очень симпатично – строго и функционально, ничего лишнего. Стили вы сможете добавить сами – я специально не проставлял классы и id для div-ов кода.

А если вы все-таки хотите установить плагин регистрация вордпресс , то я вам советую перечитать еще раз вот эту статью — Регистрация пользователей в WordPress . Пользуйтесь на здоровье, и пусть у вас все получится! До встреч!