Развитие и продвижение в интернете        22 сентября 2018        144         0

Красивая форма подписки для WordPress

Красивая форма подписки для WordPressВ этой статье мы подробно разберём, как сделать более привлекательной стандартную форму подписки Feed Burner для WordPress. Разбирать будем два варианта: первый  — это красивая форма подписки для WordPress в сайдбаре, и второй — горизонтальная форма подписки в каждой статье блога на WordPress.

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

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

Вставляем форму подписки в сайдбар


Итак, красивая форма подписки для WordPress в сайдбар. Регистрацию и активацию в сервисе Feed Burner мы пропустим, будем надеяться, что вы там уже зарегистрированы и имеете свой фид. Если это не так, зарегистрируйтесь и получите уникальный адрес фида. В нашем случае, вам даже не понадобится код, который предлагает сервис, а нужно только название фида.

Название — это окончание вашей ссылки на фид, которое вам предоставляют при регистрации.

Где посмотреть название своего фида

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

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

Для этого нам понадобится фото редактор, я рекомендую Adobe Photoshop. Будет достаточно самых базовых знаний программы. Если не знакомы с программой, можете пройти мои «Уроки Adobe Photoshop».

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

Мои формы подписки в блогеПосле инструкций, оставлю вам код, который вы скопируете и отредактируете на компьютере в обычном блокноте, или в удобном для вас редакторе.

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

Вставляем свой фид в код формы

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

Как найти ссылку на изображение вордпресс

Ссылки вставляете в код, заменив соответствующие надписи.

Вставляем ссылки в код формы

По умолчанию, размеры картинок таковы: 260 Х 65 пикселей — размер основной картинки, и 200 Х 30 пикселей — размер кнопки. Соответственно, если вы хотите создать и вставить изображения с другими размерами, то поменяйте размеры в коде, иначе изображения будут некорректно отображаться.

Размеры картинок в коде формы подписки

После того, как вы проделали все вышеперечисленные операции, копируете отредактированный код, находите в админ панели раздел «внешний вид» — далее «виджеты», и добавляете в сайдбар виджет «HTML-код»

Добавляем виджет в WordPress

Затем открываете виджет, пишите заголовок и вставляете код, после чего сохраняете.

Добавляем код формы подписки в виджет

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

Меняем цвет формы подписки в коде

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

<form style="padding:3px;text-align:center;background-color: ЦВЕТ ФОНА" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ФИД', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<img style="width: 260px; height: 65px;" src="КАРТИНКА" />
<p><center><input id="src" style="width: 200px; background-color: #fff;" type="text" name="email" value="Введите ваш email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
</center></p><input type="hidden" value="ФИД" name="uri"/>
<input style="width: 200px; height: 30px; padding-bottom:0px;" type="image" src="КНОПКА" />
</form>

 

Как вставить форму подписки во все записи WordPress


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

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

Если будете использовать своё изображение, то размер должен быть 592 Х 191 пикселя, и сохраняйте в формате png с названием forma-fb

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

Скачать набор изображений можете по этой ссылке https://drive.google.com/file/ там есть исходники для Photoshop и уже готовые изображения. Исходники вы можете редактировать под себя в случае необходимости.

После того, как загрузили изображение, копируете код ниже и редактируете у себя на компьютере.

<!--Подписка на обновление по e-mail-->
<hr style="margin: 5px 0 3px 0;" /><div class="form_fb"><form style="border: 0; padding: 3px; text-align: left;" action="//feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"><input class="poleform" name="email" type="text" value="Введите Ваш e-mail" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /><input class="submitform" type="submit" value="Подписаться" />
<input name="uri" type="hidden" value="ФИД" />
<input name="loc" type="hidden" value="ru_RU" /></form></div>
<!--Подписка на обновление по e-mail-->

В этом коде нужно заменить слово ФИД на ваш фид в сервисе Feed Burner. На этом с этим кодом всё.

Вставляем фид в форму подписки в статьях

Далее у нас есть два варианта вставки кода. Мы можем воспользоваться специальным плагином, а можем вставить код вручную. Я сначала использовал плагин, но немного погодя, всё-таки решил вставить код в специальный файл single.php вручную. Если есть возможность сделать что-то без плагинов, то лучше это сделать, по крайней мере меня так учили, но выбор за вами. Я покажу оба варианта.

Итак, если используем плагин, то соответственно заходим в админ панель в раздел «плагины», «добавить новый» и вписываем название New Adman. Устанавливаем и активируем плагин.

Устанавливаем плагин New Adman

Через настройки заходим в плагин. Здесь нам нужно вставить код в соответствующее поле и внизу сохранить. На этом с плагином всё.

Вставляем код формы подписки в плагин

Теперь вариант без плагина. Нам нужно редактировать, а вернее вставить код в файл single.php. Я буду показывать на примере CPanel своего хостинга, но можно воспользоваться FTP клиентом, например FileZilla, принцип один.

Внимание! Перед редактированием файлов рекомендуется сделать копии!

Итак, в панели файлового менеджера нам нужно зайти в корень сайта и найти папку wp-content. Открываем папку и находим там папку с темами, в этой папке находим свою тему и открываем её. Далее находим файл отвечающий за вывод записей в блоге — single.php. Нам нужно в него вставить код, но прежде, нужно найти место. Давайте разберём, как это сделать.

Находим нужный файл в корне сайта

Переходим в любую запись на своём блоге и нажимаем правой кнопкой мыши в любом месте внизу страницы. Затем нажимаем в появившемся окошке «просмотреть код».

Смотрим код страницы в браузере

Теперь, наводя курсор справа на элементы кода, слева нам будет показываться элемент страницы. Таким образом мы находим место, куда будем вставлять код формы подписки. У меня код вставлен после этого элемента.

Определям положение элемента страницы в коде

Теперь, нам нужно вставить этот код. Для этого выделим файл single.php и нажимаем РЕДАКТИРОВАТЬ.

Редактируем файл single.php

Вставляем код и не забываем сохранить.

Сохраняем редактированный файл

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

Делаем копию файла на хостинге

Но в любом случае, чтобы проверить работает ли код, нам нужно добавить стили в файл style.css Он находиться в той же папке, что и предыдущий файл single.php

Код, который нужно вставить в стили, я привожу ниже. Копируете себе на компьютер и вставляете свою ссылку на картинку.

.form_fb {
background-repeat: no-repeat;
background-image: url("ВАША ССЫЛКА НА ИЗОБРАЖЕНИЕ");
margin: 7px 0px 0px 10px;
height: 197px;}

.poleform {
font: 17px Verdana,sans-serif;
width: 45%;
padding: 9px;
border-radius: 7px;
border: none;
background: none;
margin: 100px 20px;
color: #898888;}

.submitform {
font: 17px Verdana, sans-serif;
color:#ffffff;
padding: 12px 12px;
margin: 0 0 0 15px;
cursor: pointer;
border-color:#25A6FF;
border-radius: 7px;
background: linear-gradient(to top, #25A6FF 0%, #1c80c4 36%, #5DBAFF 100%);
}

.submitform:hover {
font: 17px Verdana, sans-serif;
color:#ffffff;
padding: 12px 12px;
margin: 0 0 0 15px;
cursor: pointer;
border-radius: 7px;
background: linear-gradient(to top, #5DBAFF 0%, #1c80c4 36%, #25A6FF 100%);
}

Вставляем ссылку в стили

Затем этот код, точно таким же образом вставляете в самый низ файла style.css и сохраняете. По идее всё должно получится. Пробуйте. Не бойтесь.

Надеюсь статья «Красивая форма подписки для WordPress» была вам полезна. Пишите в комментариях, делитесь друзьями в соцсетях, подписывайтесь на обновления. Ваша обратная связь очень помогает в развитии блога, и главное — даёт мотивацию улучшать контент. Успехов и процветания вам! С ув. Руслан Ошаров

Красивая форма подписки для WordPress обновлено: сентября 30, 2018 автором: Руслан Ошаров


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *