標準 SNSボタン カスタマイズ -4- サイドバーへの表示

サイドバーにソーシャルリンクを表示するのは非常に簡単で、sidebar.php の <?php dynamic_sidebar( ‘sidebar-1’ ); ?>　の前にソーシャルリンクを表示するコードを追記するだけで良い。

<!--ソーシャルリンクの表示class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
	Share !
	<?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>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
		) );
	?>
</nav><!-- .social-navigation -->
<?php dynamic_sidebar( 'sidebar-1' ); ?>

但しこれだけだと、SNSボタンが縦に並んでしまうので、style.css に横に並べるコードを追記する。

/*-----------------------------------------------------------*/
/* サイドバーのソーシャルリンクを横並びにする */
aside .social-navigation {
margin: 2em 0;
width: 100%;
}
aside .social-navigation li {
float: left;
margin: 0 0.1em;
padding: 0;
}
/*-----------------------------------------------------------*/

以上で、カスタマイズ その-4 『ソーシャルリンクのサイドバーへの表示』 は完了。

今までのソーシャルリンクのカスタマイズは、親テーマを変更することを基本に行ってきたが、次章には、カスタマイズ その-5 『カスタマイズの子テーマ化』を記載したので参考にされたし。

以上。
(2017.10.07)