Рейтинг@Mail.ru

Добавляем кнопки Twitter и Google+ в меню и боковую панель WordPress

Социальные сети – важнейшая связь с читателями вашего блога. Чтобы им было проще следить за новыми постами, добавьте кнопки Twitter и Google+ в навигационное меню или боковую панель WordPress. Это несложно.

Кнопки можно размещать в любой части страницы, но ниболее оптимальными являются боковое меню (sidebar) и основное меню (navigation bar).
Для Twitter, воспользуемся кодом IFRAME, например таким:

<iframe style="width: 60px; height: 20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=ИМЯ_ВАШЕГО_ТВИТТЕРА&show_screen_name=false&show_count=false" frameborder="0" scrolling="no" width="320" height="240"></iframe>

Такой код отображет только иконку и надпись “Follow”, без подсчета подписчиков (show_count=false) и названия вашего аккаунта в Твиттере (show_screen_name=false). В таком случае кнопка получается короткой, что позволяет экономить место в меню. Заменив false на true, можно включить данные опции, но в этому случае не забудьте поправить width and height, чтобы кнопка влезла в меню. Это важно! Если задать слишком большие значения данных параметров, то при отображении страницы поедет вся верстка!

Чтобы добавить кнопку в основное (верхнее) меню WordPress, откройте на редактирование файл header.php вашей темы и добавьте приведенный выше код после нижеследующего блока:

<nav id="menu" role="navigation">
		<?php wp_nav_menu( array( 'container' => false, 'menu_id' => 'primary-menu', 'theme_location' => 'primary-menu' ) ); ?>

Возможно, придется немного повозиться с параметрами style,padding и margin кода, чтобы выровнять кнопку внутри меню.
У меня например следующие значения:

<iframe style="width: 60px; height: 20px; padding-top: 10px; padding-left: 5px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=ИМЯВАШЕГОТВИТТЕР&show_screen_name=false&show_count=false" frameborder="0" scrolling="no" width="320" height="240"></iframe>

Если хотите чтобы надпись Follow на кнопке Twitter была на русском языке, добавьте еще параметр &lang=ru .

Чтобы добавить кнопку в боковую панель, откройте на редактирование sidebar.php и добавьте код кнопки в нужное вам место. Как правило, код добавляют после:

<?php the_widget( 'WP_Widget_Meta', array(), array(
			'widget_id'     => null,
			'before_widget' => '<li id="%1$s" class="widget %2$s">',
			'after_widget'  => '</li>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>'
		) ); ?>

		<?php endif; ?>

Для кнопки Google+, мы будем использовать официальный линк получения кода кнопки. Данная утилита может посоветовать добавить некоторый код в header.php для правильной работы кнопки, не забудьте про это.

Я сгенерировал код для маленькой кнопки, в том же стиле что и кнопка Твиттера.

Чтобы добавить кнопку в навигационное меню, откройте header.php и добавьте код кнопки сразу после кнопки Твиттера (см. выше).

Чтобы добавить обе кнопки в боковое меню, я использовал следующий код:

<div style="margin-left: 5px;"><iframe style="width: 60px; height: 20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=ТВИТТЕР&show_screen_name=false&show_count=false" frameborder="0" scrolling="no" width="320" height="240"></iframe></div>
<a style="text-decoration: none;" href="https://plus.google.com/МОЙ_ГУГЛ?prsrc=3"><img style="border: 0; width: 16px; height: 16px; padding: 2px;" src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt="" /></a>

Leave a Comment