Социальные сети – важнейшая связь с читателями вашего блога. Чтобы им было проще следить за новыми постами, добавьте кнопки 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>