Как правильно вставить социальные кнопки в footer?

Question

[Илья Деревянных]

Проблема в том, что не понимаю как отцентровать кнопки и надпись. Как вообще измени их расположение? Заранее благодарю за помощь.

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
?>

		</div><!-- .site-content -->

		<footer id="colophon" class="site-footer" role="contentinfo">
			<?php if ( has_nav_menu( 'primary' ) ) : ?>
				<nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
					<?php
						wp_nav_menu( array(
							'theme_location' => 'primary',
							'menu_class'     => 'primary-menu',
						 ) );
					?>
				</nav><!-- .main-navigation -->
			<?php endif; ?>

			<?php if ( has_nav_menu( 'social' ) ) : ?>
				<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
					<?php
						wp_nav_menu( array(
							'theme_location' => 'social',
							'menu_class'     => 'social-links-menu',
							'depth'          => 1,
							'link_before'    => '<span class="screen-reader-text">',
							'link_after'     => '</span>',
						) );
					?>
				</nav><!-- .social-navigation -->
			<?php endif; ?>

			<div class="site-info">
				<?php
					/**
					 * Fires before the twentysixteen footer text for footer customization.
					 *
					 * @since Twenty Sixteen 1.0
					 */
					do_action( 'twentysixteen_credits' );
				?>
				<span class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
				2018
			</div><!-- .site-info --><!--Social buttons-->
<div style="float:left"><script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js" async="async"></script>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,pocket,viber,whatsapp"></div></div>
								<!--Social buttons-->		
		
							      

</footer><!-- .site-footer -->				
	</div><!-- .site-inner -->
<?php wp_footer(); ?>
</body>
</html>

Answer 1

[Орхан Гасанлы]

Ваш код в читабельном виде.

<div style="float:left">
	<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
	<script src="//yastatic.net/share2/share.js" async="async"></script>
	<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,pocket,viber,whatsapp"></div>
</div>

Проделаем следующее:
этот код (скрипты для работы яндекс share)

<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js" async="async"></script>

Добавьте перед тегом:

<?php wp_footer(); ?>
</body>

За вывод иконок отвечает:

<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,pocket,viber,whatsapp"></div>

Стили, чтобы отцентровать блок

.ya-share2 {
    display:block;
    text-align: center;
}

Comments

[Илья Деревянных]

Не работает
Их нормально видно только при вставке до >

[Орхан Гасанлы]

Ylia_dr, а стиль применился? добавляли?

[Илья Деревянных]

azerphoenix, да, в style.css добавил. Вот в это и проблема, что как-то ничего не работает. Думаю уже просто всё удалить и написать самому как надо

[Орхан Гасанлы]

Ylia_dr, логично, что не отцентруется... я открыл ваш сайт только что и посмотрел код.
Вот, как должно быть...

.site-info {
    margin: 0 auto !important;
    text-align: center;

}

перетащите блок яндекса внутрь блока site-info
удалите блок float:left

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
?>

    </div><!-- .site-content -->

    <footer id="colophon" class="site-footer" role="contentinfo">
      <?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
          <?php
            wp_nav_menu( array(
              'theme_location' => 'primary',
              'menu_class'     => 'primary-menu',
             ) );
          ?>
        </nav><!-- .main-navigation -->
      <?php endif; ?>

      <?php if ( has_nav_menu( 'social' ) ) : ?>
        <nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
          <?php
            wp_nav_menu( array(
              'theme_location' => 'social',
              'menu_class'     => 'social-links-menu',
              'depth'          => 1,
              'link_before'    => '<span class="screen-reader-text">',
              'link_after'     => '</span>',
            ) );
          ?>
        </nav><!-- .social-navigation -->
      <?php endif; ?>

      <div class="site-info">
      	<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js" async="async"></script>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,pocket,viber,whatsapp"></div>
                <!--Social buttons-->
        <?php
          /**
           * Fires before the twentysixteen footer text for footer customization.
           *
           * @since Twenty Sixteen 1.0
           */
          do_action( 'twentysixteen_credits' );
        ?>
        <span class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
        2018
      </div><!-- .site-info --><!--Social buttons-->
		
    
                    

</footer><!-- .site-footer -->				
  </div><!-- .site-inner -->
<?php wp_footer(); ?>
</body>
</html>