Кнопки поделись в WordPress без плагинов

В этой статье я расскажу, как сделать и поместись кнопки социальных сетей «Поделись» на сайте WordPress без плагинов.

Вступление

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

Для кнопок «Поделись» выберем четыре социальные сети: facebook , twitter, vkontakte, livejournal. Для того чтобы сделать и поместись кнопки этих социальных сетей на страницах блога WordPress нужно сделать четыре несложных шага.

1. Разместить на сайте иконки кнопок социальных сетей;
2. Написать правильный код для кнопок «Поделись»;
3. Разместить коды кнопок в шаблоне блога WP.

Разберем подробно каждый шаг.

Поместись на сайте иконки кнопок социальных сетей

Найдите в интернет иконки социальных сетей, которые нам нужны для кнопок (facebook, twitter, vkontakte, livejournal). Для поиска могу порекомендовать два бесплатных архива иконок.

• www.iconarchive.com
• findicons.com

Выбранные иконки приведите к одному размеру и загрузите в библиотеку медиафайлов своего блога. Для этого авторизуйтесь в административной панели блога. Далее открываем Консоль >>> Медиафайлы >>> Библиотека >>> Добавить новый.

После добавления иконок, понадобятся их URL адреса в библиотекe медиа файлов. Для этого нажмите «Изменить» и справа скопируйте URL адрес иконки. Также не помешает запомнить их размер.

Итаке мы получили четыре нужные нам иконки, размещенные в библиотеке медиафайлов вашего блога и их URL адреса.

Замечание: Вместо библиотеки медиафайлов своего блога можно воспользоваться любым доступным хранилищем фотографий. Например, Flickr. Нужны полные адреса иконок с http. Но использование картинок со сторонних сайтов, отрицательно влияют на скорость загрузки вашего сайта. Так что, советую использовать медиа библиотеку своего сайта. Переходим к коду кнопок «Поделись»

Правильный код для кнопок «Поделись»

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

//www.wordpress-abc.ru/wp-content/uploads/2013/03/Соц..png

Как его узнать смотрите в первом параграфе статьи. Далее приведу отдельно коды всех кнопок “Поделись” для социальных сетей, о которых пишу в этой статье. Коды заключены в теги <noindex> и <nofollow> для блокировки передачи веса страниц сайта.

Код Кнопки «Поделись» для Facebook

<noindex><a rel="nofollow" >

<noindex><a rel="nofollow" rel="nofollow" >

<noindex><a rel="nofollow" >

<noindex><a rel="nofollow" >

<table>
 <tbody>
  <tr>
   <td>
   Код кнопки1
   </td>
   <td>
   Код кнопки2
   </td>
   <td>
   Код кнопки3
   </td>
   <td>
   Код кнопки4
   </td>

   </tr>
  </tbody>
 </table>

< ?php the_content(); ?>