WordPress「TwentySeventeen」の標準ソーシャルアイコンを自作でウィジェット化する方法！

WordPress公式テーマ「TwentySeventeen」においてはSVGアイコンによるソーシャルリンクボタンがフッターに表示できる仕様となっています。少し日本仕様になっていないという問題はありますが、ページ全体のアイコンとしては利用するに値するものだと感じています。

この標準ソーシャルリンクアイコンなのですが何故かフッターにしか出力しない仕様になっているんですね。

以前に「WordPress【twenty seventeen】標準のソーシャルリンクメニューをサイドバーに実装する方法」でサイドバー実装する方法を記事にしたことがあります。

しかしこの方法ですと自由な位置に配置することが出来ないと言った残念なカスタマイズになってしまっているんですね。サイドバーの一番上か一番下にしか配置することができない。ちょっと汎用性に欠けてしまいます。

サイトの何処の位置にでも配置したい場合、ウィジェット化すると一番汎用性が高い使い勝手が出来るのではないか？

こんな疑問からウィジェットを自作してみました。

ウィジットの自作は意外と簡単！

本当なら「テキストウィジット」にPHPコードが記述出来れば良いのですが、コレ気を付けた方が良いですよ。そんなことが可能になるプラグインもあるようですがセキュリティ面では不安があります。

ウィジット自作と言うと難しいと感じる方も多いと思いますが、今回のウィジット自作については非常に簡単です。フッターに表示出来ている下図のアイコンをウィジット化するだけですから。

無駄を完全排除した作りにしてあります。TwentySeventeenの標準ソーシャルアイコンをサイドバーに搭載出来た方であれば、同じ感覚で出来ます！

完成イメージ次のようになります！

下の赤枠部分の「SNSウィジェット」と言うのが今回作成するウィジェットです。

え？ココに表示されるモノって自作できるの？って思われた方もいるのではないでしょうか。

因みに「TwentySeventeen」のフッターでは下図のようなソーシャルリンクアイコンが表示できるはずです。

ウィジット作成には基本形があります！

今回はココでは詳しく説明はしませんが、ウィジット作成には基本形という物があります。コレに関してはネットで調べると色々出てくるのですが、中には現在では使わない方が良い関数を使用しているケースも出てきますので注意が必要です。

WordPressもPHPも常に進化しています。可能な限り新しい関数で対応していくのが良いです。廃止の方向にある関数は可能な限り使わない！

ウィジットの基本形なのですが、クラスをオーバーライド（継承）して使用するものなので、基本形で定義すべき関数を全て記述する必要はありません。

「テキストウィジット」のように「タイトル」「内容」「テキスト」を入力するようなウィジットであればそのような設定する関数を定義する必要があります。しかし今回はウィジットを配置出来れば良いだけのモノなので一番シンプルなウィジット定義で作成することができます。

ソーシャルリンクアイコンのウィジェット化

先にお断りを入れておくと、今回はあくまでも「TwentySeventeen」の標準ソーシャルリンクメニューを利用してフッターに出力出来ているSNSアイコンを表示するためのウィジェット化です。応用は可能ですが自己責任の範囲でお願いします。

ウィジェット化コードは「function.php」ファイルを編集します！作業の前には必ず「function.php」ファイルのバックアップしておいてください。最悪の場合はサイト自体が開かなくなりますので、その時はバックアップしていた「function.php」ファイルをアップロードしてください。

WordPress4.9よりテーマ編集機能が強化されWordPressの画面上で修正がしやすくなったように感じます。今回は下記のコードを「function.php」に追記して下さい。

// SVGアイコン利用のSNSアイコンボタン
class SNS_Button_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(false,'SNSウィジェット');
}
function widget($args, $instance) {
    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_child_get_svg( array( 'icon' => 'chain' ) ),
            ) );
        ?>
        </nav><!-- .social-navigation -->
    <?php endif;
    }
}
add_action('widgets_init', function() {return register_widget("SNS_Button_Widget");});

たったコレだけです！

ウィジェット基本定義と表示部分しかコード記述していない最もシンプルな作りです。ウィジェット名や関数名は自分が好きなように定義して下さい！