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

 

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

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

サイドバーSNSボタン

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

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

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

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

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

記事下シェアボタン

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

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

※アカウント名の前につく「@」は不要です

Naifix でも採用しているような、Feedly ボタンをバルーン型にする方法は下記の記事が参考になります。

[M]RSSの登録に便利!購読者数付きのバルーンなFeedlyボタンをシェアボタンと一緒に設置してみた

さいごに

簡単にシェアボタンを設置できるプラグインなどは不要なので、ちょっとだけブログが軽くなると思います。逆に、併用すると不具合が生じる可能性が。

もっともっと軽くしたい!という方はこちらの方法をご検討ください。

ツイート数やはてブ数を取得して高速表示できるSNS Count Cache

追尾型のボタンはかなり嫌われているので、導入はおすすめしません…

2013年10月より、おもにWordPress初心者を対象とした指南書がメインのNaifixを開設。2014年3月にカスタマイズ前提のWPテーマ「Gush」を公開。
  • このエントリーをはてなブックマークに追加
  • Pocket

コメント一覧

  1. 西澤 より:

    Ellora様

    以前はスーパーキャッシュのトラブルでアドバイス頂いて有り難う御座いました^^最近エックスドメインの無料サーバーに独自ドメインでgush2をインストールさせていただきました。するとなぜかサイドバーの検索ボックスが2つ縦に並んで表示されています?これは私の環境だけかもしれません。自分では原因がわからず、Elloraさんに検証して頂けないかと思いご連絡しました。お時間のあるときにでも宜しくお願い致します_。

    西澤

    • Ellora より:

      西澤さま

      Gush2をご利用いただき、ありがとうございます!

      検索ボックスはサイドバーにあらかじめ埋め込んであるため、ウィジェットに「検索」が入っていると重複してしまいます。

      ウィジェットから検索ボックスを外すか、サイドバー(sidebar.php)の下記コードを削除してください。

      よろしくお願いします^^

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。