Установка кнопок Поделиться от Яндекса. Без плагинов

Кнопки Поделиться — вещь нужная! И должны быть на любом информационном сайте или блоге. Существует масса сервисов таких кнопок. И не только сервисов…

Какие выбрать кнопки, дело ваше. Все они удобные, все красивые. Проблема только в их установке. Самый удобный способ — использовать соответствующий плагин, но для любителей все делать без плагинов есть другой просто способ.

к содержанию

Установка кнопок после контента

Простая функция. Добавляем в файл functions.php и все

function artabr_add_button_share($content){ 
	if( !is_single() ) return $content;
	$button_share = '<div class="share-ya"><h4>Поделиться</h4>
	<script type="text/javascript" async="async" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="big" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"></div>
	</div>';
	return $content . $button_share;
}
add_filter('the_content', 'artabr_add_button_share' );
к содержанию

Установка кнопок до статьи (под заголовком)

button1

function artabr_add_button_share($content){ 
	if( !is_single() ) return $content;
	$button_share = '<div class="share-ya"><h4>Поделиться</h4>
	<script type="text/javascript" async="async" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="big" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"></div>
	</div>';
	return $button_share . $content ;
}
add_filter('the_content', 'artabr_add_button_share' );
к содержанию

Установка и под статьей и над статьей

button3

function artabr_add_button_share($content){ 
	if( !is_single() ) return $content;
	$button_share = '<div class="share-ya"><h4>Поделиться</h4>
	<script type="text/javascript" async="async" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="big" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"></div>
	</div>';
	return $button_share . $content . $button_share;
}
add_filter('the_content', 'artabr_add_button_share' );<br /><br />
к содержанию

Установка под WooCоmmerce на странице товара

add_action( 'woocommerce_share', 'artabr_add_button_share_product_single', 10 );
function artabr_add_button_share_product_single() {
	?>
	<div class="share-ya">
		<script type="text/javascript" async="async" src="//yastatic.net/share/share.js" charset="utf-8"></script>
		<div class="yashare-auto-init"
			data-yashareL10n="ru"
			data-yashareType="big"
			data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus"
			data-yashareTheme="counter"></div>
	</div>
	<?php
}

Новые кнопки поделиться от Яндекса

button4

Еще раз напоминаю: функцию добавляем в файл functions.php

function artabr_add_button_share2($content){ 
	if( !is_single() ) return $content;
	$button_share = '<div class="share-ya"><script async="async" src="https://yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-counter="" data-services="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-lang="ru" data-size="s" data-url="'.get_permalink().'" data-title="'. get_the_title().'" data-description="" data-image=""></div>
	</div>';
	return $button_share . $content;
}
add_filter('the_content', 'artabr_add_button_share2' );
Этим кодом кнопки появятся под заголовком
к содержанию

Делаем кнопки большими

Новые кнопки от Яндекса можно сделать и больше. Для этого добавляем в файл style.css немного стилей, которые изменят размер

.ya-share2__container_size_s .ya-share2__counter {
    font-size: 13px !important;
    padding: 8px 6px 0 6px !important;
}
.ya-share2__container_size_s .ya-share2__icon {
    height: 30px !important;
    width: 30px !important;
    background-size: 30px 30px !important;
}

Или просто измените немного сам код и добавьте атрибут  data-size=»m» и код кнопок будет выглядеть так

<div class="share-ya"><script async="async" src="https://yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-counter="" data-services="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-lang="ru" data-size="m" data-url="'.get_permalink().'" data-title="'. get_the_title().'" data-description="" data-image=""></div></div>

Таким способом можно установить любые кнопки сторонних сервисов: Pluso, Uptolike и т.д.

к содержанию

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

Для этого надо добавить дополнительную функцию

add_filter('get_the_excerpt', 'artabr_add_button_share_loop');
function artabr_add_button_share_loop($excerp) {
	$button_share = '<div class="share-ya"><script async="async" src="https://yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-counter="" data-services="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-lang="ru" data-size="s" data-url="'.get_permalink().'" data-title="'. get_the_title().'" data-description="" data-image=""></div>
	</div>';
    return $button_share . $excerp;
}

Но проще, вывести такие кнопки добавив нужный код в файл index.php и archive.php

Есть вопросы? Спрашивайте в комментариях. Всегда рад помочь.

Всегда ваш, Артем.

Об авторе
Артем Абрамович

Автор и ведущий проекта «Финты WordPress». WordPress & WooCommerce разработчик. Четыре года создаю плагины и темы. В свободное время пишу статьи, видеообзоры, гайды.