feedlyの購読者数をAjaxで非同期に取得するWordPressカスタマイズ方法

以前、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「feedly購読者数取得関数」を書きました。

以前feedlyの購読者数を「Yahoo! Pipes(サービス終了)」を経由して、Ajaxで取得する方法を書きました。 ただこの...

今回は、その関数を利用してAjaxで購読者数を取得する方法を紹介したいと思います。

そのようにすることで、多少時間のかかるカウント数の取得を後回しにすることができ、多少はWordpressのメイン部分の読み込みを速くすることができるかもしれません。

photo by Robert Scoble

スポンサーリンク
レクタングル(大)広告

主な手順

feedly購読者数をAjaxで取得するための主な手順は以下です。

  1. feedly購読者数取得用のPHPファイルを作成する
  2. カウントを取得するためのJavaScriptを書く
  3. カウント表示用のHTML要素を書く

基本的にコピペだけで、Ajaxでのカウント取得部分を実装することができます。

feedly購読者数取得用のPHPファイルを作成する

まずは、自分のドメイン内(テーマ内)にカウント取得用のPHPファイルを作成します。

このPHPファイルをJavaScriptで呼び出すことで、カウントを取得します。

テーマ内に、カウント取得用のPHPファイルを置いて、それをJavaScriptで呼び出すことによって、同一ドメイン内で呼び出されることにより、クロスドメイン制約を回避します。

クロスドメイン制約とは、ブラウザの機能で、閲覧しているページのドメイン以外のドメインからは、Ajax通信をさせないというセキュリティー上の制約です。

PHPファイルの作成

まずは、PHPファイルを作成します。

とりあえず僕は、テーマ(子テーマ)内に「lib」というフォルダを作成して、その中に「fetch-feedly.php」というファイルを作成します。

構造としては以下のようになります。

テーマフォルダ/lib/fetch-feedly.php

libフォルダに入れたのは、他のテーマテンプレートと、ごっちゃにしないためです。

コードを記入

で、先程作成したfetch-feedly.phpファイルに以下のようにコードをコピペします。

<?php //feedlyカウントの非同期取得用
//外部のphpからWordpress のAPIを扱う
require_once('../../../../wp-load.php');

//feedlyの購読者数取得
function fetch_feedly_count(){
  $feed_url = rawurlencode( get_bloginfo( 'rss2_url' ) );
  $res = '0';
  $subscribers = wp_remote_get( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
  if (!is_wp_error( $subscribers ) && $subscribers["response"]["code"] === 200) {
    $subscribers = json_decode( $subscribers['body'] );
    if ( $subscribers ) {
      $subscribers = $subscribers->subscribers;
      set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 12 );
      $res = ($subscribers ? $subscribers : '0');
    }
  }
  return $res;
}

//URLパラメーターの取得
echo fetch_feedly_count();

以下の部分は、Wordpressのインストールフォルダにあるwp-load.phpファイルを呼び出すことで、Wordpress関数などを使えるようにしています。

//外部のphpからWordpress のAPIを扱う
require_once('../../../../wp-load.php');

カウントを取得するためのJavaScriptを書く

次に、Ajax側からカウント取得用のfetch-feedly.phpファイルを呼び出して、購読者数を得ます。

フッターの</body>手前あたりで以下のように呼び出します。

<script type="text/javascript">
//feedlyの購読者数を取得
function fetch_feedly_count(selector) {
  jQuery.ajax({
    url: '<?php echo get_stylesheet_directory_uri(); ?>/lib/fetch-feedly.php',
    dataType:'text',
    timeout: 10000, //10sec
  }).done(function(res){
    jQuery( selector ).text( res || 0 );
  }).fail(function(){
    jQuery( selector ).html('error');
  });
}

fetch_feedly_count('.feedly-count');
</script>

これは、.feedly-countクラスのある要素にfeedly購読者数を取得し表示させています。

上記コードは、「子テーマ」でカスタマイズすることを前提に書いたコードです。親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()ではなく、get_template_directory_uri()関数を利用してください。

カウント表示用のHTML要素を書く

あとは、feedlyの購読者数を表示させたい箇所(例えば、single.phpや、page.phpなど)に、以下のようなHTMLを挿入すれば、この部分にカウントが取得され表示されます。

<span class="feedly-count">0</span>

Font Awesomeのアイコンフォントや、CSSなどで装飾することで以下のようなバルーンボタンなども作ることができます。

読み込み中のfeedlyボタン

読み込み中

カウントが取得されたfeedlyボタン

Ajaxによりカウント取得

今回は購読者数取得部分のみに絞って方法を紹介しました。デザイン部分に関しては、自前で行ってください。

バルーンスタイルの書き方などは以下にあります。

ソーシャルサービス固有のシェアのボタンって表示が重たいと感じる時はないでしょうか? 特にFacebookのボタンとか。シェアボタンが表示さ...

まとめ

以前は、外部サーバーの出力結果を取得するのに、Yahoo! Pipesを利用していました。

先日、Pocketのシェア数をJavaScriptだけで取得する方法を書きました。上の記事は、Google+のシェア...

ただ、2015年10月1日より、サービスが停止になるということで、利用できなくなるようです。(10月2日時点では、まだ使えているようですが)

このように、以前は、外部サービスを経由して、外部サーバーのデータを取得していた場合は、今回のように以下のような手順を踏むことで、クロスドメイン制約を回避することができます。

  1. PHPで外部サーバーのファイルからデータを取得する
  2. 同一ドメイン内のPHPファイルをJavaScriptで呼び出すことによって外部データを表示する

とりあえず、急に愛用していたサービスが使えなくなったら、こういった手段もあるということで。

今回のカウント取得のような、時間のかかりそうな処理を、非同期で取得することで、多少はメイン部分の表示が速くなるかもしれません。

加えて、今回の書き方だと、テーマチェッカーで警告の出るようなコードも利用していません。