【ha-Basic】テーマでサイドバーにSNSシェアボタンを設置する方法

公開日:2019年7月30日 カスタマイズ
Knowledge Base Wordpress ha-Basic テーマ

【ha-Basic】を紹介していたサイトからマニュアルやカスタマイズの記事意向がまだ済んでいない中、次のカスタマイズネタです(笑)。

またこのテーマは自身のサイト用に開発したものを誰かが使ってくれたらいいなぁというものですからのんびり進めていきますのでご容赦ください。

それでは今回は【ha-Basic】テーマのサイドバーウィジェットにSNSのシェアボタンを追加する方法を紹介します。

もちろんこのサイトのサイドバー(下の方)にも表示させていますので、【ha-Basic】使ってて「お、これいいな!」と思った方は導入してやってください。

【ha-Basic】テーマでサイドバーにSNSシェアボタンを設置する方法

こんな風に記事にしてますけど、他のテーマにあるような独自ウィジェットを追加するといった難しいものではありません。もともとこのテーマには「sns.php」というファイルがあり、それを記事本文には挿入しているのでその応用になります。

といってもページの構造からサイドバーのシェアバーはモバイル表示させた場合にはすごく下の方になってしまいますからLINEのボタンは不要だと思いますし、Pocketはあくまでも個人用に一時的にブックマークするようなものですからこちらも不要でしょ!ということで、Facebook、Twitter、はてブの3つだけ表示させるようにしてあります。

出来上がりのソースコードは以下の通り

<?php
	$url_encode=urlencode(get_permalink());
	$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
<div class="share-side">
	<ul>
	<!–Facebookボタン–>
		<li class="facebook">
		<a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
		<i class="fab fa-facebook"></i><span> facebook</span>  <?php if(function_exists( 'scc_get_share_facebook' )) echo scc_get_share_facebook(); ?>
		</a>
		</li>
	<!–ツイートボタン–>
		<li class="tweet">
		<a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
		<i class="fab fa-twitter-square"></i><span>  tweet</span>  <?php if(function_exists( 'scc_get_share_twitter' )) echo scc_get_share_twitter(); ?>
		</a>
		</li>
	<!–はてなボタン–>
		<li class="hatena">
		<a href="//b.hatena.ne.jp/entry/<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fa fa-hatena"></i><span> はてな</span>  <?php if(function_exists( 'scc_get_share_hatebu' )) echo scc_get_share_hatebu(); ?>
		</a>
		</li>
	<!–LINEボタン–>
		<li class="line-sns">
		<a href="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"  onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"> <i class="fab fa-line"></i><span> LINE</span>
		</a>
		</li>
	<!–ポケットボタン–>
		<li class="pocket">
		<a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"  onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fab fa-get-pocket"></i><span> Pocket</span>  <?php if(function_exists( 'scc_get_share_pocket' )) echo scc_get_share_pocket(); ?>
		</a>
		</li>
		</ul>
</div>
これをテキストエディタを起動してコピーし、「sns_side.php」というファイル名で保存してください。
※ファイル形式はUTF-8(Bomなし)にするのをお忘れなく。

このファイルをFTPでha-Basicテーマフォルダ内へアップロードしましょう。

そして通常のテキストウィジェットに以下のショートコードを入れれば完成です。

[myphp file='sns_side']

タイトルや文字列はご自身で考えてください(ちなみに当サイトの場合は完全にお願い調にしてます・・・)

記事下のシェアボタンにもひと工夫しました

モバイルでページを見ると、記事コンテンツの下にサイドバー部分が表示されるため、すごく離れた場所に今回のシェアウィジェットが表示されることとなり、あまりアピールできないので、記事下のSNSシェアバーをモバイル用とパソコン用に分けて表示してみました(興味のある方はこのページ下のシェアボタンを見ていただければわかります)

この仕様にするにはsingle.phpで

<?php get_template_part('sns' ); //シェアボタンの読み込み ?>
というもともとのコードを
	<?php if(wp_is_mobile()): //モバイルのときは?>
		<h2>記事の拡散にご協力をお願いします</h2>
		<p>閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします</p>
		<?php get_template_part('sns_side' ); //シェアボタンの読み込みモバイル用 ?>
		<?php else: //モバイル以外は?>
		<h2>記事の拡散にご協力をお願いします</h2>
		<p class="sns-p">閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします</p>
		<?php get_template_part('sns' ); //シェアボタンの読み込み ?>
	<?php endif; //条件の終了?>
に変更します。

一応条件分岐のところにコメントしてあるので、何がどう?というのはお分かりになると思いますが、上半分がモバイル表示のとき、下半分がそれ以外の時という形になります。

テーマの中にはsingle.phpからいろいろなテンプレート(ファイル)を呼び出していて何がどうなってるの?を把握するのが大変なものもありますが、自作テーマだとテンプレートの構造が100%分かっているのでカスタマイズしやすいですね。


本文のシェアボタンがあるんだからわざわざサイドバーに入れなくても・・と思った方、本文上下のシェアボタンって本当に一般の人がパッと見てシェア用のボタンってわかってるんですかね??私はこれがすごーく疑問に思ったので、ある程度の位置で追従するようにしてしつこくアピールしてみたらどうなるんだろう・・・で設置しました。

SNSでの記事拡散は恐らくSEO対策したりするよりもよっぽど確実でよっぽど効果のある方法だと思いますから、サイドバーに余裕のある方はやってみてくださいね。

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報