WordPressの公式テーマTwenty Seventeen 。このサイトでもカスタマイズして使っていますが、使っていくうちに、たくさんの発見があって、本当に素晴らしいテーマだなって感心してしまいます。
SEOを意識したマークアップや、CSSのインライン化、そして今風のデザインなど、数え上げればきりがありません。
ただ一つだけ、ちょっと残念な点があります。それは、ソーシャルリンク。アイコンとともに表示されるソーシャルリンクは、とっても便利なんですが、Twenty Seventeen だとフッターにしか表示されません。
やはり、ページ上部にももう一つ表示させたいので、今回は、サイドバー上部にソーシャルリンクを表示するカスタマイズを紹介します。
Twenty Seventeen のソーシャルリンクとは
Twenty Seventeen では、主要なソーシャルサイトのアイコンがあらかじめ用意されています。
設定はとっても簡単で、「外観」→「メニュー」→「カスタムリンク」に追加したいソーシャルサービスを入力するだけです。
URLとリンク文字列を入力すれば、すぐにフッターにソーシャルアイコンが表示されます。
今回は、
- GitHub
を試しに追加してみました。
デフォルトで用意されているアイコンは、その数なんと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とはてブのリンクは必須なので、その辺の対応も含めて、もう一歩踏み込んだカスタマイズを考えてみようと思います。
いい方法があれば、またこちらのサイトでご報告しますね。