以前、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「feedly購読者数取得関数」を書きました。
今回は、その関数を利用して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()関数を利用してください。
カウント表示用のHTML要素を書く
あとは、feedlyの購読者数を表示させたい箇所(例えば、single.phpや、page.phpなど)に、以下のようなHTMLを挿入すれば、この部分にカウントが取得され表示されます。
<span class="feedly-count">0</span>
Font Awesomeのアイコンフォントや、CSSなどで装飾することで以下のようなバルーンボタンなども作ることができます。
読み込み中
↓
Ajaxによりカウント取得
今回は購読者数取得部分のみに絞って方法を紹介しました。デザイン部分に関しては、自前で行ってください。
バルーンスタイルの書き方などは以下にあります。
まとめ
以前は、外部サーバーの出力結果を取得するのに、Yahoo! Pipesを利用していました。
ただ、2015年10月1日より、サービスが停止になるということで、利用できなくなるようです。(10月2日時点では、まだ使えているようですが)
このように、以前は、外部サービスを経由して、外部サーバーのデータを取得していた場合は、今回のように以下のような手順を踏むことで、クロスドメイン制約を回避することができます。
- PHPで外部サーバーのファイルからデータを取得する
- 同一ドメイン内のPHPファイルをJavaScriptで呼び出すことによって外部データを表示する
とりあえず、急に愛用していたサービスが使えなくなったら、こういった手段もあるということで。
今回のカウント取得のような、時間のかかりそうな処理を、非同期で取得することで、多少はメイン部分の表示が速くなるかもしれません。
加えて、今回の書き方だと、テーマチェッカーで警告の出るようなコードも利用していません。