Кнопки соцсетей на WordPress без плагина

Мы уже немного освоились в шаблоне WordPress – узнали о странице header, о страницах index и single, разобрались в основных параметрах таблицы стилей CSS. Но самый лучший путь научиться взаимодействовать с темой своего блога – внести в нее какие-нибудь изменения. Естественно, полезные и нужные читателям. Кнопки «Поделиться в социальных сетях» — что может быть полезнее?!

Во многих шаблонах WordPress уже предустановленны те или иные кнопки. Но, как правило, они расположены не там, не так, как нам хочется. Например, они скрываются где-то наверху, и когда человек дочитает статью и решит её лайкнуть – под рукой у него не оказывается нужных кнопок. Часто, среди предустановленных кнопок соцсетей оказываются ненужны (например, иностранные сети, которыми у нас мало кто пользуется), а нужных – не хватает. Обратите внимание, что бывают еще кнопки, указывающие на ваш профиль в соцсетях – с их помощью невозможно поделиться понравившейся статьей.

— Почему бы не поставить плагин для соцсетей? – спросит кто-то.

— Одно другому не мешает! – отвечу я. К тому же, кнопки соцсетей, вставленные прямо в код шаблона WordPress, позволят теме загружаться намного легче. Вместе с плагином мы можем получить еще и ссылки на его автора и кучу всякого мусора…

Кнопки соцсетей должны быть всегда под рукой

Кнопок много не бывает! Читатель блога должен иметь возможность поделиться нашей статьей в соцсетях из любого положения, не прокручивая экрана. Ведь кто-то и не дочитает наш опус до конца. Может быть, отложит на потом или просто окажет нам любезность. А значит нужно сделать кнопки, которые следуют за читателем – кнопки-прилипалы.

Разбираем код кнопок

Во-первых, самая первая и самая последняя строки — это подпись нашего фрагмента кода, чтобы мы его отличали от родных частей шаблона. Я назвала их ShareButtons («кнопки поделиться») — можете придумать и вписать туда любое название, даже на русском.

Следующая строка, которая с некоторыми изменениями будет повторяться для каждой кнопки — это описание стиля. Другими словами, в ней записано, как будет отображаться элемент, который заключен в теги <span></span>. Мы видим, что могут быть не только стили, применяющиеся для всего шаблона WordPress, но и самые разнообразные стили, которые применяются к конкретному фрагменту контента.

Что у нас тут записано?

Эти две позиции мы можем менять:

Далее идут теги, закрывающие наши ссылки от индексации Яндексом и Гуглом <noindex><nofollow> и их закрывающие собратья, после ссылок. В принципе, nofollow у нас и в самой ссылке стоит. Но, лучше перебдеть)))

Дальше идет сама ссылка на социальную сеть — <a rel=»nofollow» target=»blank» href=»http://ссылка на соцсеть<?php the_permalink(); ?>»> Для каждого ресурса эта ссылка — своя:

Видите, только для Твиттера нужно персонализировать свой аккаунт. Ведь читатель делится вашей статьей в своем аккаунте!

Наконец, ссылка на изображение кнопки — <img src=»http://ссылка на адрес картинки» width=»30″ height=»30″ title=»Поделиться в название соцсети«>Можно загрузить картинки прямо на свой блог, можно использовать сторонний файлообменник (это для блогов на Блогспоте, например). width=»30″ height=»30″  — это ширина и высота картинки в пикселях. Попробуйте сделать кнопку побольше и поменьше — выбирайте, какие больше подходят вашему блогу. В title пишем все, что, как нам кажется, заставит читателя жмакнуть на кнопку.

Если решите убрать одну из кнопок — удаляйте весь контейнер, начинающийся с тега <span style… до закрывающего тега </span>.

Ставим социальные кнопки в шаблон WordPress

Очевидно, что возможность поделиться в соцсетях нужна для отдельной публикации. В принципе, можно и на главную их влепить, и на любую статическую страницу — было бы желание. Но мы сейчас займемся именно отдельными публикациями, за которые отвечает страница шаблона — single.php

На каком бы языке ни была написана ваша тема для WordPress — эта страничка, как слоеный пирог, будет делиться на следующие фрагменты:

Они могут идти в несколько другой последовательности. Например, боковая колонка может быть прописана выше поста. Но это не важно! Ведь наши кнопки будут елозить самостоятельно, вне связи с каким-либо элементом страницы. Поэтому нам нужно просто найти, где кончается один фрагмент кода и начинается другой. Например, они могут быть заключены в теги <div>код боковой колонки sidebar</div>вот тут наша вставка<div>код подвала footer</div>.

Вуаля! Сохраняем и смотрим, получилось ли. Если что-то криво — проверьте, все ли скобки, слеши и прочие знаки на месте. Как правило, именно из за отсутствия или лишней скобки происходит весь бардак. все вопросы задавайте здесь в комментах.

И не забудьте поделиться этой статьей в соцсетях!