SNSボタン初期設定とカスタマイズ方法
Gush2 では、サイドバー上部に Twitter、Facebook、Google+、RSS ボタンを、記事下にはシェアボタンを配置しています。
これらの初期設定とカスタマイズ方法を解説します。
サイドバーSNSボタン
sidebar.php 上部に記述があります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!--アイコン--> <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> |
各アイコンは Font Awesome のアイコンフォントを使用しており、header.php に読み込み用のコードが記述してあります。
このアイコンフォントを使わない場合、header.php の下記コードを削除して、sidebar.php の上記コードを書き換えてください。
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=”” という項目があります。ここにアカウント名を入れると、記事がシェアされたときにアカウント名が表示されます。
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> |
※アカウント名の前につく「@」は不要です
Naifix でも採用しているような、Feedly ボタンをバルーン型にする方法は下記の記事が参考になります。
[M]RSSの登録に便利!購読者数付きのバルーンなFeedlyボタンをシェアボタンと一緒に設置してみた
さいごに
簡単にシェアボタンを設置できるプラグインなどは不要なので、ちょっとだけブログが軽くなると思います。逆に、併用すると不具合が生じる可能性が。
もっともっと軽くしたい!という方はこちらの方法をご検討ください。
ツイート数やはてブ数を取得して高速表示できるSNS Count Cache
追尾型のボタンはかなり嫌われているので、導入はおすすめしません…
2013年10月より、おもにWordPress初心者を対象とした指南書がメインのNaifixを開設。2014年3月にカスタマイズ前提のWPテーマ「Gush」を公開。
Ellora様
以前はスーパーキャッシュのトラブルでアドバイス頂いて有り難う御座いました^^最近エックスドメインの無料サーバーに独自ドメインでgush2をインストールさせていただきました。するとなぜかサイドバーの検索ボックスが2つ縦に並んで表示されています?これは私の環境だけかもしれません。自分では原因がわからず、Elloraさんに検証して頂けないかと思いご連絡しました。お時間のあるときにでも宜しくお願い致します_。
西澤