WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法

Pocket&Feedly_button_tittle

先日、WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法の記事を投稿しましたが、SNSボタン関係で「Stinger」のSNSボタンにPocketとFeedlyを追加する方法の備忘録も残して置きたいと思ったので今回投稿させて頂きました!PocketとFeedlyって何?と言う方はこちら…

Advertisement

Pocketとは?

携帯総合研究所さんのPocket紹介文章はこちら
あとで読むサービスの「Pocket」アプリが超絶便利すぎる!

Feedlyとは?

CreativememomemoさんのFeedly紹介文章はこちら
Googleリーダーユーザーに送る!!僕が「Feedly」を超オススメする3つの理由

個別記事の下にあるSNSボックスに各ボタンを追加します。

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法デフォルトは上の画像のように表示されてると思いますが…WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法

完成するとこの様な感じになります。デフォルトの状態だとコードをペーストする場所は記事の下のSNSボックスと追従型のSNSボックスと2種類ありますが、追従型の方にボタンを追加してしまうとスマホなどで表示した時に上手く表示されないため、PCからとスマホからのアクセスで表示の仕方を変更するか、あまり使わないボタンを削除して新しい物と交換するなどありますが、その設定するのは面倒くさいのと(笑)追従型のSNSボックスは使用してないので現状の記事下のSNSボックスだけに追加します。

Advertisement

Pocketボタンを追加

まず下記のコードをコピーしてください。特に変更点はありません。

そしてsns.phpを開きます。デフォルトではこんな感じのコードです。

ここの13行目あたりの</li>の後で改行してからペーストします。このようになればOKです。

14行目から16行目に先程のPocketのコードがペーストされました。記事下のSNSボックスを確認して頂き無事に追加されていることを確認します。
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
無事Pocketボタンが追加されました。

Feedlyのボタンを追加

Feedlyのボタンを追加るのですが、こちらはちょっと手間がかかります。先程のsns.phpとstyle.cssの二カ所に記入するコードがあります。

Feedlyのサイトで貼付け用のコードを生成

ご自身のブログ用にFeedlyのサイトで貼付け用のコードを生成します。
Feedlyボタン生成ページへ飛びます! まず追加したいボタンのデザインを選びます。自分は赤で囲まれたボタンにしました。 WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
そしてご自身のブログのURLを入れコンピュータのリターンキーを押します。管理ブログのURLで実際試してみました。
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
するとコードが生成されます。後ほどこのコードを貼付けます。
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法

Feedlyボタンのコードをsns.phpに追加します。

先程Pocketのボタンをsns.phpに追加しましたが、その下の部分に追加します。先程までのコードはこちら…

ここの16行目の後で改行して下記のコードを追加します。

すると下記のようになるはずです。

そして先程ご自身でFeedlyのボタン生成ページで作成したコード。下記のコードは私の管理ブログ用コードなので、ご自身で作成したコードをコピペしてくださいね(笑)

こちらを30行目の

後にペーストします。最終的に下記の様になっていれば問題ありません。

現状こんな感じで表示されてしまいます。

Advertisement

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法これを調整する為にstyle.cssにコードを追加します。

style.cssに調整用のコードをペーストします。

下記のコードをコピーして、style.cssの一番下の空いている所にペースとしてください。

これで完成です!ご自身のブログで表示を確認してください!

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法

このような表示になっていれば問題ありません。

最後に

現状は問題ないのですが、各ボタンの大きさが微妙に違うので気になっています。これを修正する方法も知りたいですね…ほんとStingerは面白い!今回ボタンを追加するにあたって参考にさせて頂いた、おまえは今までスキャンした本の冊数をおぼえているのか?さん、大変参考になりました。ありがとうございました。みなさんもトライしてみてください!

WORDPRESSカテゴリの最新記事