Архив рубрики: Публикации

Создаем страницу с благодарностью за первый комментарий

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

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

  1. Создать страницу с текстом благодарности за комментарий.

  2. Настроить переадресацию после первого комментария на эту страницу.

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

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

Как создать страницу спасибо за комментарий

 

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

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

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

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

Как установить плагин Comment Redirect

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

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

Настройки переадресации на страницу в плагине Comment Redirect

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

Нам нужно добавить в файл 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 года:

Победители конкурса активные комментаторы в августе 2014

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



2014-09-01T11:38:32
Блог на WordPress

Форма обратной связи для сайта с плагином Contact Form 7 и без него

Привет всем! В этом посте я расскажу, как создать форму обратной связи 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. Нажмите на кнопку «Добавить новую»:

Плагин Contact Form 7 для WordPress

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

Создание контактной формы с помощью Contact Form 7

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

Защита от спама для Contact Form 7 WordPress

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

Порядок установки плагина Contact Form 7

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

Плагин контактной формы для WordPress

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

Как сделать страницу контактов на сайте

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

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