以前、Push7に用意されたHTMLタグを利用してボタンを設置する方法を書きました。
けれど、Wordpressテーマのデザインに沿ったPush7ボタンを設置するなら、Push7 APIから必要な情報を取得して、HTMLに反映させる必要があります。(※Push7デフォルトのボタンでもCSSをいじればある程度変更できます)
なので今回は、「WordpressでPHPを用いてPush7のAPIを利用する方法」を紹介したいと思います。
目次
主な手順
APIを使用してPush7ボタンを設置する主な手順は以下です。
- Push7からAPPNOを取得する
- functions.phpに関数を書く
- テンプレートで関数を利用する
大まかに書くと、これだけです。
Push7のAPI詳細については、以下を参照してください。
今回は、具体的な使い方のみを紹介します。
Push7からAPPNOを取得する
まずは、Push7にログインして、「アプリケーション設定 → 自動プッシュ設定 → WordPress」を選択してください。
すると、APPNOが表示されるので、メモしておいてください。
Push7について詳しくは以下を参照してください。
functions.phpに関数を書く
次に、functions.phpにPush7情報を取得するための関数を書きます。
//Push7情報取得 function fetch_push7_info(){ $res = null; $app_no = 'APPNO'; if ( $app_no ) { $url = 'https://api.push7.jp/api/v1/'.$app_no.'/head'; $info = wp_remote_get( $url ); if (!is_wp_error( $info ) && $info["response"]["code"] === 200) { $info = json_decode( $info['body'] ); if ( $info ) { $res = $info; } } } return $res; }
APPNO部分は、前項で取得したAPPNOを入力してください。
リクエストは、以下のようなURLを送信します。
https://api.push7.jp/api/v1/APPNO/head
当サイトの場合、リクエストを投げると以下のようなJSON情報を返します。
{ "alias": null, "domain": "nelog.app.push7.jp", "icon": "https://dashboard.push7.jp/uploads/5016dcd1b2cf4456b2ad063fca207c23.png", "name": "寝ログ", "subscribers": 1, "url": "https://nelog.jp/" }
関数では、この返ってきたJSON情報をオブジェクト化したものを返します。
返ってきたJSON情報の中からボタン作成に必要な情報は、domainとsubscribersになります。
domainは、作成するボタンのリンク先情報として利用します。
subscribersは、購読者数です。数字を表示したくない場合は、不要な情報かもしれません。
テンプレートで関数を利用する
最後に、Push7ボタンを表示したい箇所に、以下のように書けば、取得した情報を利用できます。
<?php //Push7ボタン情報の取得 $push7 = fetch_push7_info(); ?> <!-- 購読用のリンクを作成する --> <a href="//<?php echo $push7->domain; ?>">購読する</a> <!-- 購読者数を表示する --> <div class="push7-count"><?php echo $push7->subscribers; ?></div>
上記は、あくまで単純化した例なのでサイトで利用する場合は、自分のサイトデザインに合わせたHTMLとスタイルを駆使して書く必要があると思います。
僕の場合は、以下のようなバルーン表示のデザインに対応させています。
まとめ
独自で作成するボタンのデザインさえ決まっていれば、PHPを編集できる人ならば、基本コピペのみでできるので、そこまで難しくはないとは思います。
Push7サービス自体が生成するタグで表示するボタン自体も、CSSを変更すれば、ある程度思い通りにデザインを変更することはできます。
でもやはり、自分の記述スタイルに沿った書き方ができる「API情報を利用した方法」の方が、思い通りのデザインにするには、何かとやりやすかったりします。
追記:JavaScriptで実装する方法は以下です。