Подписка по email через FeedBurner

Доброго времени суток всем! У меня сейчас добрый вечер.

Сегодня на блоге разместил и красиво оформил форму подписки по email от Google feedburner.

Для тех, кто только создает свой сайт на WordPress, опишу в этой статье что и как я сделал.

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

Код, который предлагает feedburner по умолчанию, создает такую форму:

Как прийти от базовой формы к более красивой мы сейчас и разберемся с вами.

Для начала у вас должна быть оформлена учетная запись feedburner.google.com и создан фид для вашего сайта. Вот фид моего блога http://feeds.feedburner.com/wordpress-life.

Теперь для получения кода формы зайдите на feedburner.google.com и перейдите в управление своим фидом. В моем случае я кликаю по названию фида “Жизнь с WordPress”.

Далее нужно перейти на закладку “Публикуй” и кликнуть по ссылке “Подписка по электронной почте”.

Ниже на этой странице вам будет предложен подобный код:

Отличаться ваш код от этого будет только значением в строке 5 value=”wordpress-life” – это название моего фида, у вас будет свое.

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

/wp-content/themes/ваш_шаблон/sidebar.php,

определитесь с местоположением и вставьте код формы от feedburner. После сохранения и обновления страницы сайта у вас должна появиться родная форма подписки feedburner (как на втором скриншоте в этой статье).

Элементарные изменения, которые сможет сделать и новичок – это удалить надпись “Delivered by FeedBurner”; перевести на русский язык “Enter your email address” (“Введите ваш email”) и “Subscribe” (“Подписаться”); убрать переносы строк (то, что заключено между тегами <p></p> – будет писаться с новой строки. Если удалить эти теги, то переноса строки не будет).

Для создания красивой формы нужны уже некоторые знания таблицы стилей CSS. Например, для поля email я задал класс class=”subscribe-field” и описал его свойства в файле /wp-content/themes/ваш_шаблон/style.css таким образом:

Аналогично для кнопки “Подписаться” был создан свой класс со своими свойствами.

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

Для примера, посмотрите исходный код поля для ввода адреса e-mail.

Видите в коде – onfocus и далее идет некий код, и onblur и далее код – это код на языке javascript, внедренный в разметку html. В коде прописано поведение поля email при получении фокуса и его потери. Т.е., когда вы кликните в поле, то надпись “Введите свой e-mail” исчезнет. Когда кликните в любом другом месте – поле потеряет фокус, и надпись “Введите свой e-mail” вновь появится (при условии, что вы ничего не ввели, иначе в поле останется ваш текст). Вот то, что так долго описывается на русском языке достаточно кратко реализовано на javascript.

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

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

Обязательно протестируйте мою форму подписки по e-mail! =)

Всем желаю побольше подписчиков и особенно подписчиц! =)