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

Tweet

Pocket

本サイトにて今まで標準のソーシャルリンクメニューに関しては記事にしてきたが、【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;
}

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

標準ソーシャルリンクアイコンに関する過去記事の紹介

恐らくこの記事だけを見た人は過去の経緯がわからないので、「はてブ」「Feedly」「RSS」と言ったアイコンの実装方法が分からないと思うので、下に過去記事のリンクをしておきますのでご参照ください。

• WordPress【twenty seventeen】標準のソーシャルリンクメニューを作成する方法
• WordPress【twenty seventeen】svgファイルの仕組みを理解し「svg-icons.svg」に「はてなブックマーク」アイコンを追加する方法、無料の「Boxy Svg」で作成する方法
• WordPress【twenty seventeen】標準に用意されているソーシャルリンクメニューに「はてブ（はてなブックマーク）」アイコンを実装する方法
• WordPress【twenty seventeen】標準に用意されているソーシャルリンクメニューのアイコンの形を丸型から四角っぽく変更とアイコンサイズと間隔を変更する方法
• WordPress【twenty seventeen】標準に用意されているソーシャルリンクメニューに「Feedly・RSS」アイコンを実装する方法

【A8.netに登録しよう！】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
⇒アフィリエイトならA8.net

Tweet

Pocket

スポンサーリンク