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

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

Содержание статьи:

• Как добавить форму подписки на WordPress блог

• Настройка внешнего вида формы подписки на блоге

• Красивая форма подписки feedburner для WordPress с помощью css

Как добавить код формы подписки на блог WordPress

Напомню, что код необходимо сгенерировать в сервисе Feedburner по адресу feedburner.google.com. Откройте вкладку «Публикуй», перейдите в «Подписки по электронной почте» — «Subscription Management» и выберите русский язык в поле «Languages». После чего, скопируйте код из формы ниже

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

1. Зайдите в админку блога и откройте в раздел «Внешний вид» — «Виджеты», отыщите в списке виджет «Текст» (Произвольный текст или HTML-код) и нажмите «Добавить».
2. В Заголовок впишите «форма подписки», чтобы не запутаться самим. В поле ниже вставьте скопированный ранее код. Сохраните.
   
3. Установите данный виджет первым в списке. В разных версиях WordPress это делается перетаскиванием или задать порядковый номер при редактировании виджета.

Настройка внешнего вида формы подписки от FeedBurner для WordPress блога

После того, как вы вставили стандартный код в  Wordpress, его нужно доработать, русифицировать.

1. Удалите ссылку на фидбернер:

   Delivered by FeedBurner

2. Слово «Subscribe» замените на «Подписаться». Используйте поиск для удобства отыскивания этих фраз.
3. Фразу «Enter your email address» замените на «Введите ваш электронный адрес»
4. Желательно добавить заголовок «Подпишитесь на рассылку новостей блога».

В результате должно получиться что-то вроде этого:

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

Красивая форма подписки на блог с помощью css

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

Для всех вариантов форм я немного подредактировала html-код. Смотрите внимательно, что добавилось. Код привожу:

1
2
3
4
5
6
7

<form id="subscribe" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow">
<div>Подпишитесь на новости блога</div>
 
Ваш e-mail: <input style="width: 140px;" name="email" type="text" />
 
<input name="uri" type="hidden" value="pro-wordpress" /><input name="loc" type="hidden" value="ru_RU" /> <input type="submit" value="Подписаться" />
</form>

Форма подписки с фоновым рисунком и закругленными краями.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#subscribe {
 font-size: 13px; /*размер шрифта для ваш email*/
 background: url("widget.jpg") repeat-x scroll center bottom #EAEEF1; /*фоновая картинка*/
 border: 1px solid #CCCCCC; /*толщина и цвет границ формы. можно пунктиром - dashed или двойные - double*/
 border-radius: 7px; /*закругленные края формы*/
 color: #455F42; /*цвет текста формы*/
 font-family: arial;
 list-style-type: none;
 margin: 0 0 10px;
 padding: 5px 3px;
 text-align: center;
}
#subscribe div {
 font-size: 18px;
 margin: 0 0 13px; /*нижний отступ для заголовка формы*/
}
#subscribe p {
 margin: 0 0 20px;
}
#subscribe input {
 border: 1px solid #577753;
 color: #577753;
 padding: 2px;
}

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

Форма подписки с пунктирными краями и заливкой кнопки.

Аналогично для данного варианта формы нужно скопировать в ваш стилевой файл такой вот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

#subscribe {
 background: none repeat scroll 0 0 #EFEFEF; /*цвет фона формы*/
 border: 4px dashed #8A0808;
 color: #6B0000; /*цвет текста формы*/
 font-family: arial;
 list-style-type: none;
 margin: 0 0 10px;
 padding: 8px; /*внутренние отступы формы*/
 text-align: center; /*выравнивание по центру*/
 font-size: 13px;
}
#subscribe div {
 font-size: 18px; /*размер текста для заголовка формы*/
 margin: 0 0 13px;
}
#subscribe p {
 margin: 0 0 15px;
}
#subscribe input {
 border: 1px solid #6B0000; /*толщина и цвет границ поля email*/
 color: #6B0000;
 padding: 2px;
}
#subscribe input[type="submit"] {
 background: none repeat scroll 0 0 #6B0000; /*цвет фона кнопки отправить*/
 border: 0 none;
 border-radius: 7px; /*закругление краев кнопки отправить*/
 color: #FFFFFF; /*цвет текста кнопки отправить*/
 padding: 5px 10px;
}

Надеюсь, что данная статья помогла вам оформить форму подписки так, как вы хотели. Если что-нибудь не получилось, напишите в комментариях, постараюсь дать вам дельный совет.