dmgadget.net | ディーエムガジェット

Computer全般やデジモノ、ガジェット、アプリ紹介など

NEW ARTICLE
Xone:K2がM1Macで使えるようになりました。Native Instruments Traktor with Allen&Heath Xone k2 on M1 MacBook Air　
  • WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法

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

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

Pocket&Feedly_button_tittle

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

Pocketとは？

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

Feedlyとは？

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

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

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

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

Pocketボタンを追加

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

<li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
      </li>

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

<div id="snsbox03">
  <div class="sns03">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="//b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
    </ul>
  </div>
</div>

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

<div id="snsbox03">
  <div class="sns03">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="//b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
      <li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
      </li>
    </ul>
  </div>
</div>

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に追加しましたが、その下の部分に追加します。先程までのコードはこちら…

<div id="snsbox03">
  <div class="sns03">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="//b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
      <li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
      </li>
    </ul>
  </div>
</div>

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

<li><?php
if ( false === ( $subscribers = get_transient( 'feedly_subscribers' ) ) ) :
    $feed_url = rawurlencode( get_bloginfo( 'rss2_url' ) );
 
    $subscribers = wp_remote_get( "//cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
    $subscribers = json_decode( $subscribers['body'] );
    $subscribers = $subscribers->subscribers;
  
    // 負荷軽減のため半日キャッシュする（数値はお好みで）
    set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 12 );
endif;
?>
<div id="feedly-followers">
<span id="feedly-count" class="fdly-count"><?php echo $subscribers; ?></span>
</div>

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

<div id="snsbox03">
  <div class="sns03">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="//b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
      <li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
      </li>
            <li><?php
if ( false === ( $subscribers = get_transient( 'feedly_subscribers' ) ) ) :
    $feed_url = rawurlencode( get_bloginfo( 'rss2_url' ) );
 
    $subscribers = wp_remote_get( "//cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
    $subscribers = json_decode( $subscribers['body'] );
    $subscribers = $subscribers->subscribers;
  
    // 負荷軽減のため半日キャッシュする（数値はお好みで）
    set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 12 );
endif;
?>
<div id="feedly-followers">
<span id="feedly-count" class="fdly-count"><?php echo $subscribers; ?></span>
</div>
	</li>
    </ul>
  </div>
</div>

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

<a href='//cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fdmtriathlon.info%2F'  target='blank'><img id='feedlyFollow' src='//s3.feedly.com/img/follows/feedly-follow-rectangle-volume-small_2x.png' alt='follow us in feedly' width='66' height='20'></a>

こちらを30行目の

<span id="feedly-count" class="fdly-count"><?php echo $subscribers; ?></span>

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

<div id="snsbox03">
  <div class="sns03">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="//b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
      <li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
      </li>
            <li><?php
if ( false === ( $subscribers = get_transient( 'feedly_subscribers' ) ) ) :
    $feed_url = rawurlencode( get_bloginfo( 'rss2_url' ) );
 
    $subscribers = wp_remote_get( "//cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
    $subscribers = json_decode( $subscribers['body'] );
    $subscribers = $subscribers->subscribers;
  
    // 負荷軽減のため半日キャッシュする（数値はお好みで）
    set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 12 );
endif;
?>
<div id="feedly-followers">
<span id="feedly-count" class="fdly-count"><?php echo $subscribers; ?></span><a href='//cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fdmgadget.info%2Frss'  target='blank'><img id='feedlyFollow' src='//s3.feedly.com/img/follows/feedly-follow-rectangle-volume-small_2x.png' alt='follow us in feedly' width='66' height='20' class="borderless"></a>
</div>
	</li>
    </ul>
  </div>
</div>

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

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

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

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

/* 購読者数つきFeedlyボタン */
#feedly-followers {
    display: block;
}
/* 購読者数の表示部分 */
#feedly-count {
    margin-bottom: 6px;
    width: 62px;  ←カウンタの幅
    height: 31px;  ←カウンタの高さ
    background-color: #FFF;
    position: relative;
    border: 1px solid #669966;
    border-radius: 4px;
    padding: 0 4px;
    font-family: Arial;
    font-size: 16px;
    line-height: 31px;
    text-align: center;
    display: block;
  background: white;
}
/* 購読者数吹き出し部分 */
.fdly-count:after,
.fdly-count:before {
    border: solid transparent;
    content: ' ';
    right: 43%;
    position: absolute;
}
.fdly-count:before {
    border-width: 5px;
    border-top-color: #B0C1D8;
    top: 32px;
}
.fdly-count:after {
    border-width: 5px;
    border-top-color: #FFF;
    top: 30px;
}

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

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

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

最後に

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