Kanamii

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

kanamii-787-1

スポンサーリンク

STINGERカスタマイズ

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

2016/11/17

【2016年11月10日追記】
Feedlyのアイコン画像のファイル名と指定コードが違っているため、アップロードした画像が表示されないことに気がつきました。
記事を参考にして下さった方には大変お手数をおかけいたしますが、こちらにて内容をご確認の上、画像ファイル名の修正をお願いいたします。
ご迷惑をおかけしてしまい申し訳ございません。
こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。

STINGER PLUS+ についている、デフォルトのオリジナルソーシャルボタン。
これ。とても嬉しいですね♪

私の場合、ゼロから自分で作るとなると、かなりの勇気と行動力が必要です。
いや。無理かも?(笑)

ここでは、デフォルトのカウント付きオリジナルソーシャルボタンに、RSS・Feedly・Push7の3種のボタンを追加する方法をご紹介します。

シェア&フォローを下さった皆様、ありがとうございます。

kanamii-787-2

9種類3列での表示だと、スマホ表示では少々歯切れが悪い感じがしますが。。それでも導入してみたいという方は参考にして下さると嬉しく思います。

kanamii-787-5

※こちらでご紹介する追加方法は、FeedlyとPush7のアイコンに画像を使用している関係で、デフォルトのアイコンフォント横のborderはやむを得ず非表示としています。

STINGERへのソーシャルボタンの「追加」のカスタマイズ方法で、「作成」する方法ではありませんのでご了承ください。
スポンサーリンク

「Push7」とは?

Webプッシュ通知サービス「Push7」は、更新ボタンを押して間もなくのタイミングで、更新情報を購読者のブラウザに自動的に送ることができるサービスです。

▶Push7 | Webサイト運営者のための、Webプッシュ通知サービス

対象ブラウザは、Google Chrome・Firefox・Android・ios(アプリ対応)。
購読者側は購読したいサイトのPush7購読ボタンを押し、プッシュ通知を許可するだけという手軽さなので、今後利用する方が増えそうですね。
ユーザー目線で見ても、とても便利な機能なので導入しておくことをおすすめします。

「Push7」導入に必要となる、アカウント登録と自動プッシュ通知を行うためのWordPressプラグインの設定方法については下記ページをご参照ください。

WordPressサイトにPush7を導入する方法と設定手順を簡単4ステップで♪

ソーシャルボタン追加のための事前準備

各項目のリンクを作成

以下、それぞれの項目のリンクをご自身のサイトに合わせてメモ帳に準備しておいてください。

①RSS

http://kanamii.jp//?feed=rss2

※kanamii.jpの部分をご自身のサイトのドメインに書き換えます。

②Feedly

http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fkanamii.jp%2Ffeed%2F

※kanamii.jpの部分をご自身のサイトのドメインに書き換えます。

③Push7

Push7に登録後、ログイン→トップページにて「アプリケーションURL」をコピーします。

kanamii-787-3

Feedly・Push7のアイコン画像をアップロード

今回追加するRSSのアイコンは、他のソーシャルボタンと同じくFont Awesomeのアイコンフォントを使用していますが、現在Font AwesomeにはないFeedlyとPush7のアイコンは、自作の小さな画像を背景画像として使用します。
アイコンフォントを自作するという選択肢もあるようですが、私には敷居が高そう・・。

といっても、めっきり画像加工は苦手分野でして。。ものっすごく頑張ったつもりなんですが、Feedlyのアイコンの中身を上手く透過させることができず。
大きさも違うし自分でも笑っちゃうような画像なんですが、これでもいいよ~という優しい方は、右クリック→「名前を付けて画像を保存」でお持ち帰りください。
大丈夫!こんな画像でもCSSで綺麗に表示できますっ!(笑)

feedly-i push7-i

 

ご自身のパソコンにダウンロードした2つのアイコン画像は、FTPで子テーマフォルダ(stingerplus-child)内の「images」フォルダへアップロードします。(推奨)

もしもFTPでのアップロード方法がわからない場合は、WordPressダッシュボード→メディア→「新規追加」でアップロードしてもOKです。

メディアにアップロードした場合は、アップロードした画像をクリックして表示されるhttp://で始まる画像URLをそれぞれメモ帳にコピーしておいてください。

【画像ファイル名修正のお願い】
2016年11月10日以前に、こちらからダウンロードしていただいたFeedlyの画像ファイル名は「feedly-i-.png」となっておりました。
style.cssで指定したコードと異なっているためこのままでは表示されません。。申し訳ございません。
大変お手数をおかけいたしますが、カスタマイズを行ってくださった方は、FTPにてアップロード済みの画像ファイル名を右クリック→「名前変更」にて、拡張子の前の「-」(ハイフン)を削除して「feedly-i.png」に変更してくださいますようお願いいたします。

sns.phpの編集とコード追加

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

WordPressダッシュボード→外観→テーマ→テーマの編集→「sns.php」を編集してコードを追加していきます。
(トップページのソーシャルボタンにも適用させる場合は「sns-top.php」にも同じ手順が必要となります。)

デフォルトのスマホ非表示コードをコメントアウト

STINGER PLUS+ のカウント付きソーシャルボタンは、シェア数が増えたときのスペースを配慮して、パソコン以外の端末ではテキストが表示されない仕様となっています。
今回追加する3つのソーシャルボタンに合わせて、タブレットやスマホでもテキストを表示させるように下記のコードをあらかじめコメントアウトしておきます。

パソコンの「Ctrl」キー+「F」を押すと表示される検索欄に<?php echo $plug; ?>と入力してマークされるコード内の<?phpのすぐ後ろに//(半角)を入力します。

※ツイートボタン、Facebookボタン、Google+1ボタン、ポケットボタン、はてブボタンの5か所の修正が必要です。
こちらのカスタマイズはSTINGER PLUSをお使いの場合のみお好みに応じて任意で行ってください。
STINGER8・AFFINGER4では必要ありません。

RSS・Feedly・Push7を表示させるコードを追加

下記赤枠で囲んだLINEボタンのコードのすぐ下、</ul>の上の部分にコードを追加していきます。

kanamii-787-4

RSSボタンを表示させるコード

①のリンクの文字を削除して、あらかじめ準備しておいたリンクを張り付けてください。

Feedlyボタンを表示させるコード

②のリンクの文字を削除して、あらかじめ準備しておいたリンクを張り付けてください。

※フォロー数が多くなった場合など、テキストをタブレットやスマホで非表示にしたい場合は、<?php //echo $plug; ?>内の//を削除してください。

Push7ボタンを表示させるコード

③のリンクの文字を削除して、あらかじめ準備しておいたリンクを張り付けてください。

※フォロー数が多くなった場合など、テキストをタブレットやスマホで非表示にしたい場合は、<?php //echo $plug; ?>内の//を削除してください。

style.cssにコードを追加

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

子テーマのstyle.cssに追加したコードが反映されない場合は、追加場所を先に入力しているコードの前に変更して再度お試しください。

アイコンフォント横の縦線を非表示にする

今回追加するFeedlyとPush7のアイコンに画像を使用する関係で表示を揃えるために、下記のコードを追加して、既存のソーシャルボタンのアイコンフォント横のboderを非表示にします。

RSS・Feedly・Push7のスタイルを指定するコードを追加

RSSボタンのスタイルを指定するコード

※背景色とマウスホバー時の背景色を指定

Feedlyボタンのスタイルを指定するコード

※背景色とマウスホバー時の背景色、背景画像にあらかじめアップロードしておいたアイコン画像を指定、テキスト位置の調整。
アイコン画像を「メディア」にアップロードしている場合は、/wp-content/themes/stingerplus-child/images/feedly-i.pngを削除して、http://から始まる画像URLを張り付けてください。

Push7ボタンのスタイルを指定するコード

※背景色とマウスホバー時の背景色、背景画像にあらかじめアップロードしておいたアイコン画像を指定、テキスト位置の調整。
アイコン画像を「メディア」にアップロードしている場合は、/wp-content/themes/stingerplus-child/images/push7-i.pngを削除して、http://から始まる画像URLを張り付けてください。

WordPressプラグイン「SNS Count Cache」の導入と設定

最後に、任意でソーシャルボタンのカウント数を表示させるプラグイン「SNS Count Cache」を導入して設定していきます。

導入と設定自体はとてもシンプルで簡単ですが、ちょっとした事前準備が必要となりますので、詳しくは下記ページをご参照ください。

【STNGER PLUS】ソーシャルボタンへの「SNS Count Cache」導入・設定・カスタマイズ・エラー解決方法

以上、STINGER PLUS+ のカウント付きオリジナルソーシャルボタンにRSS・Feedly・Push7の3種のボタンを追加する方法でした。
最後までお付き合い下さりありがとうございます。

▶STINGER PLUS・STINGER8・AFFINGER4 カスタマイズ全記事一覧へ

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

Twitter で

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

-STINGERカスタマイズ