楽ブログ

楽に楽しくやるブログ

スポンサーリンク(レスポンシブ)横長

スポンサーリンク

STINGER PLUS+のSNSシェアボタンをウィジェット化してサイドバーに表示する方法

2016/09/12

SNSボタン

このブログはWordPressで作ってて、テーマとして「STINGER PLUS+」というのを利用させて頂いてるんですが。

記事のすぐ下に、「Twitter」や「Facebook」などのSNSシェアボタンがデフォルトで付いてるんですね。

そのSNSシェアボタンをウィジェット化してサイドバーに表示してみたんで、今回はその方法について記事にしますよと。

ウィジェットでショートコードを使えるようにするための設定

いつものようにショートコードによってウィジェットを作るんで、まずはウィジェットでショートコードを利用できるようにする設定です。

「STINGER PLUS+」などのようにショートコードの設定がある場合は、それで対応してください。

ちなみに「STINGER PLUS+」では、「STINGER設定」の「デザイン・レイアウト関連設定」で、「ウィジェットにショートコードを使用する」にチェックを入れればオッケーですね。

STINGER PLUS+の設定

「STINGER7」などのように設定で対応できるようになっていない場合でも、以下の1行を“function.php”の一番下に追加すれば、ウィジェットでショートコードが利用できるようになりますよ。

add_filter('widget_text', 'do_shortcode');

SNSシェアボタンをウィジェットにするためのショートコード用の関数を作成する

では、ウィジェットでショートコードを使えるようになりましたので、次はSNSシェアボタンをウィジェットにするためのショートコード用の関数の作成になります。

といっても、前述のように元々SNSシェアボタンを表示している仕組みがあるので、それをそのまま移植することにしまして。

対象となるのは“sns.php”というファイルなんですが、その中身をほぼソックリ関数化することにしましたよ。

というわけでチト長いですが、作ったのが以下の関数です。

function sns_widget_func() {
    $variable = '';
    if ( trim( $GLOBALS["stdata12"] ) == '' ) {
 
        $url_encode=urlencode(get_permalink());
        $title_encode=urlencode(get_the_title());
 
        // スマホ表示・非表示
        if(function_exists('scc_get_share_twitter')){
            $plug = 'smanone';
        }else{
            $plug = '';
        }

 
        // 各カウント数
        if(function_exists('scc_get_share_twitter'))  $twit_count = (scc_get_share_twitter()=='0')?'':'<span class="snscount">'.scc_get_share_twitter().'</span>';
        if(function_exists('scc_get_share_facebook')) $face_count = (scc_get_share_facebook()==0)?'':'<span class="snscount">'.scc_get_share_facebook().'</span>';
        if(function_exists('scc_get_share_gplus'))    $gogl_count = (scc_get_share_gplus()==0)?'':'<span class="snscount">'.scc_get_share_gplus().'</span>';
        if(function_exists('scc_get_share_pocket'))   $pckt_count = (scc_get_share_pocket()==0)?'':'<span class="snscount">'.scc_get_share_pocket().'</span>';
        if(function_exists('scc_get_share_hatebu'))   $hate_count = (scc_get_share_hatebu()==0)?'':'<span class="snscount"><span class="hatebno">'.scc_get_share_hatebu().'</span></span>';

 
        // ツイッター名
        if(trim($GLOBALS['stdata25']) !== '') {
            $twitter_name = esc_attr($GLOBALS['stdata25']);
        }else{
            $twitter_name = '';
        }
 
        // 戻り値セットスタート
        ob_start();
 
echo <<< EOD
        <div class="sns">
            <ul class="clearfix">
                <!--ツイートボタン-->
                <li class="twitter">
                    <a onclick="window.open('//twitter.com/intent/tweet?url=$url_encode&text=$title_encode&via=$twitter_name&tw_p=tweetbutton', '', 'width=500,height=450'); return false;">
                        <i class="fa fa-twitter"></i><span class="snstext $plug" >Twitter</span>$twit_count
                    </a>
                </li>
 
                <!--Facebookボタン-->
                <li class="facebook">
                    <a href="//www.facebook.com/sharer.php?src=bm&u=$url_encode&t=$title_encode" target="_blank">
                        <i class="fa fa-facebook"></i><span class="snstext $plug" >Facebook</span>$face_count
                    </a>
                </li>
 
                <!--Google+1ボタン-->
                <li class="googleplus">
                    <a href="https://plus.google.com/share?url=$url_encode" target="_blank">
                        <i class="fa fa-google-plus"></i><span class="snstext $plug" >Google+</span>$gogl_count
                    </a>
                </li>
 
                <!--ポケットボタン-->
                <li class="pocket">
                    <a onclick="window.open('//getpocket.com/edit?url=$url_encode&title=$title_encode', '', 'width=500,height=350'); return false;">
                        <i class="fa fa-get-pocket"></i><span class="snstext $plug" >Pocket</span>$pckt_count
                    </a>
                </li>
 
                <!--はてブボタン-->
                <li class="hatebu">
                    <a href="//b.hatena.ne.jp/entry/$url_encode" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="$title_encode">
                        <span style="font-weight:bold" class="fa-hatena">B!</span><span class="snstext $plug" >はてブ</span>$hate_count
                    </a>
                    <script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
                </li>
 
                <!--LINEボタン-->
                <li class="line">
                    <a href="//line.me/R/msg/text/?$title_encode%0A$url_encode" target="_blank">
                        <i class="fa fa-comment" aria-hidden="true"></i><span class="snstext $plug" >LINE</span>
                    </a>
                </li>
            </ul>
        </div>
EOD;
 
        // 戻り値セットエンド
        $variable = ob_end_clean();
    }
 
    return $variable;
}
add_shortcode('sns_widget', 'sns_widget_func');

これをこのまま、“function.php”の最後に貼り付けてやります。

ざっくり要所の説明をしますと、まず黄字の「スマホ表示・非表示」の部分ですが、これはスマホでサイト閲覧した際に、ボタンの文字を表示しないようにするための記述です。

といってもこれは「SNS Count Cache」というプラグインを入れている場合だけのことでして、このプラグインはシェア数をボタンに表示するためのものなんですが。

スマホだと表示面積が狭いので、シェア数を表示する際は「Twitter」などの文字のほうは非表示にする仕組みになってるんですね。

ちなみに、「'smanone’」になっているところを「’’」にしてやれば、スマホのときも常に文字が表示されるようになりますし。

逆に「’’」になってるところを「'smanone’」にしてやれば、PCで閲覧するときも常に文字が表示されないというようなカスタマイズも出来ます。

次に青字の部分は同じく「SNS Count Cache」というプラグインに関連するんですが、そのプラグインを入れている場合にシェア数をセットするための記述です。

そして赤字の「戻り値セットスタート」というところから、ウィジェットに表示するHTMLドキュメントを関数の戻り値にする変数の中に取り込んでいます。

これには、PHPの標準出力をバッファリングする関数と、“ヒアドキュメント”という仕組みを使ってます。

つまり“ヒアドキュメント”によって標準出力に表示する文字列をそのまま変数にバッファリングしてやって、その変数を関数の戻り値としてるわけです。

ここで重要なのは緑字の終端IDの“EOD;”の前後には、空白や他の文字を書いてはいけないということです。

これはPHPの文法上のルールなんですが、該当行がインデントしてないのはそのせいなんですね。

最後に一番下の行で、「sns_widget」という名前で、この関数がショートコードとして使用できるように定義しています。

CSSでデザインを指定する

次は、見た目のデザインをCSSを使って調整します。

これは簡単で、以下の記述をスタイル指定用のファイル“style.css”の一番下に追加してやるだけです。

#side aside .sns {
    width: 100%;
}
#side aside .sns li {
    width: 50%;
}

前半でウィジェットとしてサイドバーに表示するために、まず全体の幅をサイドバーの領域一杯に広げるために“100%”と指定してやりまして。

次に後半で、元の記事下ではボタンの表示は3列になってますが、サイドバーではそれを2列にするために、ボタン1つの幅を“50%”に指定してやってるんですね。

CSSについては、とりあえずこれだけですが、この辺をいろいろ調整してやるとボタンの大きさや見た目を変えてやることも出来ます。

また、これは「STINGER PLUS+」用の記述でして、他の「STINGER7」などのテーマを使用している場合は、要素の指定が少し変わるかもしれませんのでご注意を。

 ショートコードを使ったSNSシェアボタンのウィジェットを作成する

それでは、いよいよSNSシェアボタンのウィジェットを作ります。

「外観」の「ウィジェット」のページで、“テキスト”のウィジェットを使います。

このウィジェットの“内容”として、以下の1行をセットしてください。

[sns_widget]

この1行で、先に作った関数がショートコードとして動作します。

“タイトル”はサイドバーでの表題になりますので、自由に設定して問題ないです。

以上で、SNSシェアボタンのウィジェットは完成です。

スポンサーリンク

まとめ

既に記事下にSNSシェアボタンがあるので、それ以上必要無いかもしれませんが、サイドバーのトップに置いたり、スクロールに追随するウィジェットとしてSNSシェアボタンを表示させるのも面白いかと。

よろしければ、アナタもお試しあれ。

それでは、楽しいSTINGERライフを!

記事下アフィリウィジェット


こちらは、WordPressの基礎を勉強したい人におすすめの書籍です。

WordPressレッスンブック HTML5&CSS準拠

著者:エビスコム

amazon

楽天で探す

いちばんやさしいWordPressの教本

人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応

amazon

楽天で探す

楽天モーションウィジェット(600×200)スマホ非表示

-ブログの話
-,