Ставимо кнопки соцмереж в WordPress шаблон без плагінів і сервісів

1. Код соціальних «кнопок-причеп»
2. Куди поставити кнопки соцмереж в шаблоні WordPress
3. Чому краще впроваджувати свій код кнопок на сайт

Полегшуємо завантаження сайту, використовуючи власний код замість плагінів! Чим їх менше, тим легше і швидше буде завантажуватися наш шаблон, а це - прямий шлях до поліпшення поведінки відвідувачів на сайті. У даній статті ми навчимося робити вертикальний блок соціальних кнопок, який прокручується разом зі статтею. З його допомогою читач зможе поділитися посиланням на пост і зберегти до себе на сторінку, скільки б тексту він ні прочитав.

Буває так, що ми не встигаємо вивчити матеріал до кінця, і, щоб повернутися до нього пізніше, ми його собі куди-небудь зберігаємо (в закладки або соцмережі, наприклад). Так ось, буває часто так, що блок кнопок варто далеко в кінці довгої статті, і його не видно читачеві в поточний момент, оскільки людина ще не дочитав матеріал. Ми ж за допомогою спеціального коду зробимо так, щоб блок знаходився в полі зору весь час і скролл разом зі статтею.

Код соціальних «кнопок-причеп»

Давайте розберемо код соціальної кнопки для Фейсбуку. Решта можна буде зробити за аналогією.

<! - SocialButtons ->
<Span style = "display: scroll; position: fixed; bottom: 280px; left: 50px;">
<Noindex> <a target="blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?> "> <img src =" http://site.ru/f.png "width =" 50 "height =" 50 "title =" Розповісти на Фейсбук "alt =" Опублікувати в Фейсбук "> </a> </ noindex> </ span>
<! - SocialButtons ->

Підпис <! - SocialButtons -> дозволяє візуально визначити, де в коді сторінки знаходиться наш блок кнопок. Поки в блоці ми розмістили тільки одну кнопку, але потім коду буде значно більше.
У тезі <span> c атрибутами знаходяться стилі. Їх ми будемо прописувати для кожної кнопки. Запис display: scroll; position: fixed означає, що кнопка «прилипне» до екрану і не буде ховатися разом з уже прочитаним текстом в процесі скролінгу (прокрутки) сторінки.

Показники bottom і left визначають положення кнопки щодо нижнього і лівого краю екрана. У нашому випадку, вона буде знаходитись зліва від поста. Якщо потрібно помістити її справа, просто замініть "left" на "right". Як ви вже помітили, значення даних показників задаються в пікселях, і ви можете змінювати їх як завгодно, поки не знайдете найбільш оптимальну позицію в своєму шаблоні. Зауважимо, що у вищенаведеному прикладі відступ кнопки від нижньої межі екрану складає 280 пікселів.

Якщо ж ми хочемо поставити під цією кнопкою ще одну, то від 280 нам потрібно відняти 50 або трохи більше (50 - це висота кнопки). Вийде, що у наступній кнопки bottom буде вже не 280, а максимум 230 (якщо більше, то картинки будуть наїжджати один на одного). Таким чином, дане значення має змінюватися з кожною новою кнопкою.
Тегом <noindex> і атрибутом rel = "nofollow" ми закриваємо посилання, які ховаються в кнопках, від індексації пошуковими системами.

У тезі <a> атрибут target = "blank" відповідає за відкриття вікна з пропозицією поділитися в новій вкладці. Це важливо, оскільки користувач, можливо, ще захоче повернутися на сторінку сайту, яку він читав.
В атрибут href = вписується безпосередньо код посилання, яка буде відповідати за виведення діалогового вікна соцмережі при натисканні на кнопку. Для кожної з них цей код буде своїм. Запис <? Php the_permalink (); ?> (Не потрібна тільки для кнопки підписки на фідбернер) дозволяє відобразити в сторінці соцмережі посилання на наш матеріал і його назва, наприклад:

У тезі <img> прописаний шлях до картинки-кнопці, яку ви захочете поставити, а також її параметри (довжина, ширина, тайтл, атрибут alt).

Таким чином, ми отримуємо загальну схему складання коду кнопки соцмережі:

<Span style = "display: scroll; position: fixed; bottom: {значення}; left: {значення};">
<Noindex> <a target="blank" rel="nofollow" href="{ссилка на соцсеть}=<?php the_permalink(); ?> "> <img src =" {посилання на картинку кнопки} "width =" {значення} "height =" {значення} "title =" {Поділитися, розповісти на ...} "alt =" {Поділитися, розповісти на ...} "> </a> </ noindex> </ span>

Що стосується значення посилань для різних соціалок, то вони повинні бути такими:

• Для Фейсбуку: onclick = "window.open ( 'https://plusone.google.com/_/+1/confirm?hl=ru&url= http://www.facebook.com/sharer.php?u= <? php the_permalink ();?> "
• Для Твіттера: http://twitter.com/intent/tweet?text=RT @ Ваш логін в Твіттері <? Php the_permalink (); ?>
• Для підписки на фід блогу: http://feeds.feedburner.com/ Названіе_вашего_фіда
• Для mail.ru: http://connect.mail.ru/share?share_url=<?php the_permalink (); ?>
• Для Вконтакте: https://vk.com/share.php?url=<?php the_permalink (); ?>
• Для закладок Яндекса: http://zakladki.yandex.ru/newlink.xml?url=<?php the_permalink ()?> & Name = <? Php the_title (); ?> & Descr = <? Php the_excerpt (); ?>
• Для Однокласників: http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink (); ?> & Title = <? Php the_title (); ?>

Куди поставити кнопки соцмереж в шаблоні WordPress

Як правило, блок ставиться на сторінки з окремими постами, новинами. Можна поставити його і на статичні сторінки. На розділи або головну проставляти зайві зовнішні посилання не варто, хоча можете спробувати і подивитися на ефект. Тільки тести та експерименти можуть показати реальний стан справ.

За окрему публікацію відповідає файл single.php, розташований в папці з вашою темою. У ньому і потрібно буде розмістити створений вами код. Куди його ставити - залежить лише від вас, все одно кнопки встануть на те місце, яке ви вказали в атрибутах bottom і left. Бажано, звичайно, помістити даний код в кінці, де-небудь після виведення футера. Це необхідно, щоб кнопки соцмереж виводилися пізніше основного контенту, якщо у користувача повільний Інтернет. Першим завжди повинен завантажуватися корисний користувачеві матеріал, і вже потім - кнопки «поділитися» та інше.

Чому краще впроваджувати свій код кнопок на сайт

Як ми вже говорили вище, плагіни - найлегший спосіб зробити кнопковий блок. Однак, ми дорожимо швидкістю завантаження сайту, і намагаємося мінімізувати кількість плагінів. Так, якщо взяти два сайти, то за інших рівних умов їх якості, один буде стояти у видачі вище іншого. І все чому? Тому що у одного завантаження відбувається швидше, ніж у іншого.

Ще один спосіб - це сторонні сервіси. Поставити їх дуже легко і швидко, однак ці сервіси іноді «виснуть», і на сайті відображається щось незрозуміле замість кнопок.

До того ж, в сервісах і плагінах можуть бути зайві посилання на розробників, які не потрібні нам.
Таким чином, свій код - кращий вихід. Головне - робити його чистим, акуратним, без зайвого сміття і помилок.

Подобаються статті? Підписуйтесь на розсилку!