Kanamii

伝えたい想いを自分らしく・・・

kanamii-1019-1

スポンサーリンク

STINGERカスタマイズ

「この記事が気に入ったらいいね!しよう」WordPressプラグイン【VA Social Buzz】のカスタマイズいろいろ

2016/11/03

2016年10月13日追記
プラグイン「VA Social Buzz」バージョン1.1.6へのアップデートによる指定先の変更に対応して、style.cssに追加するコードの修正を行いました。

前回の更新では、無料WordPressテーマ「STINGER PLUS+」のカウント付きソーシャルボタンにRSS・Feedly・Push7を追加するカスタマイズ方法をご紹介しました。

【WordPress】STINGER PLUS+ カウント付きオリジナルソーシャルボタンにRSS・Feedly・Push7を追加する方法

ここでは、当ブログに設置している「この記事が気に入ったらいいね!しよう」のボックスを表示させるプラグイン「VA Social Buzz」の設定方法とカスタマイズ方法をご紹介します。

まず、こちらがデフォルトの表示。
「この記事が気に入ったらいいね!しよう」のボックスの下に、FacebookとTwitterのシェアボタン、Push7の購読ボタン、Twitterのフォローボタンが表示されます。
新サービスのPush7にも対応しているのは嬉しいですね。

kanamii-1019-2

そして、当ブログでのカスタマイズ後の表示です。
デフォルトの素敵な機能を使わないのは勿体ないのですが。。STINGER標準のソーシャルボタンを活かして利用したかったので、FacebookとTwitterのシェアボタン、Push7の購読ボタンを非表示にして、ボックスとTwitterのフォローボタンのみを表示させています。
また、上段の「フォロースペース」と下段の「シェアスペース」の区別がつきやすいようにメッセージも表示させました。

kanamii-1019-3

なんだか、賑やかな・・お祭り騒ぎ的な雰囲気に・・(笑)

それにプラスして、少し落ち着いたバージョンのカスタマイズ方法も追記しました!

kanamii-1019-10

スポンサーリンク

VA Social Buzzのインストールと設定方法

WordPressダッシュボード→プラグイン→新規追加→「VA Social Buzz」と検索して表示されるプラグインをインストールして有効化してください。

kanamii-1019-4

設定は、WordPressダッシュボード→設定→「表示設定」の下の方にあります。

必須項目は、「Facebookページ Webアドレス」と「Twitter アカウント」ですね。
「Facebook App ID」はOGP設定に関わる部分なのかな?と思い、STINGERでの設定を優先させて私の場合は未入力としています。
OGP設定機能のないWordPressテーマをお使いの場合やプラグインでのOGP設定を行っていない場合はFacebookにてアプリケーションIDを取得して入力してください。

※OGPを設定することで、SNSにシェアされた場合の、og:image(画像)、og:title(記事タイトル)、og:description(記事説明文or抜粋文)が正常に取得されるようになります。
▶OGP設定について

他の項目は、お好みに応じて設定、変更を行ってください。

Facebook・TwitterのシェアボタンとPush7の購読ボタンを非表示にする方法

全てのテーマファイルの編集は「子テーマ」で行うことをおすすめします。
親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加します。

  • Facebook・Twitterシェアボタン非表示
  • Push7購読ボタン非表示
子テーマのstyle.cssに追加したコードが反映されない場合は、追加場所を先に入力しているコードの前に変更して再度お試しください。

表示位置の調整

VA Social Buzzのボックスは記事内に表示される仕様なので、当ブログで利用しているWordPressテーマ「STINGER PLUS+」では、ボックスとソーシャルボタンの間にカテゴリー表示が入ってしまうんですね。
なので、テーマファイルを編集して、ボックスのすぐ下にソーシャルボタン、その下にカテゴリーが表示されるように、ソーシャルボタンの表示位置を変更しています。

ソーシャルボタンの表示位置を変更

  1. WordPressダッシュボード→外観→テーマ→テーマの編集→「single.php」を開きます。
  2. パソコンの「Ctrl」キー+「F」で表示される検索欄に下記のコードを入力してマークされる部分をコピー(切り取り)
  3. 下記赤枠の場所にペーストして移動します。
    「Ctrl」キー+「F」で表示される検索欄に<p class="tagst">と入力してマークされる部分のすぐ上です。
    元のコードをコピーした場合は削除してください。kanamii-1019-5

余白を指定するコードを追加

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」を開きます。
下記コードを追加して余白を調整します。

※お好みに応じてpx数を変更できます。

メッセージの追加方法

上段のフォロースペースと下段のシェアスペースの区別をつけたい場合や、ひとことメッセージを添えたい場合など、ボックスの下にメッセージを入れる方法です。

メッセージ本文のコードを追加

WordPressダッシュボード→外観→テーマ→テーマの編集→「single.php」を開きます。
先ほど移動させたコード、<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?>のすぐ上に下記のコードを追加します。

「お好きな文章」の部分は、お好みで。
また、文頭と文末のコード<i class="fa fa-arrow-circle-up" aria-hidden="true"></i>は、Font Awesomeのアイコンフォントのコードですので、ご自分で好きなアイコンをセレクトされてもよいかと思います。
もちろん、削除してしまっても問題ありません。

メッセージのスタイルを指定

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」を開きます。
どちらかお好きなコードを追加してスタイルを指定します。

メッセージのスタイル【1】

kanamii-1019-11

※背景色やフォントカラーなどはお好みで変更可能です。

※ボックス上の余白を指定するコードです。お好みに応じてpx数を変更できます。
ボックス下の余白を調整したい場合は、最後の「}」の上にmargin-bottom:**px !important;を追加してくださいね。
ボックスとメッセージの隙間をなくしたい場合は、**pxの部分に0を指定します。

メッセージのスタイル【2】

kanamii-1019-12

※現在の当ブログでの表示と同じコードです。背景色とフォントカラーをTwitterのフォローボタンスペースに合わせました。
お好みで変更が可能です。

※ボックス上下の余白を指定するコードです。margin-bottom:0を指定することで、ボックスとメッセージをぴったり合わせることができます。
こちらもお好みに応じてpx数を変更してみてくださいね。

以上、「この記事が気に入ったらいいね!しよう」のボックスを表示させるプラグイン「VA Social Buzz」の設定方法とカスタマイズ方法のご紹介でした。

最後までお付き合い下さりありがとうございます。

▶STINGER PLUS+ カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGERカスタマイズ