Twenty Seventeenのソーシャルリンクをサイドバーにも表示するカスタマイズ


WordPressの公式テーマTwenty Seventeen 。このサイトでもカスタマイズして使っていますが、使っていくうちに、たくさんの発見があって、本当に素晴らしいテーマだなって感心してしまいます。

SEOを意識したマークアップや、CSSのインライン化、そして今風のデザインなど、数え上げればきりがありません。

ただ一つだけ、ちょっと残念な点があります。それは、ソーシャルリンク。アイコンとともに表示されるソーシャルリンクは、とっても便利なんですが、Twenty Seventeen だとフッターにしか表示されません。

やはり、ページ上部にももう一つ表示させたいので、今回は、サイドバー上部にソーシャルリンクを表示するカスタマイズを紹介します。

Twenty Seventeen のソーシャルリンクとは

Twenty Seventeen では、主要なソーシャルサイトのアイコンがあらかじめ用意されています。

設定はとっても簡単で、「外観」→「メニュー」→「カスタムリンク」に追加したいソーシャルサービスを入力するだけです。

URLとリンク文字列を入力すれば、すぐにフッターにソーシャルアイコンが表示されます。

今回は、

  • Twitter
  • Facebook
  • GitHub
  • Pocket

を試しに追加してみました。

デフォルトで用意されているアイコンは、その数なんと35種類!これだけあれば、困ることはなさそうですね。

/wp-content/themes/twentyseventeen/inc/icon-functions.php を見れば、その内容も確認できます。

function twentyseventeen_social_links_icons() {
	// Supported social links icons.
	$social_links_icons = array(
		'behance.net'     => 'behance',
		'codepen.io'      => 'codepen',
		'deviantart.com'  => 'deviantart',
		'digg.com'        => 'digg',
		'dribbble.com'    => 'dribbble',
		'dropbox.com'     => 'dropbox',
		'facebook.com'    => 'facebook',
		'flickr.com'      => 'flickr',
		'foursquare.com'  => 'foursquare',
		'plus.google.com' => 'google-plus',
		'github.com'      => 'github',
		'instagram.com'   => 'instagram',
		'linkedin.com'    => 'linkedin',
		'mailto:'         => 'envelope-o',
		'medium.com'      => 'medium',
		'pinterest.com'   => 'pinterest-p',
		'getpocket.com'   => 'get-pocket',
		'reddit.com'      => 'reddit-alien',
		'skype.com'       => 'skype',
		'skype:'          => 'skype',
		'slideshare.net'  => 'slideshare',
		'snapchat.com'    => 'snapchat-ghost',
		'soundcloud.com'  => 'soundcloud',
		'spotify.com'     => 'spotify',
		'stumbleupon.com' => 'stumbleupon',
		'tumblr.com'      => 'tumblr',
		'twitch.tv'       => 'twitch',
		'twitter.com'     => 'twitter',
		'vimeo.com'       => 'vimeo',
		'vine.co'         => 'vine',
		'vk.com'          => 'vk',
		'wordpress.org'   => 'wordpress',
		'wordpress.com'   => 'wordpress',
		'yelp.com'        => 'yelp',
		'youtube.com'     => 'youtube',
	);

	/**
	 * Filter Twenty Seventeen social links icons.
	 *
	 * @since Twenty Seventeen 1.0
	 *
	 * @param array $social_links_icons
	 */
	return apply_filters( 'twentyseventeen_social_links_icons', $social_links_icons );

左側の文字列を含むURLに対して、右側のアイコンが表示される仕組みなんですね。ところが…

「あれれ??」

そーなんです。LINEはてブ など、日本人におなじみのサービスがありません。

うーん、海外のサービスメインなのは、よくあることですが、せめてLINEぐらいはそろそろ対応して欲しいですよね。

サイドバーにもソーシャルアイコンを表示する

LINEはてブへの対応は後日考えるとして、サイドバーにソーシャルアイコンを追加表示するカスタマイズ方法に入ります。

ソーシャルアイコンの呼び出し

ソーシャルアイコンを呼び出している関数を確認しましょう。footer.phpにその記述がありました。26行目からです。

<nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
   <?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 -->

このコードをsidebar.phpに書き加えれば表示されるはずです。

<?php
/**
 * The sidebar containing the main widget area
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
	return;
}
?>

<aside id="secondary" class="widget-area" role="complementary">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

上記がデフォルトのsidebar.phpですが、このサイトでは、先日、サイドバーの上部にアドセンス(広告)専用ウィジェットを追加したので、アドセンスとデフォルトのサイドバーの間にソーシャルリンクを表示しました。

(先日の記事)WordPressに広告専用ウィジェットを自作するカスタマイズ

<?php
/**
 * The sidebar containing the main widget area
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
	return;
}
?>

<aside id="secondary" class="widget-area" role="complementary">

	<!--アドセンスのためのウィジェットです-->
	<?php dynamic_sidebar('adsence02'); ?>
        ここに追記!!!!!!!!!!
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

<?php dynamic_sidebar(‘adsence02’); ?> と

<?php dynamic_sidebar( ‘sidebar-1’ ); ?> の間にソーシャルリンクのコードを追記します。

<?php
/**
 * The sidebar containing the main widget area
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
	return;
}
?>

<aside id="secondary" class="widget-area" role="complementary">
	
	<!--アドセンスのためのウィジェットです-->
	<?php dynamic_sidebar('adsence02'); ?>
	<!--ソーシャルリンクの表示-->
	<nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
		<?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' ); ?>
</aside><!-- #secondary -->

しかし、これだけだとデザインが乱れてしまうので、スタイルシートで綺麗な横並びになるように調整していきます。

/**********************************************/
/* sidebarのソーシャルリンクのデザインを整える */
/**********************************************/
aside .social-navigation {
	margin: 2em 0;
	width: 100%;
}
aside .social-navigation li {
	float: left;
	margin: 0;
	padding: 0;
}

うまくいけば、次のように表示されるはずです。

これで、フッターとサイドバーの両方にソーシャルリンクが表示されるようになりました。

けれど、やっぱりLINEはてブのリンクは必須なので、その辺の対応も含めて、もう一歩踏み込んだカスタマイズを考えてみようと思います。

いい方法があれば、またこちらのサイトでご報告しますね。

コメントを残す

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