Здрастуйте, шановні читачі блогу . Сьогодні пишу свій перший огляд платного плагіна WordPress (коштує він, правда, зовсім не дорого (12$), але все ж не халява). Власне, до цього я їх ніколи і не купував, намагаючись використовувати те, що розповсюджується безкоштовно. Та й самі плагіни для WordPress на своєму блозі намагаюся використовувати по мінімуму (залишав лише ті, без яких дійсно важко обійтися).
Наприклад, багато плагіни я замінив рядками коду у файлі functions.php, який дозволяє робити потрібні налаштування рушія не вносячи змін у файли ядра, які при черговому оновлення Вордпресс довелося б правити заново. Зручна штука, але все ж, плагіни теж мають свою принадність.
Основна перевага плагінів — простота використання і низький поріг входження. По суті, робота з ними дуже схожа на установку і налаштування звичайної програми на комп’ютері. У більшості випадків, всі дії з налаштування плагінів проводяться безпосередньо з адмінки WordPress і вам при цьому зовсім немає необхідності володіти навичками Html, CSS і вже тим більше PHP програмування. Багатьох це підкуповує.
Власне, і історія з купівлею Easy Social Share Buttons стала результатом бажання спробувати продукт з коробки», який, по ідеї, повинен доставляти одні тільки позитивні емоції. Загалом, експеримент вдався — кнопки мені сподобалися, можливості налаштувань і статистики навіть дуже порадували. Але були й деякі труднощі, про які теж не премину розповісти.
Можливості плагіна Easy Social Share Buttons
Обмовлюся відразу про те, навіщо я в заголовку виділив соціальні мережі Вконтакте та Однокласники. Справа в тому, що Easy Social Share Buttons є англомовним продуктом, де зазвичай про «суворих» реалії життя в рунеті практично нічого не знають і тому популярні у нас соціальні мережі такими розробниками просто ігноруються. Цей плагін став приємним винятком з правил.
Купити, почитати відгуки та переглянути демку цього плагіна ви зможете на його офіційній сторінці в CodeCanyon.net (я вже згадував цей сервіс при описі можливих варіантів організації слайдерів і слайд-шоу на сайті).
Якщо перейдете на демо-сторінку Easy Social Share Buttons і прокрутіть униз, то побачите горизонтальну панель з кнопками, яка буде залишатися «приклеєною» вгорі сторінки. Природно, що це не єдиний варіант оформлення зовнішнього вигляду і позиції, в якій можуть виводитися кнопки.
Давайте спробую перерахувати можливості плагіна порядку:
Причому, є можливість задати різний зовнішній вигляд кнопок для статей і для статичних сторінок («Display Settings» — «Advanced Display Settings by Post Type»).
Якщо не хочете, щоб цей ефект використовувався, то вимкніть його (Display Settings — Network Names and Counters). Там же можна буде додати до всіх кнопок лічильник кліків по них, а також загальний лічильник кліків по всьому блоку. Положення лічильника теж налаштовується.
На цьому блозі я використовую пропонований за умовчанням спосіб (Content bottom — тільки під контентом). На іншому сайті я поставив плаваючий зверху блок кнопок (Float content from top), назви яких з’являються тільки при наведенні миші.
Є ще варіант із спливаючим вікном, причому він зовсім не нав’язливий, і великою кнопкою «закрити». Примітно, що для кожного з типів виведення блоку кнопок соціальних мереж від Easy Social Share Buttons є свій блок налаштувань (обведені жовтою лінією на скріншоті). Відрадно, що, наприклад, для спливаючого блоку можна поставити тайм-аут з моменту завантаження сторінки, після закінчення якого цей блок з’являється (не нав’язливо вийде).
Проблеми, що виникають при роботі з цим плагіном
Першою з виявлених мною проблем була не коректна робота блоку кнопок, який виводився у вигляді плаваючого сайдбара. В плані відображення і налаштувань його положення питань не виникало, але ось кнопки в блоці працювали не всі. Копатися і відшукувати причину цього казусу не став, бо такий варіант розміщення мене не дуже надихає (хоча при приховуванні назви соцмережі виходить непоганий ефект, коли проводиш з ним курсором).
Друга проблема виявилася тільки на блозі https://. Виник конфлікт CSS коду моєї теми оформлення і CSS коду, який підключає даний плагін до сторінках блогу. Полягало це в тому, що розмір кнопок виходив сильно менше, ніж на демо-сайті і чим на іншому моєму сайті. Спочатку я подумав теж забити на це, але все ж вирішив трохи подумати.
Скринька просто відкривався. Напевно, ви читали мою статтю про пріоритети в CSS і використання !important для їх зміни? Читали? Але не суть. Якщо коротко, то існує ціла ієрархія пріоритетів, яка дозволяє вирішувати конфліктні ситуації в стильовому оформленні (коли одного і того ж елементу в різних місцях CSS коду наказують різні дії).
Коли пріоритети рівні, то виконується той код, що розташований нижче. Однак, ситуацію можна змінити, додавши до розташованої трохи вище кодом !important. Саме це я і зробив. Заліз всередину файлів плагіна Easy Social Share Buttons, а саме в папку:
/wp-content/plugins/easy-social-share-buttons/assets/css
Там знаходяться папки зі стилями для всіх дев’яти стилів кнопок (дивіться вище). Просто відкриваєте папку, назва якої збігається з використовуваним вами стилем (наприклад, у мене використовується flat-retina). Знаходите там файлик easy-social-share-buttons.min.css (саме з закінченням min, бо саме він — читайте про стиснення CSS файлів). Вміст цього файлика представляє з себе одну величезну рядок коду без пробілів, і з першого разу зрозуміти там щось складно (але ж можна подивитися точно такий же файлик easy-social-share-buttons.css, код в якому легко читається).
Дуже близько до початку там буде такий код:
essb_links li a{padding:5px 12px 6px;margin:2px 5px 2px 0;border:0 solid #ddd;color:#fff!important;text-decoration:none;font-size:14px;font-family:»Segoe WP»,»Segoe UI»,Helvetica,Arial,sans-serif;background-clip:padding-box;border-radius:3px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15);-webkit-border-radius:3px;-webkit-box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
Після додавання !important перед padding та margin він вже буде виглядати так:
essb_links li a{padding:5px 12px 6px !important;margin:2px 5px 2px 0 !important;border:0 solid #ddd;color:#fff!important;text-decoration:none;font-size:14px;font-family:»Segoe WP»,»Segoe UI»,Helvetica,Arial,sans-serif;background-clip:padding-box;border-radius:3px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15);-webkit-border-radius:3px;-webkit-box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
Власне, все. На цьому конфлікт двох файлів стилів закінчився на користь того, що генерує Easy Social Share Buttons, і кнопки соціальних мереж прийняли нормальний для них розмір (задумана розробниками). Цілком можливо, що у вас таких проблем не виникне взагалі. Дякую за увагу.
P.s. Хотілося б дізнатися Вашу думку з приводу цих кнопок соцмереж. Вони краще, ніж кнопки від Яндекса?
Удачі вам! До зустрічей на сторінках блогу