WordPress форма обратной связи без плагинов.
Приветствую вас уважаемые вебмастера выбравшие движок WordPress, сегодня на блоге WebMasterMaksim.ru я вам расскажу как создать форму обратной связи без применения плагинов.
Все знают что каждый плагин создает запросы к базе данных, в результате чего падает скорость загрузки вашего сайта, и создается нагрузка на сервер, а если у вас установлено много плагинов, то это очень плохая для вас ситуация.
Просто в настоящее время поисковые системы уделяют очень большое внимание скорости загрузки сайта поэтому нужно стремиться максимально ускорить свой проект, тормозные сайты не пройдут в топ 10 поисковой выдачи.
Google даже в панели инструментов вебмастера дает оценку эффективности вашей интернет-площадки, то есть показывает скорость загрузки по сравнению со всеми сайтами интернета, так-же этой поисковой системой предложен свой инструмент Page Speed по оптимизации скорости, который устанавливается в плагин Firebug для FireFox.
WordPress форма обратной связи без плагинов
Поэтому нужно стараться ограничить применение плагинов, благо в WordPress очень много можно сделать без них, туже форму обратной связи, но вообще без плагинов обойтись не получится, поэтому в обязательном порядке нужно кешировать все запросы к базе данных, не путайте с обыкновенным кэшированием в WordPress.
Итак, создаем форму обратной связи в WordPress без плагинов.
Создаем форму обратной связи в WordPress без плагинов.
Все очень просто, нам понадобиться файл вашей темы page.php, я скачал его себе на компьютер и открыл в блокноте на редактирование, для начала его нужно переименовать допустим в feedback.php.
В разных темах файл page.php может отличаться, но в основном все делается по аналогии, в этом файле нам нужно оставить вывод сайтбара, футера и шапки, остальное можно удалить, например вывод контента, вот что я убрал в своем шаблоне:
<!--?php if (have_posts()) : ?-->
<!--?php while (have_posts()) : the_post(); ?-->
<div id="post-<?php the_ID(); ?><br />" class="post">
<h1></h1>
<!--?php the_content('Читать дальше →'); ?-->
<div class="clear"></div>
</div>
<div id="post-<?php the_ID(); ?>" class="post">
<!--?php wp_link_pages(array('before' =--> '
<strong>Страницы:</strong> ', 'after' => '
', 'next_or_number' => 'number')); ?>
Но чтобы шаблон не поплыл я контейнеры css оставил, у всех они могут отличаться у меня они выглядят так:
<div id="content"> <div id="column">
Теперь в самое начало, для создания формы обратной связи нужно вставить код:
<!--?php /* Template Name: Форма обратной связи */ ?-->
Сразу после этого кода нужно вставить другой код:
<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Введите ваше имя.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
if(trim($_POST['email']) === '') {
$emailError = 'Введите e-mail адрес.';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'Вы ввели неправильный адрес.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
if(trim($_POST['comments']) === '') {
$commentError = 'Введите сообщение.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$subject = 'Сообщение с Блога от пользователя '.$name;
$body = "Имя: $name \n\nE-mail: $email \n\nСообщение: $comments";
$headers = 'От: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Ответить: ' . $email;
$headers = "Content-type: text/plain; charset=\"utf-8\"";
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
} ?>
Внимание! теперь в то место где убрали вывод контента, вставляем ниже приведенный код который отвечает за настройки формы обратной связи в WordPress.
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="thanks">
<p>Спасибо, ваше сообщение отправлено.</p>
</div>
<?php } else { ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">Извините, произошла ошибка.<p>
<?php } ?>
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<ul class="contactform">
<li>
<label for="contactName">Имя:</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>
</li>
<li>
<label for="email">E-mail</label><input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="required requiredField email" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>
</li>
<li>
<label for="commentsText">Сообщение:</label>
<textarea name="comments" id="commentsText" rows="20" cols="50" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>
</li>
<li>
<input type="submit">Отправить сообщение</input>
</li>
</ul>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
<?php } ?>
Все сохраняем наш файл и заканчиваем его на хостинг в вашу тему WordPress, теперь для вывода формы обратной связи нужно создать страницу.
Для этого как вы знаете в админке WordPress нужно пройти страницы > добавить новую, здесь все как обычно заполняем заголовок, и вот самое главное с правой стороны есть поле атрибуты страницы:
Страница формы обратной связи
Где из выпадающего списка в поле «шаблон» нужно выбрать «Форма обратной связи», помните наш первый код который мы добавили в файл, это он отвечает за эту функцию соединения формы со страницей WordPress.
Вот кстати стили которые я включил в код, теперь их нужно прописать в вашем файле style.css ну и соответственно задать в них нужные парамметры.
.soodhcenie{} /* Это внешний вид сообщения об благополучной отправке*/
.error{} /* вид вывода ошибок */
.contactform ul, .contactform li {} /*А вот это уже внешний вид самой формы */
Ну вот надеюсь у вас все получится, и несколько лишних запросов к базе данных вы устранили, и если вас заинтересовала эта тема читайте:
- Нет похожих статей.
| Нравиться статья? | Подпишись - нажми - опубликуй !!! | |
