В этой статье, я Вам покажу процесс создания красивой «Регистрации» для WordPress в виде Fancybox. Как вы увидите, этот процесс достаточно прост.
Шаг 1. Разметки
Во-первых, давайте разместим нашу кнопку в верхней части страницы.
<div id="registration"> <a class="show register-button" href="#register-form">Регистрация</a> </div>
Обратите внимание, что в реестре кнопку HREF (#register-form) токой же идентификатор, как и в форме. Мы также с помощью класса «.show» будем вызывать FancyBox и JQuery.
Теперь давайте создадим разметку. Открываем header.php и вставляем этот код в любом месте, где вы хотите.
<div style="display:none1"> <!-- Registration --> <div id="register-form"> <div> <h1>Регистрация</h1> <span>Зарегистрируйтесь!</span> </div> <form action="" method="post"> <input type="text" name="" value="Логин" id=""class="input"/> <input type="text" name="" value="E-Mail" id="" class="input"/> <input type="submit" value="Регистрация" id="register" /> <hr /> <p class="statement">Код отправится на Ваш e-mail.</p> </form> </div> </div><!-- /Registration -->
Обратите внимание, что я использую display:none, чтобы скрыть форму на начальном этапе.
Шаг 2. CSS
Вставляете следующий код в Вашу таблицу стилей
div#register-form {
width: 400px;
overflow: hidden;
height: 250px;
position: relative;
background: #f9f9f9 url(images/secure.png) no-repeat 260px 40px;
font-family: Helvetica Neue, Helvetica, Arial !important;
}
div#register-form input[type="text"] {
display: block;
border: 1px solid #ccc;
margin: 5px 20px;
padding: 9px 4px;
-moz-border-radius: 4px;
-webkit-border-radius:4px;
width: 200px;
font-family: Helvetica Neue, Helvetica, Arial !important;
}
div#register-form input[type="text"]:hover {
border-color: #b1b1b1;
}
div#register-form input[type="text"]:focus {
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
}
div#register-form input[type="submit"]#register {
clear: both;
cursor: pointer;
height: 31px;
overflow: hidden;
position: relative;
left:295px;
top:42px;
width:92px;
}
div#register-form input[type="submit"]#register:hover {
background-position: 0 -32px;
}
div#register-form span {
display: block;
margin-bottom: 22px;
}
div#register-form div.title {margin-left:15px}
div#register-form div.title h1,
div#register-form div.title span {text-shadow:1px 1px 0px #fff}
div#register-form div.title h1 {
margin:7px 0;
}
p.statement {
position:absolute;
bottom:-2px;
left:10px;
font-size:.9em;
color:#6d6d6d;
text-shadow:1px 1px 0px #fff;
}
Шаг 3. JQuery
Во-первых, мы должны включить JQuery в WordPress. Для этого,
мы поставим следующий фрагмент кода перед тегом <head> в header.php
файл.
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
Скачайте Fancybox и поместите его в папку WordPress.
Потом откройте файл footer.php и перед тегом </ BODY> вставите:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>
/includes/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<!-- Javascript -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>
/includes/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>
/includes/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
А теперь, давайте вызывать функцию fancybox , и перед тегом закрытия</ BODY>.
jQuery(document).ready(function() {
jQuery(".show").fancybox({
'titleShow' : 'false',
'transitionIn' : 'fade',
'transitionOut' : 'fade'
});
});
Все и последний шаг, это нам все нужно прикрепить к WordPress, чем мы будем
заниматься в следующем пункте.
Шаг 4. WordPress
Теперь нам нужно только вставить два фрагмента кода.
<?php echo site_url('wp-login.php?action=register', 'login_post') ?>
<?php do_action('register_form'); ?>
В результате код выйдет следующий:
<div style="display:none"> <!-- Registration -->
<div id="register-form">
<div>
<h1>Регистрация</h1>
<span>Зарегистрируйтесь!</span>
</div>
<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
<input type="text" name="user_login" value="Имя" id="user_login" class="input"/>
<input type="text" name="user_email" value="E-Mail" id="user_email" class="input" />
<?php do_action('register_form'); ?>
<input type="submit" value="Регистрация" id="register" />
<hr />
<p class="statement">Код отправится на Ваш e-mail.</p>
</form>
</div>
</div><!-- /Registration -->
Обратите внимание, важно , чтобы user_login как имя и ID в вводе текста,
были записаны правильно. В противном случае не будет работать.
Вот, мы сделали!
Нам удалось построить «Регистрация Форма» для наших пользователей. Что вы думаете о ней?
ВСЕ ДЛЯ НОВИЧКА
Мой блог находят по следующим фразам
- скроллирование меню для джумлы
- background:-moz-linear-gradient
- форма регистрации для wordpress
- Rejected User Agents
- wp site_url
- удалить advanced-cache.php
Follow Us
Twitter
Youtube
RSS
