WordPress форма обратной связи без плагинов.

Приветствую вас уважаемые вебмастера выбравшие движок WordPress, сегодня на блоге WebMasterMaksim.ru я вам расскажу как создать форму обратной связи без применения плагинов.

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

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

Google даже в панели инструментов вебмастера дает оценку эффективности вашей интернет-площадки, то есть показывает скорость загрузки по сравнению со всеми сайтами интернета, так-же этой поисковой системой предложен свой инструмент Page Speed по оптимизации скорости, который устанавливается в плагин Firebug для FireFox.

WordPress форма обратной связи без плагинов
WordPress форма обратной связи без плагинов

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

Итак, создаем форму обратной связи в WordPress без плагинов.

Создаем форму обратной связи в WordPress без плагинов.


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

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

[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(‘Читать дальше &#8594;’); ?—>
<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’)); ?>[/php]

Но чтобы шаблон не поплыл я контейнеры css оставил, у всех они могут отличаться у меня они выглядят так:

[php]
<div id="content">
<div id="column">
[/php]

Теперь в самое начало, для создания формы обратной связи нужно вставить код:

[php]<!—?php /* Template Name: Форма обратной связи */ ?—>[/php]

Сразу после этого кода нужно вставить другой код:

[php]<?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;
}

} ?>
[/php]

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

[php] <?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 } ?>[/php]

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

Для этого как вы знаете в админке WordPress нужно пройти страницы > добавить новую, здесь все как обычно заполняем заголовок, и вот самое главное с правой стороны есть поле атрибуты страницы:

Страница формы обратной связи
Страница формы обратной связи

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

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

Вот кстати стили которые я включил в код, теперь их нужно прописать в вашем файле style.css ну и соответственно задать в них нужные парамметры.

[php].soodhcenie{} /* Это внешний вид сообщения об благополучной отправке*/
.error{} /* вид вывода ошибок */
.contactform ul, .contactform li {} /*А вот это уже внешний вид самой формы */[/php]

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

1 Звезда ХЕРНЯ!2 Звезды ЧИТАЛ И СПАЛ3 Звезды НУ МОЖНО ПОЧИТАТЬ4 Звезды НРАВИТСЯ!5 Звезд КРУТО! (1 оценок, среднее: 5,00 из 5)
Загрузка...