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

Игорь Серов

Вступление

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

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

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

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

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

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

  • www.iconarchive.com
  • findicons.com

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

Share-wordpress-no-plugins -1

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

Share-wordpress-no-plugins -2

Share-wordpress-no-plugins -3

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

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

Переходим к коду кнопок «Поделись»

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

Перед примером кодов кнопок,хочу обратить ваше внимание на один элемент кода.

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

В примерах будет использован условный адрес для фото моего сайта:

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

Как его узнать смотрите в первом параграфе статьи. Далее приведу отдельно коды всех кнопок «Поделись» для социальных сетей,о которых пишу в этой статье.

Кода заключены к теги <noindex> и <nofollow> для блокировки передачи весомости страниц сайта.

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

<noindex><a rel="nofollow" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>', 'facebook', 'width=1000, height=1024'); return false;" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" title="Поделиться в Facebook">
   <img src="//www.wordpress-abc.ru/wp-content/uploads/2013/03/Соц..png" width="64" height="64" alt="Поделиться в Facebook" />
</a></noindex>

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

<noindex><a rel="nofollow" rel="nofollow" onclick="window.open('http://twitter.com/home?status=Читаю <?php the_permalink(); ?>: <?php the_title(); ?>', 'twitter', 'width=1000, height=1024'); return false;" href="http://twitter.com/home?status=Читаю <?php the_permalink(); ?>: <?php the_title(); ?>" title="Добавить в Twitter">
   <img src="//www.wordpress-abc.ru/wp-content/uploads/2013/03/Соц..png" width="64" height="64" alt="Добавить в Twitter" />
</a></noindex>

 Код Кнопки «Поделись» для В Контакте

<noindex><a rel="nofollow" onclick="window.open('http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>', 'vkontakte', 'width=626, height=436'); return false;" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" title="Поделиться ВКонтакте">
<img src="//www.wordpress-abc.ru/wp-content/uploads/2013/03/Соц..png" width="64" height="64" alt="Поделиться ВКонтакте" />
</a></noindex>

  Код Кнопки «Поделись» для Live Journal (ЖЖ)

<noindex><a rel="nofollow" onclick="window.open('http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&amp;subject=<?php the_title(); ?>', 'lj', 'width=1000, height=1024'); return false;" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&amp;subject=<?php the_title(); ?>" title="Опубликовать в своем блоге livejournal.com">
   <img src="//www.wordpress-abc.ru/wp-content/uploads/2013/03/Соц..png" width="64" height="64" alt="Опубликовать в Livejournal" />
</a></noindex>

  Подробный разбор кода для кнопки поделись

В представленных кодах вы должны поменять, путь до загруженных иконок и свойства их размеров:

<img src=»//www.wordpress-abc.ru/wp-content/uploads/2013/03/Соц..png»width=»64″ height=»64″ alt=»Опубликовать в …..»

Также можете поменять содержание тега alt и title. Учтите: Текст после Тега title будет виден, при наведении мыши на иконку.

 

Разместить коды кнопок в шаблоне блога WP

Поместить кнопки в таблицу

Чтобы поместись кнопки, размещенные в одну строку, нужно поместись их в таблицу. Это не современный ,но очень простой вариант разместить иконки в одну строку.

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

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

Сделать таблицу для кнопок в CSS

Более современный вариант,разместить иконки в одну строку прописать  в файле:style.css следующий класс:

.icons img {
float: left;
width: 100px;
margin: 0 5px 0 0;
border: 0;
}

где [widgth] и [margin] величины переменные.Определяют ширину таблицы и отступления в рамке соответственно. Предварительно, нужно сделать следующее:

  • Для такого варианта,все иконки кнопок нужно разместить в одной папке,например icons;
  • Все коды кнопок нужно обернуть тегами
<div class="icons"></div>
  • Все пути до иконок заменить на:
&lt;img src="<strong>&lt;?php bloginfo('template_url'); ?&gt;/icons/Соц.png"</strong>

И только после этого,разместить класс .icons img (смотри чуть выше) в style.css. Но это тема отдельной статьи.

Написанные коды четырех кнопок «Поделись» поместим в шаблоне блога WordPress

Сделанные коды для социальных кнопок,нужно разместить в шаблоне сайта WP.

Для этого в административной панели входим в

Консоль >>> Внешний вид >>> Редактор

Для размещения кода в отдельных открытых статьях, нужен файл шаблона выводящий записи. single.php) или loop-single.php или content.php. Чтобы кнопки появились после статьи, вставляем их коды после тега:

< ?php the_content(); ?>

Для размещения вверху статьи, вставляем коды до этого же тега. Не забываем сохраниться и проверить результат.

www.wordpress-abc.ru.

Другие статьи раздела «WordPress без плагина»

Похожие посты:

Один комментарий к “Кнопки поделись в WordPress без плагинов”

Добавить комментарий

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.