SNSボタン初期設定とカスタマイズ方法

2014/09/06

Gush2 では、サイドバー上部に Twitter、Facebook、Google+、RSS ボタンを、記事下にはシェアボタンを配置しています。

これらの初期設定とカスタマイズ方法を解説します。

この記事の目次

1 サイドバーSNSボタン
2 記事下シェアボタン
3 さいごに

サイドバーSNSボタン

sidebar.php 上部に記述があります。

<!--アイコン-->
<div class="side-sns">
<!-- thnx! http://www.iconsdb.com/ -->
<ul>
<li><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i>
</a></li>
<li><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i>
</a></li>
<li><a href="https://www.google.com/" target="_blank"><i class="fa fa-google-plus"></i>
</a></li>
<li><a href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i>
</a></li>
</ul>
</div>

<ul>

</a></li>

</a></li>

</a></li>

<li><a href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i>

</a></li>

</ul>

</div>

各アイコンは Font Awesome のアイコンフォントを使用しており、header.php に読み込み用のコードが記述してあります。

このアイコンフォントを使わない場合、header.php の下記コードを削除して、sidebar.php の上記コードを書き換えてください。

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

1	<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

このまま使用する場合は Font Awesome のアイコン一覧からコードをコピペするだけで変更できます。また、アイコン数を増減しても均等に並ぶよう、CSSには「display:table」を指定してあります。

デフォルトのままでOKなら、各SNSアイコンのリンクをご自分のアカウントへのリンクに変更してください。

記事下シェアボタン

投稿記事ページの下部にはシェアボタンを並べており、いずれも公式ボタンを採用しています。sns.php から呼び出しているので、必要に応じてカスタマイズしてください。

初期設定はとくに必要ありませんが、Twitter のコードに data-via=”” という項目があります。ここにアカウント名を入れると、記事がシェアされたときにアカウント名が表示されます。

<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="ここにアカウント名" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a></li>

1	<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="ここにアカウント名" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a></li>