Фиксированный счетчик подписчиков для CMS WordPress

Вот на кого пользователи подпишутся, при идентичном качестве контента: на Васю с 3 000 000 подписчиков или на Колю с тремя сотнями.

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

Предлагаю вам создать счетчик со своими циферками — это может быть количество подписчиков в FeedBurner, ВКонтакте, Одноклассниках  и на любых других популярных площадках.

 

Допустим, у меня есть подписчики в Twitter и FeedBurner, как мне афишировать эти числа? Создадим фиксированный блок с картинками!

 

 

Создаём плавающий счетчик

Для этого, мы находим тематические изображения и загружаем их в WordPress блог. У меня это будет ФеедБурнер и Twitter: Картинки желательно делать идентичного размера и небольшие, хотя, мы сами можем в дальнейшем указать размер изображений!

TwitterФеедбурнер

 

 

Заходим в админку WordPress и добавляем новую запись!

Добавляем изображения социальных сетей или FeedBurner.

Приписываем снизу количество подписков, желательно числа обозначить «жирным», чтобы они выделялись.

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

После, заходим в раздел «текст» и копируем полученный результат.

Все записи

 

 

Вставляем счетчики в sidebar.php

В этой же админке нам надобно навести курсор мыши на «внешний вид» и выбрать «редактор», а теперь в правой колонке отыскать sidebar.php (Боковая Колонка)  и вставить в самый конец данной страницы наш скопированный код, снабдив при этом его идентификатором par.

1. Это не сложно, вставляем в начале  <nav id="par"> - а в конце </nav>

2. А ещё, перед картинками <img class=...> нужно ввести ссылки на наши странички для подписки:

<a href="https://twitter.com/1stHistorical" target="_blank"> 

Указал страничку в Twitter, на неё будут попадать при щелчке по счетчику — https://twitter.com/1stHistorical

3. <a href="http://feeds.feedburner.com/Zarbon" target="_blank"> 

Указал свою страничку в FeedBurner: http://feeds.feedburner.com/Zarbon

4. Закрывающийся тег ссылки </a> надобно поставить в самый конец определённого счетчика, захватив при этом как изображения, так и текст.  Посмотрите на код ниже, там я выделил закрывающиеся теги </a>.

Почему в конец? Чтобы не только картинка была с ссылкой, но и текст. Достаточно кликнуть по определённому  пространству и вас перенесёт на страницу Twitter, либо FeedBurner (в моем случае).

5. width="80" height="80" — ширина и высота изображения, можете указать свою.

 

 

Вот такой итог, всё важное выделено «жирным». 

<nav id="par">

<a href="https://twitter.com/1stHistorical" target="_blank"><img class="aligncenter wp-image-345 size-medium" src="http://zarbon.ru/wp-content/uploads/2016/07/Twitter_bird_icon-500x478.png" alt="Twitter" width="80" height="80" />
<p style="text-align: center;"><span style="font-size: 14pt; font-family: 'comic sans ms', sans-serif;"><strong>490</strong></span></p>
<p style="text-align: center;"><span style="font-size: 14pt; font-family: 'book antiqua', palatino, serif;"><em>Подписчиков</em></span></p></a>

<a href="http://feeds.feedburner.com/Zarbon" target="_blank"><img class="aligncenter wp-image-346 size-medium" src="http://zarbon.ru/wp-content/uploads/2016/07/Feedburner.png" alt="Феедбурнер" width="80" height="80" />
 <p style="text-align: center;"><span style="font-size: 14pt; font-family: 'comic sans ms', sans-serif;"><strong>500 </strong></span></p>
 <p style="text-align: center;"><span style="font-family: 'book antiqua', palatino, serif; font-size: 14pt;"><em>Подписчиков</em></span></p></a> </nav>

 

 

Добавляем код ниже в style.css

Отправляемся во внешний вид — редактор и уже находим style.css (прячется в конце). Вставляем наш идентификатор par, но в начале обязательно ставим #.

А теперь смотрим на инструкции, корректируем по желанию формочку. Можно вставить код вместе с текстовыми заметками:

#par {       /*Открытие для преобразования*/
  width: 120px;  /*ширина формочки (блока)*/
  background-color: white;  /*фон блока*/
  right: 0px;   /*форма будет прилегать к правой стороне, если у вас левый сайдбар, то замените, right на left*/
  position: fixed;  /*Наш блок будет плавать*/
  top: 180px;    /*Выше - ниже блок (позиционирование)*/
  display: block;  /*элемент показывается как блочный, нам такой и нужен*/
  border-left: 2px dashed #717376; /*размер (px)*/
  border-top: 2px dashed #717376;      /*линия прерывистая (dashed)*/   
  border-bottom: 2px dashed #717376;  /*укажите цвет рамок (#717376)*/
  padding: 0px 5px 0px 0px;      /*позиционирование картинок и текста внутри блока*/
  z-index: 101;     /*чтобы форма не проваливалась под другие элементы*/
  }

#par a {

display: block;         /*нужная вещь*/

height: 100%;         /*чтобы ссылка была по всей области*/
 color: #717376;       /*цвет текста */
 text-decoration: none; /*не было подчёркивания у текста (если имеется)*/

}

 

 

Любуемся результатом!

У меня получилась белая формочка с чёрным текстом, которая следует за пользователем при прокрутке колесика мыши. Не рекомендую делать форму большую и яркую, она будет отвлекать от контента.

Счетчик плавающий

 

 

Замена цветов при приближении курсора мыши

А вот как сделать, чтобы при наведении менялся цвет фона и текста, а также можно было добавить ещё рамку? Добавляем в style.css вот такое чудо:

#par:hover a {
  height: 100%;

display: block;
  border-left: 2px solid yellow;   /*рамка, если нужна ещё*/
  border-top: 2px solid yellow;
  border-bottom: 2px solid yellow;
  color: yellow;   /*цвет текста при наводе*/
  background: #0e6cb5;    /*фон при наводе*/
  }

 

 

И вот мы наводим курсор мышки на подписку и получаем совсем другой внешний вид.

Навели мышку, поменялся цвет

 

 

Мобильные устройства

Представим, что мы зашли с планшета или смартфона и получили счетчики на пол экрана, они мешают просматривать контент! Будет высокий показатель отказов с мобильников, посетители будут закрывать сайт.

И что же делать?

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

Внешний вид — редактор — style.css и вводим вот такой код:

@media screen and (max-width:900px){   /*не показывать счетчики на маленьких экранах*/
  #par {
  display: none;

}}

 

Если нет Сайдбара, а лишь контент без блоков, то вставляйте в  конец "content-single.php".

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

 

Счетчик — это  способ для привлечения подписчиков, что будут посещать проекты веб-мастера.

 

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


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

insert emoticons