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

WordPress Twenty Seventeen
【 標準のソーシャルリンクメニュー 】のカスタマイズ
その‐4 サイドバーへの表示
 
 サイドバーへの表示結果。
ソーシャルメニューのカスタマイズ サイドバーへの表示
 
当記事の位置づけ。
 

 

スポンサー リンク

 

 
 

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

追記する、ソーシャルリンクの表示コード。” Share ! ”というタイトルも表示。
<!--ソーシャルリンクの表示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)

 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください