スポンサーリンク

STINGER・AFFINGERカスタマイズ

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

投稿日:2016年6月15日 更新日:



こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。
2016年11月10日追記
Feedlyのアイコン画像のファイル名と指定コードが違っているため、アップロードした画像が表示されないことに気がつきました。
記事を参考にして下さった方には大変お手数をおかけいたしますが、こちらにて内容をご確認の上、画像ファイル名の修正をお願いいたします。
ご迷惑をおかけしてしまい申し訳ございません。
2018年1月16日追記
Feedlyボタンのエラー対策としてコードに追加するリンクの修正を行いました。
参考Feedlyボタンが機能しなくなったので、修正点を調べたら修正箇所が多すぎたので、動作するボタンを作成できるツールを作った-ものくろぼっくす

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

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

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

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

kanamii-787-2

9種類3列での表示だと、下記のようにスマホとタブレット表示で少々歯切れが悪い感じがするので、RSSを非表示にする方法をこちらに追記しました。

kanamii-787-5

さらに、AFFINGER4のアップデートで変更された新しいデザインに合わせたCSSコードも追記しています。

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

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

スポンサーリンク

「Push7」とは?

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

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

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

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

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

Webプッシュ通知サービス「Push7」は、更新情報を購読者のブラウザに自動的に送ることができる便利なサービス。 実は私もつい最近知ったばかりです。 購読したいサイトの購読ボタンを押して通知を許可する ...

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

各項目のリンクを作成

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

①RSS

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

【SSL化済みの場合】
https://kanamii.jp//?feed=rss2

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

②Feedly

https://feedly.com/i/subscription/feed/http://kanamii.jp/feed

【SSL化済みの場合】
https://feedly.com/i/subscription/feed/https://kanamii.jp/feed

※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またはaffinger4-child)内の「images」フォルダへアップロードします。(推奨)

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

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

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

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

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

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

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

STINGER PLUSのカウント付きソーシャルボタンは、シェア数が増えたときのスペースを配慮して、パソコン以外の端末ではテキストが表示されない仕様となっています。

今回追加する3つのソーシャルボタンに合わせて、タブレットやスマホでもテキストを表示させるように下記のコードをあらかじめコメントアウトしておきます。(STINGER8・AFFINGER4はシェア数が表示されているときのみテキストが非表示となる仕様に変更になっていますので、こちらの作業は必要ありません)

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

※ツイートボタン、Facebookボタン、Google+1ボタン、ポケットボタン、はてブボタンの5か所の修正が必要です。
こちらのカスタマイズは、必要に応じて任意で行ってください。

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

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

kanamii-787-4

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

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

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

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

※フォロー数が増えた場合など、テキストを非表示にしたい場合は、<?php //echo $plug; ?>内の//を削除してください。

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

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

※フォロー数が増えた場合など、テキストを非表示にしたい場合は、<?php //echo $plug; ?>内の//を削除してください。

この時点で表示確認を行っても、テキストが白い文字のため見えません。
CSSで装飾してあげると確認できるようになりますので、続けて次の項目へ進んでくださいね。

style.cssにコードを追加

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

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

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

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

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

デザイン変更前と変更後、どちらかのコードをお使いください。

RSSボタンのスタイルを指定するコード(デザイン変更前)

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

RSSボタンのスタイルを指定するコード(デザイン変更後)New!

Feedlyボタンのスタイルを指定するコード(デザイン変更前)

※背景色とマウスホバー時の背景色、背景画像にあらかじめアップロードしておいたアイコン画像を指定、テキスト位置の調整。

アイコン画像を「メディア」にアップロードしている場合は、/wp-content/themes/stingerplus-child/images/feedly-i.pngを削除して、http://(またはhttps://)から始まる画像URLを張り付けてください。

また、STINGER8をお使いの場合は、上記コード内の/stingerplus-child/の部分を/stinger8-child/に、AFFINGER4をお使いの場合は、/affinger4-child/に修正する必要があります。

Feedlyボタンのスタイルを指定するコード(デザイン変更後)New!

Push7ボタンのスタイルを指定するコード(デザイン変更前)

※背景色とマウスホバー時の背景色、背景画像にあらかじめアップロードしておいたアイコン画像を指定、テキスト位置の調整。

アイコン画像を「メディア」にアップロードしている場合は、/wp-content/themes/stingerplus-child/images/push7-i.pngを削除して、http://(またはhttps://)から始まる画像URLを張り付けてください。

こちらのコードも、STINGER8をお使いの場合は、上記コード内の/stingerplus-child/の部分を/stinger8-child/に、AFFINGER4をお使いの場合は、/affinger4-child/に修正してください。

Push7ボタンのスタイルを指定するコード(デザイン変更後)New!

スマホとタブレットのRSSボタンを非表示に

RSSボタンを非表示にすることで、下記のように8種類4列に収まります。
お好みでコードを追加してくださいね。

kanamii-787-as-1

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

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

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

3,269view
【STNGER PLUS】ソーシャルボタンへの「SNS Count Cache」導入・設定・カスタマイズ方法

こちらのプラグインは、STINGER8・AFFINGER4のオリジナルソーシャルボタンにも利用できます。 WordPressプラグイン「SNS Count Cache」は、オリジナルソーシャルボタンな ...

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

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

Twitter で

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

スポンサーリンク

-STINGER・AFFINGERカスタマイズ

Copyright© Kanamii , 2024 All Rights Reserved Powered by AFFINGER5.