Як вставити форму передплати FeedBurner у статті
Взагалі, якщо хтось не в курсі – цей сервіс дозволяє організувати автоматичне розсилання анонсів на ваші нові статті. І робиться це на основі RSS-стрічки. Вам лише один раз потрібно все налаштувати і надалі ваші передплатнику будуть отримувати нові матеріали на пошту, автоматично.
Як приклад подивіться на ту саму форму на моєму блозі. Одна розташована у сайтбарі, а інша під кожною статтею. Зовні форми різні, але функціонал вони однаковий. В обох формах відвідувач підписується на оновлення мого блогу.
Ну, а тепер від слів до дії.
Редагування форми передплати FeedBurner
Ще раз звертаю вашу увагу, використовуючи код цієї форми, ви повинні змінити моє посилання 1zaicev/CBHh на своє, у двох місцях. Також, форма укладена в блок
Форма в такому вигляді, без стилів, виглядатиме так:
Форма підписки без стилів
Вставка коду форми передплати у вихідний код сайту
Отже, як ми вже домовилися раніше, форму підписки вставлятимемо внизу кожної статті. Значить, потрібно буде працювати з вихідним кодом файлу, що відповідає за виведення статей. У WordPress цей файлsingle.php. Якщо у вас інша платформа, файл буде інший, але принцом вставки коду буде той самий. Тільки, врахуйте один момент, у нас у всіх більш менш різні шаблони і тому класи і стилі блоків будуть відрізнятися. На це потрібно буде звернути увагу під час пошуку місця для вставки форми.
Я покажу схему дій на прикладі свого шаблону, а ви діятимете за цією схемою, але з урахуванням особливостей вашої теми оформлення.
Для визначення необхідного розташування у вихідному коді я пропоную використовувати стандартні інструменти сучасних браузерів,що дозволяють переглядати вихідний код вибраного елемента.
Натискаємо у браузері праву кнопку мишки наприкінці статті та звертаємо увагу на клас блоку
Визначення місця вставки
У моєму випадку це клас class="entry" . Ось його мені і потрібно шукати у файлі single.php. Для цього я відкриваю адміністративну панель WP –«Зовнішній вигляд» -«Редактор» -«Один запис (single.php)». Використовуючи пошук CTRL+F, шукаю клас «entry».
Пошук у вихідному коді
Вставка у вихідний код
Все, форма вставлена, але їй ще потрібно надати стиль оформлення відповідно до дизайну вашого сайту.
Додавання стилів оформлення для форми передплати
Для того, щоб можна було надати формі потрібний дизайн, я додав до поля введення e-mail та кнопки класи оформлення. І тепер можна сміливо у файлі style.css додавати потрібні стилі для надання формі приємного вигляду.
Для того, щоб отримати форму ось такого виду:
Форма зі стилями
Я додав у файл style.css такі стилі:
Ви ж, звичайно, змінюючи ці стилі, зможете оформити форму відповідно до кольорової гами та дизайну вашого сайту. Підказки за стилями я зробив.
Тепер все готово, і ваші відвідувачі зможуть підписуватись на оновлення сайту. Якщо ви хочете прикрасити форму передплати, все це можна зробити, додавши фон і попрацювавши зі стилями. Як створити гарну форму передплати, я вже розповідав тут.
Загалом я також додав фонове зображення і трохи підправив стилі. В результаті ви можете спостерігати оновлену форму підписки під цією статтею.
Для цього я привласнив клас блоку ДІВ, в який міститься форма, додав фонове зображення та підправив стилі.