Приветствую всех читателей блога ИнетСоветы.ру! Сегодня я покажу, как создать страницу «Спасибо за первый комментарий». Если Вы оставляли свой комментарий на моем блоге, то наверняка видели такую страницу. Если нет, то прокомментируйте любую статью на блоге и увидите эту страницу.

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

1. Создать страницу с текстом благодарности за комментарий.
2. Настроить переадресацию после первого комментария на эту страницу.
3. Исключить страницу «Спасибо за комментарий» из меню.

Надеюсь Вы знаете и еще не забыли, как создать новую страницу. Если что, смотрите на эту картинку:

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

Переадресация после первого комментария с плагином и без

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

Начнем с плагина. Вам нужно установить плагин Comment Redirect by Yoast. Смотрите, как найти этот плагин:

Он будет в числе первых в списке найденных. Устанавливайте и активируйте его.

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

С плагином настройка редиректа после первого комментария занимает пару минут, но и с кодом не дольше.

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

Данный код добавляйте в самый конец файла перед строкой «?>»:

/* Код переадресации после первого комментария*/

function redirect_after_first_comment($url, $comment) {

$comment_count = get_comments(

array(

'author_email' => $comment->comment_author_email,

'count' => true

)

);

if ( $comment_count == 1 ) {

wp_redirect('https://inetsovety.ru/spasibo-za-kommentariy/'); /* Тут изменяете ссылку на свою */

exit();

}

return $url = get_comment_link();

}

add_filter( 'comment_post_redirect', 'redirect_after_first_comment', 5, 2);

/* Конец код переадресации после комментария*/

В строке wp_redirect(‘https://inetsovety.ru/spasibo-za-kommentariy/’); измените мою ссылку на свою, только одинарные кавычки не удалите случайно, а то шаблон перестанет работать.

С настройкой редиректа разобрались. Осталось исключить страницу «Спасибо за комментарий» из меню.

Как исключить страницу из меню на блоге WordPress

Многим придется использовать плагин Exclude Pages from Navigation, т.к. в не во всех шаблонах есть функционал позволяющий управлять  содержанием меню непосредственно в админке.

Как установить плагин Exclude Pages from Navigation я еще раз обьяснять не буду. Делаем по аналогии с плагином Коммент Редирект. После активации плагина, в меню редактирования страницей появится виджет Exclude Pages. Поставьте птичку, чтобы исключить страницу с меню:

А теперь инструкция для тех, кто старается использовать поменьше плагинов. Попробуем создать в Вашей теме меню и добавить в него только нужные нам страницы. В админке блога, зайдите «Внешний вид — Меню». И создайте новое меню.

Выберите страницы, которые хотите добавить в меню и нажмите на кнопку «добавить в меню». Они отобразятся справа в виджете «Структура меню». Здесь их можно поменять местами, перетащив выше или ниже. И выбрать в каких областях шаблона отображать это меню. После этого сохраняйте меню и проверяйте его работу. Если на сайте меню работает также, как и ранее, значит Вам повезло с шаблоном.

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

P.S. Поздравляю победителей конкурса «Активные комментаторы» за август 2014 года:

Сергей и Иван получают призы 150 руб. и 100 руб. соответственно. Спасибо за активное участие

Привет всем! В этом посте я расскажу, как создать форму обратной связи wordpress блога без плагина. Наверное, те у кого есть страница обратной связи на сайте, использовали для ее создания плагин Contact Form 7. Долгое время и у меня стоял этот плагин. С недавних пор, я решила заняться ускорением своего блога, заменяю какие возможно плагины кодами. Прошлый мой пост был посвящен созданию карты сайта без плагина. Кто не читал статью, прочтите. Принцип создания новой страницы-шаблона, который описан там, я буду сегодня использовать. Но так детально уже не буду разжевывать.

Форма обратной связи для wordpress сайта при помощи скрипта

Как и в случае, когда мы создавали шаблон страницы карты сайта, так и сейчас мы будем редактировать файл page.php. Заходите на хостинг и добирайтесь к папке с темой, последовательно открывая следующие папки public_html/wp-content/themes/

Скопированный на компьютер файл page.php переименуйте, оставив расширение файла php. Например, файл можно назвать formacontact.php. В этот файл мы добавим скрипт формы обратной связи.

Откройте переименованный файл и найдите в нем функцию <?php get_header (); ?>, будет она практически в самом начале. Ее нужно удалить, а на ее место вставить вот этот php скрипт формы обратной связи:

<?php

/*

Template Name: PageContact

*/

?>

 

<?php get_header();?>

 

<?php

 

 if(isset($_POST['submitted'])) {

    if(trim($_POST['contact_name']) === '') {

        $nameError = 'Вы не ввели имя';

        $hasError = true;

    } else {

        $name = trim($_POST['contact_name']);

    }

 

    if(trim($_POST['contact_email']) === '')  {

        $emailError = 'Введите e-mail';

        $hasError = true;

    } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$", trim($_POST['contact_email']))) {

        $emailError = 'Не корректный адрес.';

        $hasError = true;

    } else {

        $email = trim($_POST['contact_email']);

    }

 

    if(trim($_POST['contact_theme']) === '') {

        $themeError = 'Вы не ввели тему сообщения';

        $hasError = true;

    } else {

        $theme = trim($_POST['contact_theme']);

    }

 

    if(trim($_POST['contact_comments']) === '') {

        $commentError = 'Не введен текст сообщения';

        $hasError = true;

    } else {

        if(function_exists('stripslashes')) {

            $comments = stripslashes(trim($_POST['contact_comments']));

        } else {

            $comments = trim($_POST['contact_comments']);

        }

    }

 

    if(!isset($hasError)) {

        $emailTo = get_option('tz_email');

        if (!isset($emailTo) || ($emailTo == '') ){

            $emailTo = get_option('admin_email');

        }

        $subject = 'Сообщение с сайта от '.$name;

        $body = "Имя: $name nnE-mail: $email nnТема: $theme nnСообщение: $comments";

        $headers = 'From: '.$name.' <'.$email.'>' . "rn" . 'Reply-To: ' . $email;

        wp_mail($emailTo, $subject, $body, $headers);

        $emailSent = true;

    }

 

} ?>

Чтобы на странице отобразилась сама форма, после функции <?php the_content (); ?> добавим еще один код:

	<div id="form_contact">

                           <?php if(isset($emailSent) && $emailSent == true) { ?>

                                 <div class="contact_message">Ваше сообщение успешно отправлено!</div>

                           <?php } else { ?>

                                 <?php if(isset($hasError) || isset($captchaError)) { ?>

 

                                 <?php } ?>

 

                                 <form action="<?php the_permalink(); ?>" id="contactForm" method="post">

 

                                       <div class="contact_right_colum">

                                            <div class="contact_name">

                                                 <input type="text" placeholder="Ваше имя" name="contact_name" id="contact_name" value="<?php if(isset($_POST['contact_name'])) echo $_POST['contact_name'];?>" class="required requiredField" />

                                                 <?php if($nameError != '') { ?>

                                                       <div class="errors"><?=$nameError;?></div>

                                                 <?php } ?>

                                            </div>

                                            <div class="contact_email">

                                                 <input type="text" placeholder="Ваш email" name="contact_email" id="contact_email" value="<?php if(isset($_POST['contact_email']))  echo $_POST['contact_email'];?>" class="required requiredField email" />

                                                 <?php if($emailError != '') { ?>

                                                       <div class="errors"><?=$emailError;?></div>

                                                 <?php } ?>

                                            </div>

                                            <div class="contact_theme">

                                                 <input type="text" placeholder="Тема" name="contact_theme" id="contact_theme" value="<?php if(isset($_POST['contact_theme'])) echo $_POST['contact_theme'];?>" class="required requiredField" />

                                                 <?php if($themeError != '') { ?>

                                                       <div class="errors"><?=$themeError;?></div>

                                                 <?php } ?>

                                            </div>

                                       </div>

 

                                       <div class="contact_left_colum">

                                            <div class="contact_textarea">

                                                 <textarea placeholder="Введите текст сообщения" name="contact_comments" id="commentsText" rows="12" cols="56" class="required requiredField"><?php if(isset($_POST['contact_comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['contact_comments']); } else { echo $_POST['contact_comments']; } } ?></textarea>

                                                 <?php if($commentError != '') { ?>

                                                       <div class="errors"><?=$commentError;?></div>

                                                 <?php } ?>

                                            </div>

 

                                            <button type="contsubmit" class="contact_submit">Отправить сообщение</button>

                                            <input type="hidden" name="submitted" id="submitted" value="true" />

                                       </div>

                                 </form>

                           <?php } ?>

                      </div>

На этом создание формы обратной связи в файле formacontact.php завершено. Сохраняйте в нем изменения и копируйте на хостинг в папку с темой.

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

/*-------------------------------- контактная форма --------------------------------*/

 

#form_contact {

        position: relative;

        width: 100%;

	margin-top: 20px;

}

 

.contact_right_colum {

        float: right;

        width: 145px;

}

 

.contact_left_colum {

        float: left;

	width: -moz-calc(100% - 155px);

	width: -webkit-calc(100% - 155px);

	width: calc(100% - 155px);

}

 

.contact_name, .contact_email, .contact_theme, .contact_textarea { position: relative; }

 

.contact_name input[type="text"],

.contact_email input[type="text"],

.contact_theme input[type="text"] {

        position: relative;

	width: 120px;

        height: 30px;

        line-height: 30px;

	padding: 0 0 0 31px;

        margin: 0 0 20px;

        background: #F7F8FA url(images/name.png) no-repeat 3px 3px;

        border: none;

        border-radius: 5px;

        box-shadow: inset 0.5px 0.5px 3px #B7BDCB;

        font: normal 13px Arial, sans-serif;

        color: #151515;

}

.contact_email input[type="text"] { background: #F7F8FA url(images/email.png) no-repeat 3px 2px; }

.contact_theme input[type="text"] { background: #F7F8FA url(images/tema.png) no-repeat 2px 3px; }

 

.contact_textarea textarea {

        position: relative;

	width: -moz-calc(100% - 20px);

	width: -webkit-calc(100% - 20px);

	width: calc(100% - 20px);

        height: 116px;

        padding: 7px 10px;

	margin: 0 0 18px;

        background: #F7F8FA;

        border: none;

        border-radius: 5px;

        box-shadow: inset 0.5px 0.5px 3px #B7BDCB;

	font: normal 13px Arial, sans-serif;

        color: #151515;

}

 

.contact_name input[type="text"]:focus, .contact_email input[type="text"]:focus, .contact_theme input[type="text"]:focus, .contact_textarea textarea:focus, .contact_submit:focus {

        outline: none;

        box-shadow: 0 0 5px #B7BDCB;

}

 

.contact_submit {

	float: center;

	width: 220px;

	padding-top: 7px;

	padding-bottom: 4px;

	margin: 0 0 15px;

	background: #ADF1AD;

        border: none;

        border-radius: 4px;

	text-align: center;

	font-size: 16px;

	color: #4C4C4C;

	transition: background-color ease-in-out .15s;

	cursor: pointer;

}

.contact_submit:hover { background: #7AF07A; text-transform: uppercase; width: 240px;}

 

.contact_message {

        width: 100%;

        height: 22px;

        padding: 70px 0;

        text-align: center;

        font: normal 22px Arial, sans-serif;

        color: #1F1F1F;

}

 

.errors, .errorss {

	position: absolute;

	bottom: 2px;

	left: 10px;

	font: normal 12px Arial, sans-serif;

        color: red;

	z-index: 999;

}

На свой вкус Вы можете изменить цвет кнопки отправить. Найдите стили contact_submit, строчка background: #ADF1AD; отвечает за цвет фона. Ниже свойство contact_submit:hover задает фон при наведении на кнопку.

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

Последний шаг — создаем страницу контактов или редактируем текущую. В правой колонке найдите виджет «Атрибуты» и выберите в нем название только что созданной страницы контактов.

Как видите, получилась простая форма обратной связи для сайта без использования плагина. Капча тоже не нужна, т.к. в сам скрипт прописан таким образом, что не пропускает спам. Создав такую форму, Вы удалите еще два плагина contact form 7 и плагин, который создавал капчу к нему.

Плагин Contact Form 7

Дальше речь пойдет о том, как создать контактную форму для обратной связи. И в этом Вам поможет плагин Contact Form 7, с которым можно сгенерировать требуемую контактную форму.

Сначала скачайте и установите плагин контактной формы Contact Form 7. Установить его можно и непосредственно из панели администратора, найдя плагин по названию.

После успешной установки и активации, перейдем к настройкам контактной формы Contact Form 7.

Находим в админке WordPress страницу настроек плагина Contact Form 7. Нажмите на кнопку «Добавить новую»:

По умолчанию Вы увидите следующий вариант контактной формы:

Но здесь не хватает поля для капчи, чтобы письма Вам не посылал спам-робот. Добавим ее вручную. Для этого выберите из выпадающего списка — капчу.

Здесь можно ничего не менять. Нужно добавить к будущей контактной форме, код капчи.

После добавления кодов капчи, получится следующее:

Осталось вставить код вызова контактной формы на нужной странице. Скопируйте его в буфер обмена. Создайте новую страницу и назовите ее, например, «Контакты». Добавьте в текстовое поле, скопированный ранее код. Опубликуйте контактную страницу и проверьте, что получилось. Можете сами себе отправить тестовое письмо.

Вот так легко и просто создать форму обратной связи на своем блоге WordPress. В этом Вам поможет плагин для создания контактной формы Contact Form 7.

Если, у Вас что-то не получилось, посмотрите этот видеоролик, в котором рассказывается, как создать контактную форму на блоге.