Доброго времени суток всем! У меня сейчас добрый вечер.
Сегодня на блоге разместил и красиво оформил форму подписки по email от Google feedburner.
Для тех, кто только создает свой сайт на WordPress, опишу в этой статье что и как я сделал.
На данный момент форма подписки расположена у меня справа вверху страницы под кнопками социальных сетей. Не знаю долго ли она будет у меня именно там и именно в таком виде, поэтому оставлю здесь скриншот того, что получилось:
Код, который предлагает feedburner по умолчанию, создает такую форму:
Как прийти от базовой формы к более красивой мы сейчас и разберемся с вами.
Для начала у вас должна быть оформлена учетная запись feedburner.google.com и создан фид для вашего сайта. Вот фид моего блога http://feeds.feedburner.com/wordpress-life.
Теперь для получения кода формы зайдите на feedburner.google.com и перейдите в управление своим фидом. В моем случае я кликаю по названию фида “Жизнь с WordPress”.
Далее нужно перейти на закладку “Публикуй” и кликнуть по ссылке “Подписка по электронной почте”.
Ниже на этой странице вам будет предложен подобный код:
1 2 3 4 5 6 7 8 9 |
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="<a href="http://feedburner.google.com/fb/a/mailverify" data-mce-href="http://feedburner.google.com/fb/a/mailverify">http://feedburner.google.com/fb/a/mailverify</a>" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wordpress-life', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <p>Enter your email address:</p> <p><input type="text" style="width:140px" name="email"/></p> <input type="hidden" value="wordpress-life" name="uri"/> <input type="hidden" name="loc" value="ru_RU"/> <input type="submit" value="Subscribe" /> <p>Delivered by <a href="<a href="http://feedburner.google.com" data-mce-href="http://feedburner.google.com">http://feedburner.google.com</a>" target="_blank">FeedBurner</a></p></form> |
Отличаться ваш код от этого будет только значением в строке 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 таким образом:
1 2 3 4 5 6 7 8 9 10 11 |
.subscribe-field { width: 164px; padding: 4px 0 5px 10px; font: 12px Arial, Helvetica, sans-serif; color: #888; border: 1px solid #c8c6c4; vertical-align: inherit; border-radius: 3px; } |
Аналогично для кнопки “Подписаться” был создан свой класс со своими свойствами.
Вы можете посмотреть исходный код любого элемента и увидеть классы, их свойства и значения.
Для примера, посмотрите исходный код поля для ввода адреса e-mail.
1 2 3 4 5 6 |
<input class="subscribe-field" type="text" name="email" value="Введите свой e-mail" onfocus="if(this.value == 'Введите свой e-mail') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Введите свой e-mail'; }" /> |
Видите в коде – onfocus и далее идет некий код, и onblur и далее код – это код на языке javascript, внедренный в разметку html. В коде прописано поведение поля email при получении фокуса и его потери. Т.е., когда вы кликните в поле, то надпись “Введите свой e-mail” исчезнет. Когда кликните в любом другом месте – поле потеряет фокус, и надпись “Введите свой e-mail” вновь появится (при условии, что вы ничего не ввели, иначе в поле останется ваш текст). Вот то, что так долго описывается на русском языке достаточно кратко реализовано на javascript.
Вот основы, которые я хотел вам изложить. Далее пробуйте, задавайте вопросы. Уверен, что у вас все получится.
Касательно необходимости наличия такой формы на блоге – каждый решает для себя сам. Лично мне нравится именно email подписка на новые статьи и я люблю, когда на сайте присутствует такая возможность и форма для подписки.
Обязательно протестируйте мою форму подписки по e-mail! =)
Всем желаю побольше подписчиков и особенно подписчиц! =)