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

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

feedlyの購読者カウントの取得方法。Yahoo! PipesからAjaxでの取得拒否対策

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

nelog.jp

2015-11-23 16:34

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

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

photo by Robert Scoble

主な手順

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

feedly購読者数取得用のPHPファイルを作成する
カウントを取得するためのJavaScriptを書く
カウント表示用の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()関数を利用してください。