Подписка на новые записи – встраиваем плагином для Вордпресс-а, делаем красивой строку ввода e-mail и кнопки подписки

Подписка на новые записи — встраиваем плагином для Вордпресс-а, делаем красивой строку ввода e-mail и кнопки подпискиВ прошлой статье я закончил на том, что установил подписку на комментарии. Теперь приступим к подписке на посты, записи и статьи, да и просто рассылке для wordpress. В принципе, эта возможность и так встроена в большинстве тем – но реализована она через RSS-движок вордпресса (ну или как-то так). Ну а что делать таким людям, как я, которые RSS не используют в принципе? Остается подписка на обновления по e-mail. Придумывать тут особо нечего – бери, да ставь плагин рассылки. Выбор их не сильно велик, необходимость его – ну прямо так скажем – не первоочередная, поэтому я выбрал самый популярный из них – Subscribe2 8.4 (более 800 тысяч скачиваний), остальные даже и не рассматривая. Скачать его можно также и здесь.

Руссификация лежит здесь, пользоваться ею или нет – ваше дело, имейте ввиду, что она очень устарела, и даже то, что в ней переведено –  мягко говоря, не слишком отражает действительность. К примеру, названия кнопок, мне пришлось перевести самому, внеся изменения в файл class-s2-frontend.php. Установка – стандартная, после чего вытаскиваем виджет в нужное место на сайдбаре, в настройках изменяем шаблоны писем, которые отправляются подписчикам, и можно считать – готово. Плагин более-менее работает, но слегка убог хотя бы тем, что в отличие от Subscribe to Comments, не позволяет отписаться кликом на ссылке в приходящем письме – необходимо зайти на сайт, там вручную ввести e-mail, кликнуть на кнопке “Отписать”, и в пришедшем письме – уже нажать ссылку. Это связано с тем, что рассылка отправляется не адресно, а всем адресатам одновременно одним и тем же письмом. Пришлось в шаблоне письма добавлять строчку с описанием отписки.

Также мне очень не нравился внешний вид появившегося на сайдбаре виджета. Плагин этот встраивает кнопки подписки и отписки в своем стандартном стиле. А что нам делать, если мы хотим поменять эти кнопки на кнопки, аналогичные недавно встроенным для отправки постов? Да и кнопка подписки на комментарии без личного комментирования – тоже не дает покоя… Напомню, как она выглядела: Получившаяся подписка на комментарииКак оказывается, нет ничего проще. Первое, что необходимо – определить, какой код ее выводит. Берем оперу или хром, открываем страницу, щелкаем правой кнопкой и выбираем пункт в выпадающем меню “Проинспектировать элемент”. Запускается Opera Dragonfly (это в случае с оперой), смотрим ее код:

Ага. Вот это нам и надо. Теперь тоже самое проделываем для кнопки подписки на рассылку. Видим следующее:

Что из этого нам интересно? Во-первых два используемых класса:

и

А во-вторых, строчка

Она как раз определяет интересующий нас тег, выводящий эту кнопку. Вспоминаем, где в файле style.cssмы рисовали наши красивые кнопки. Открываем его, ищем это место. Напомню, код для обычной кнопки начинался с

Для кнопки, когда на нее наведен курсор – была приставка :hover, а когда шло нажатие – :active. И теперь, просто на строчку выше, чем

Вводим:

Это означает то, что если у нас в документе встретится class=subscribe или class=solo-subscribe-to-comments, то для всех тегов input с типом submit, лежащих внутри любых тегов (не важно – p или div) с этим классом будет использован прописанный ниже этих строчек стиль. Аналогичные строчки, но с приставками наведения курсора :hover, и нажатия :active вписываем в нужные места, где описаны стили наведенных кнопок и нажатых кнопок нашего style.css. Чтобы получилось следующее:

и

Приведу совсем окончательный код, который у меня получился (под спойлером):

Спойлер

[свернуть]

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

вставив его над кодом

чтобы он менял предыдущий стиль, отвечающий за саму кнопку. Теперь поменяем форму ввода e-mail. Аналогично, смотрим в драгонфлае, кто у нас за нее отвечает. Оказывается, это

Вписываем в наш style.css следующий код:

Здесь мы использовали для subscribe – класс (определяется точкой перед названием, а для solo-subscribe-email – id, что определяется решеткой. В принципе, тоже можно было воспользоваться классом, но если уж у нас есть ID – то почему бы и нет.) Вуаля. Домашнее задание – сделать тоже самое в комментариях, в полях ввода имени, е-мэйла и URL 🙂

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

было:

Изначальная версия подписки на новые записи

стало:

Форма подписки на новости

На этом я закончу возиться с кнопками и формами ввода. А в следующий раз я буду изучать счетчики скачиваний и различные download manager-ы.

1
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
4 комментария

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Subscribe without commenting

QR Code Business Card