Pocketのストック数をAjaxで非同期に取得するWordPressカスタマイズ方法

先日、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「Pocketストック数取得関数」を書きました。

WordPressテーマチェッカーでエラーの出ないPocketストックカウントの取得方法

前回、Wordpressのテーマチェッカーでもエラーの出ないGoogle＋のカウント取得方法を書きました。今回はそれのPocketバー...

nelog.jp

2015-10-14 12:38

今回は、その関数を利用してAjaxでPocketのストック数を取得する方法を紹介したいと思います。

主な手順

Pocketのストック数をAjaxで取得するための主な手順は以下です。

Pocketのストック数取得用のPHPファイルを作成する
カウントを取得するためのJavaScriptを書く
カウント表示用のHTML要素を書く

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

Pocketストック数取得用のPHPファイルを作成する

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

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

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

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

PHPファイルの作成

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

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

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

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

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

コードを記入

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

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

//Pocketカウントの取得
function fetch_pocket_count($url) {
  $query = 'http://widgets.getpocket.com/v1/button?v=1&count=horizontal&url=' . $url;
  //URL（クエリ）先の情報を取得
  $result = wp_remote_get($query);
  // 正規表現でカウント数のところだけを抽出
  preg_match( '/<em id="cnt">([0-9.]+)<\/em>/i', $result["body"], $count );
  // 共有数を表示
  return isset($count[1]) ? intval($count[1]) : 0;
}

//URLパラメーターの取得
$url = $_GET['url'];
echo fetch_pocket_count($url);

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

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

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

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

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

<script type="text/javascript">
//ポケットのストック数を取得
function fetch_pocket_count(url, selector) {
  jQuery.ajax({
    url: '<?php echo get_stylesheet_directory_uri(); ?>/lib/fetch-pocket.php?url='+url,
    dataType:'text',
    timeout: 10000, //10sec
  }).done(function(res){
    jQuery( selector ).text( res || 0 );
  }).fail(function(){
    jQuery( selector ).html('error;');
  });
}

fetch_pocket_count(get_permalink(), '.pocket-count');
</script>

これは、.pocket-countクラスのある要素にPocketのストック数を取得し表示させています。

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