WordPress【twenty seventeen】標準のソーシャルリンクメニューをサイドバーに実装する方法

本サイトにて今まで標準のソーシャルリンクメニューに関しては記事にしてきたが、【twenty seventeen】標準のソーシャルリンクメニューの仕組みは少し変わっていることもあり、仕様を理解していないとカスタマイズすることが出来ない。

しかし、今回のSVGファイルを利用したアイコンは恐らくスタンダードな仕様になっていくだろうと推測している。何故なら、CSS（スタイルシート）で変色や形の変更が容易に出来るからである。WordPress側もそれを意識して【twenty seventeen】の標準機能として搭載したのではないかと感じています。

WordPressでサイト構築している方には是非とも、標準機能を利用することをお勧めします。良い機会なのでしっかりと仕組みを理解してください。

標準ソーシャルアイコンをサイドバーへ表示する方法

このようなアイコンをサイドバーへも表示させるのが今回の目的です。フッターへの表示は過去の記事で取り上げたが、これをサイドバーへ表示させる方法は今回が初めてとなります。勿論、フッターに表示させているものと全く同じものを利用します。

【twenty seventeen】の標準ではフッターにしか標準ソーシャルアイコンが表示されないように出来ています。「テーマ / footer.php」ファイルを参照すると分かるのですが、phpファイルに直接ソーシャルアイコンを埋め込むように作られているからです。

まずは「テーマ / footer.php」を参照してみよう

下に掲載したものが標準で用意されている「footer.php」の中身である。この中で背景色が赤い部分が標準ソーシャルアイコンを出力するためのコードとなる。要はこれをそのまま使えばサイドバーへ出力ができるのである。

<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.2
*/
?>
</div><!-- #content -->
    <footer id="colophon" class="site-footer" role="contentinfo">
        <div class="wrap">
            <?php
            get_template_part( 'template-parts/footer/footer', 'widgets' );
            if ( has_nav_menu( 'social' ) ) : ?>
                <nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_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 endif;
            get_template_part( 'template-parts/footer/site', 'info' );
            ?>
        </div><!-- .wrap -->
    </footer><!-- #colophon -->
</div><!-- .site-content-contain -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

「sidebar.php」のカスタマイズ例

当然のことですが、必ず「子テーマ / 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">
        <nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_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_child_get_svg( array( 'icon' => 'chain' ) ),
            ) );
        ?>
        </nav><!-- .social-navigation -->
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

これで標準ソーシャルアイコンがサイドバーの一番上に表示されるようになる。もしもタイトルとか他に何か追記したい場合は、自分でカスタマイズしてください。

ただし、この修正だけでは綺麗に横並びに表示されません。スタイルシートにもカスタマイズが必要になります。

スタイルシート「style.css」のカスタマイズ例

これも当然ですが、「子テーマ / style.css」に対して追記してください。追記内容は下のようになります。マージン等は自分の好みで調整してください。

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

これで全てのカスタマイズが完了です。スタイルシートに修正を加えたので、スーパーリロードを使ってサイトを再表示してみてください。標準ソーシャルリンクアイコンが綺麗に並んだはずです。