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

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

• ---

  Содержание
  • Установка кнопок после контента
  • Установка кнопок до статьи (под заголовком)
  • Установка и под статьей и над статьей
  • Установка под WooCоmmerce на странице товара
  • Новые кнопки поделиться от Яндекса
  • Делаем кнопки большими
  • Кнопки Поделиться в анонсах на главной и страницах рубрик

  ---

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

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

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

/**
 * Добавление кнопок поделиться от Яндекса после контента
 *
 * @sourcecode    https://wpruse.ru/finty-ushami/ustanovka-knopok-podelitsya-ot-yandeksa/
 *
 * @param $content
 *
 * @return string
 * @author        Artem Abramovich
 * @testedwith    WP 5.4
 */
function art_add_button_share_after_content( $content ) {

	if ( ! is_single() ) {
		return $content;
	}

	$button_share = '<div class="share-ya">';
	$button_share .= '<h4>Поделиться</h4>';
	$button_share .= '<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>';
	$button_share .= '</div>';

	return $content . $button_share;
}

add_filter( 'the_content', 'art_add_button_share_after_content' );

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

/**
 * Добавление кнопок поделиться от Яндекса до контента
 *
 * @sourcecode    https://wpruse.ru/finty-ushami/ustanovka-knopok-podelitsya-ot-yandeksa/
 *
 * @param $content
 *
 * @return string
 * @author        Artem Abramovich
 * @testedwith    WP 5.4
 */
function art_add_button_share_before_content( $content ) {

	if ( ! is_single() ) {
		return $content;
	}

	$button_share = '<div class="share-ya">';
	$button_share .= '<h4>Поделиться</h4>';
	$button_share .= '<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>';
	$button_share .= '</div>';

	return $button_share . $content;
}

add_filter( 'the_content', 'art_add_button_share_before_content' );

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

/**
 * Добавление кнопок поделиться от Яндекса до и после контента
 *
 * @sourcecode    https://wpruse.ru/finty-ushami/ustanovka-knopok-podelitsya-ot-yandeksa/
 *
 * @param $content
 *
 * @return string
 * @author        Artem Abramovich
 * @testedwith    WP 5.4
 */
function art_add_button_share_before_after_content( $content ) {

	if ( ! is_single() ) {
		return $content;
	}

	$button_share = '<div class="share-ya">';
	$button_share .= '<h4>Поделиться</h4>';
	$button_share .= '<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>';
	$button_share .= '</div>';

	return $button_share . $content . $button_share;
}

add_filter( 'the_content', 'art_add_button_share_before_after_content' );

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

/**
 * Добавление кнопок поделиться от Яндекса на странице товара после метаданных
 *
 * @sourcecode    https://wpruse.ru/finty-ushami/ustanovka-knopok-podelitsya-ot-yandeksa/
 *
 * @param $content
 *
 * @return string
 * @author        Artem Abramovich
 * @testedwith    WP 5.4
 * @testedwith    WC 4.1
 */
function art_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
}

add_action( 'woocommerce_single_product_summary', 'art_add_button_share_product_single', 70 );

Изменяя приоритет в фильтре в меньшую сторону, можно перемещать вывод кнопкой по странице товара.

Пример: если приоритет будет равен 7, то кнопки появятся после заголовка, если 15, то после цены.

/**
 * Добавление кнопок поделиться от Яндекса на странице товара после кнопки Добавить в корзину
 *
 * @sourcecode    https://wpruse.ru/finty-ushami/ustanovka-knopok-podelitsya-ot-yandeksa/
 *
 * @param $content
 *
 * @return string
 * @author        Artem Abramovich
 * @testedwith    WP 5.4
 * @testedwith    WC 4.1
 */
function art_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
}

add_action( 'woocommerce_single_product_summary', 'art_add_button_share_product_single', 35 );

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

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

/**
 * Добавление новых кнопок поделиться от Яндекса после контента
 *
 * @sourcecode    https://wpruse.ru/finty-ushami/ustanovka-knopok-podelitsya-ot-yandeksa/
 *
 * @param $content
 *
 * @return string
 * @author        Artem Abramovich
 * @testedwith    WP 5.4
 */

function art_add_button_share2_after_content( $content ) {

	if ( ! is_single() ) {
		return $content;
	}

	$button_share = '<div class="share-ya">';
	$button_share .= '<h4>Поделиться</h4>';
	$button_share .= '<script async="async" src="https://yastatic.net/share2/share.js"></script>';
	$button_share .= '<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>';
	$button_share .= '</div>';

	return $button_share . $content;
}
add_filter('the_content', 'art_add_button_share2_after_content' );

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

Новые кнопки от Яндекса можно сделать и больше. Для этого добавляем в файл 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=""
			data-title=""
			data-description=""
			data-image="">
		</div>
	</div>

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

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

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

/**
 * Добавление новых кнопок поделиться от Яндекса после контента
 *
 * @sourcecode    https://wpruse.ru/finty-ushami/ustanovka-knopok-podelitsya-ot-yandeksa/
 *
 * @param $content
 *
 * @return string
 * @author        Artem Abramovich
 * @testedwith    WP 5.4
 */
function art_add_button_share_loop( $excerp ) {

	if ( ! is_archive() ) {
		return $excerp;
	}

	$button_share = '<div class="share-ya">';
	$button_share .= '<h4>Поделиться</h4>';
	$button_share .= '<script async="async" src="https://yastatic.net/share2/share.js"></script>';
	$button_share .= '<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>';
	$button_share .= '</div>';

	return $button_share . $excerp;
}
add_filter('get_the_excerpt', 'art_add_button_share_loop');

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

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

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