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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

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

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

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

主な手順

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

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

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

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

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

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

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

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

PHPファイルの作成

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

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

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

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

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

コードを記入

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

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

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

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

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

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

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

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

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

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

Pocketのストック数の取得中
読み込み中

Pocketのストック数の取得後

Ajaxによりカウント取得

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

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

jQueryでシェア数を取得し表示を高速化!Wordpressに自作バルーンボタンを作成する全手順まとめ
ソーシャルサービス固有のシェアのボタンって表示が重たいと感じる時はないでしょうか? 特にFacebookのボタンとか。シェアボタンが表...

まとめ

前回、前々回と、取得用APIのないシェア数のAjaxでの取得方法を書きました。

feedlyの購読者数をAjaxで非同期に取得するWordpressカスタマイズ方法
以前、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「feedly購読者数取得関数」を書きました。 ...
Googleのシェア数をAjaxで非同期に取得するWordPressカスタマイズ方法
先日、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「Google+シェア数取得関数」を書きました。 ...

クロスドメイン制約を回避しながら、外部サーバーのデータをJavaScriptで読み込むには、この方法が最も適しているのではないかと思います。(その他にも方法はあるものの、サーバーの設定をいじる必要があったりするので)。