>
Главная » WordPress » Как создать форму подписки на блоге или на сайте WordPress
    РейтингРейтингРейтингРейтингРейтинг

Форма подписки на блоге или на сайте WordPress

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

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

Почему же мы будем использовать именно фидбернер для настройки RSS ленты и подписки на блог? Для этих целей в WordPress есть стандартный инструмент, но без Feedburner'а нам не обойтись, т.к. он имеет следующие преимущества:

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

Заходим в сервис Фидбернер по ссылке http://feedburner.google.com/. По умолчанию он откроется на английском, поэтому сразу же смените язык на «русский», нажав «Languages» в правом верхнем углу. Далее пройдите регистрацию. Кроме адреса фида, у вас должно быть готово изображение, которое и будет показываться в качестве подписки.

ВНИМАНИЕ: Перед началом работы с добавлением кода, сделайте резервную копию базы данных. Некоторые элементы на вашей странице могут выйти из потока и потом будут проблемы. 

Заходим в панель администратора — Внешний вид — редактор. Нас интересует файл single.php, найдите его, он должен у вас быть. Этот файл отвечает на вывод записи. Теперь определитесь, куда вы хотите вставить форму подписки...сразу после статьи или в самом конце после комментариев. 

<div id="feed7">
<h3>Подпишись на обновления блога!</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"><input class="subscribe7" name="email" type="text" value="Введите свой e-mail:" /> <button class="button7" type="submit">Получать новости почтой</button> <input name="uri" type="hidden" value="profwebsit" /> <input name="loc" type="hidden" value="en_US" /></form></div>

Полностью вникать в смысл не нужно, данная запись стоит у всех, кто пользуется feedburner. Надпись «Подпишись на обновления блога!», можете оставить или поменять на свою. Далее, в строке http://feedburner.google.com/fb/a/mailverify?uri='profwebsit' вы должны УБРАТЬ название моего фида (profwebsit) и заменить его на название ВАШЕГО фида.

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

Поле с вставкой адреса почты называется class="subscribe7". Кнопка с надписью «Получать новости почтой» называется class="button7". Данные названия я придумал сам, если они вас не устраивают, можете поменять на свои. Эти же названия будут использоваться в дальнейшем в файле со стилями. Если будете менять их изначально в файле single.php, не забудьте их поменять в style.css.

С этим файлом покончено, код мы вставили. Можете обновить страницу и посмотреть на результат. Перед глазами покажется голая и не красивая форма подписки. Теперь время заняться ее красотой. Вот тут и пригодится заготовленное ранее изображение и ваша фантазия. Там же, в редакторе, переходим в файл со стилями ( style.css ). Спускаемся в самый низ и вставляет туда вот такой код.

#feed7 { 
background:url("http://http://profwebsit.ru/wp-content/uploads/2015/10/rss_bg.png") no-repeat;
height:308px;
width:653px;
}
#feed7 h3 { 
color:#ffffff;
position:relative; left:300px; top:35px; width:250px;
color:#ffffff;
font-size:27px;
font-weight:bold;
}
.subscribe7{
border-radius:5px;
font-size:15px;
height:25px;
margin-left:240px;
margin-top:90px;
}
.button7{
background:#fff;
border:1px solid;
height:30px;
font-size:15px;
position:relative; left:0; top:0;
}

Моя картинка была загружена, как обычный файл и лежит по адресу http://http://profwebsit.ru/wp-content/uploads/2015/10/rss_bg.png. Вы загружаете свое изображение и меняете в коде на свой адрес. В коде были заданы свойства для самого изображение, формы подписки и кнопки нажатия. Можете оставить как есть или изменить на свои цифры. Шаблон я показал, изменить уже можно как угодно, все зависит от вашей фантазии.

width:653px; — ширина изображения 653 пикселя.
height:308px; — высота изображения 308 пикселей.

В итоге у вас должна получиться вот такая форма подписки.

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

css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!