Шукаємо плагіни для WordPress

409
  • Можливості плагіна Easy Social Share Buttons
  • Проблеми, що виникають при роботі з цим плагіном
  • Здрастуйте, шановні читачі блогу . Сьогодні пишу свій перший огляд платного плагіна WordPress (коштує він, правда, зовсім не дорого (12$), але все ж не халява). Власне, до цього я їх ніколи і не купував, намагаючись використовувати те, що розповсюджується безкоштовно. Та й самі плагіни для WordPress на своєму блозі намагаюся використовувати по мінімуму (залишав лише ті, без яких дійсно важко обійтися).

    Наприклад, багато плагіни я замінив рядками коду у файлі functions.php, який дозволяє робити потрібні налаштування рушія не вносячи змін у файли ядра, які при черговому оновлення Вордпресс довелося б правити заново. Зручна штука, але все ж, плагіни теж мають свою принадність.

    Шукаємо плагіни для WordPress

    Основна перевага плагінів — простота використання і низький поріг входження. По суті, робота з ними дуже схожа на установку і налаштування звичайної програми на комп’ютері. У більшості випадків, всі дії з налаштування плагінів проводяться безпосередньо з адмінки WordPress і вам при цьому зовсім немає необхідності володіти навичками Html, CSS і вже тим більше PHP програмування. Багатьох це підкуповує.

    Власне, і історія з купівлею Easy Social Share Buttons стала результатом бажання спробувати продукт з коробки», який, по ідеї, повинен доставляти одні тільки позитивні емоції. Загалом, експеримент вдався — кнопки мені сподобалися, можливості налаштувань і статистики навіть дуже порадували. Але були й деякі труднощі, про які теж не премину розповісти.

    Можливості плагіна Easy Social Share Buttons

    Обмовлюся відразу про те, навіщо я в заголовку виділив соціальні мережі Вконтакте та Однокласники. Справа в тому, що Easy Social Share Buttons є англомовним продуктом, де зазвичай про «суворих» реалії життя в рунеті практично нічого не знають і тому популярні у нас соціальні мережі такими розробниками просто ігноруються. Цей плагін став приємним винятком з правил.

    Купити, почитати відгуки та переглянути демку цього плагіна ви зможете на його офіційній сторінці в CodeCanyon.net (я вже згадував цей сервіс при описі можливих варіантів організації слайдерів і слайд-шоу на сайті).

    Якщо перейдете на демо-сторінку Easy Social Share Buttons і прокрутіть униз, то побачите горизонтальну панель з кнопками, яка буде залишатися «приклеєною» вгорі сторінки. Природно, що це не єдиний варіант оформлення зовнішнього вигляду і позиції, в якій можуть виводитися кнопки.

    Давайте спробую перерахувати можливості плагіна порядку:

  • Є кнопки для 18 соціальних мереж (включаючи дві рунетовские), куди відвідувачі вашого сайту зможуть розшарити вподобану їм статтю або товар в інтернет-магазині. Для деяких з цих сервісів (Вконтакте, Google+, Фейсбук) можна буде додати кнопки «Мені подобається» (+1 у випадку Гугла), а для Твіттера кнопку для набору фоловерів (Читати).
    Шукаємо плагіни для WordPressШукаємо плагіни для WordPress
  • Для блоку кнопок, що виводяться за допомогою Easy Social Share Buttons, можна буде у налаштуваннях задати один із 9 стилів відображення.

    Шукаємо плагіни для WordPressШукаємо плагіни для WordPress

    Причому, є можливість задати різний зовнішній вигляд кнопок для статей і для статичних сторінок («Display Settings» — «Advanced Display Settings by Post Type»).

  • Дуже прикольно, на мій погляд, реалізована можливість приховування назви соціальний мережі. У цьому випадку, за замовчуванням, залишається від кнопки тільки її емблема, а при підведенні до кнопки соцмережі курсів миші вона плавно збільшується і з’являється назва (дивіться як це реалізовано внизу статті).

    Шукаємо плагіни для WordPressШукаємо плагіни для WordPress

    Якщо не хочете, щоб цей ефект використовувався, то вимкніть його (Display Settings — Network Names and Counters). Там же можна буде додати до всіх кнопок лічильник кліків по них, а також загальний лічильник кліків по всьому блоку. Положення лічильника теж налаштовується.

    Шукаємо плагіни для WordPressШукаємо плагіни для WordPress

  • У налаштуваннях Easy Social Share Buttons ви знайдете цілих дев’ять способів показу блоку. Деякі з них будуть плаваючими, тобто блок буде зафіксований у певному місці при прокручуванні сторінки (наприклад, як це було у вертикальному блоці Шаре42).

    Шукаємо плагіни для WordPressШукаємо плагіни для WordPress

    На цьому блозі я використовую пропонований за умовчанням спосіб (Content bottom — тільки під контентом). На іншому сайті я поставив плаваючий зверху блок кнопок (Float content from top), назви яких з’являються тільки при наведенні миші.

    Є ще варіант із спливаючим вікном, причому він зовсім не нав’язливий, і великою кнопкою «закрити». Примітно, що для кожного з типів виведення блоку кнопок соціальних мереж від Easy Social Share Buttons є свій блок налаштувань (обведені жовтою лінією на скріншоті). Відрадно, що, наприклад, для спливаючого блоку можна поставити тайм-аут з моменту завантаження сторінки, після закінчення якого цей блок з’являється (не нав’язливо вийде).

  • Порядок розташування кнопок соціальних мереж в блоці можна довільно змінювати з допомогою простого їх перетягування мишею в налаштуваннях плагіна з адмінки WordPress.
  • Можна увімкнути або вимкнути показ блоку з соціальними кнопками на різних сторінках блогу, в тому числі і на тих, що були створені плагінами для організації форумів і інтернет-магазинів.
    Шукаємо плагіни для WordPressШукаємо плагіни для WordPress
  • Є можливість включити ведення статистики по расшариванию ваших статей в соціальні мережі за допомогою цього плагіна (Easy Social Metrics Lite). Включається і настроюється ця опція в показаних на скріншоті налаштуваннях:
    Шукаємо плагіни для WordPressШукаємо плагіни для WordPress
  • Проблеми, що виникають при роботі з цим плагіном

    Першою з виявлених мною проблем була не коректна робота блоку кнопок, який виводився у вигляді плаваючого сайдбара. В плані відображення і налаштувань його положення питань не виникало, але ось кнопки в блоці працювали не всі. Копатися і відшукувати причину цього казусу не став, бо такий варіант розміщення мене не дуже надихає (хоча при приховуванні назви соцмережі виходить непоганий ефект, коли проводиш з ним курсором).

    Друга проблема виявилася тільки на блозі 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. Хотілося б дізнатися Вашу думку з приводу цих кнопок соцмереж. Вони краще, ніж кнопки від Яндекса?

    Удачі вам! До зустрічей на сторінках блогу