WordPressに独自のPush7ボタンをAPI+PHPで設置する方法

以前、Push7に用意されたHTMLタグを利用してボタンを設置する方法を書きました。

最近、Push7というWEBプッシュ通信サービスに関する記事をよく目にします。 なんでも、プッシュ通信サービスを利用すると、ユ...

けれど、Wordpressテーマのデザインに沿ったPush7ボタンを設置するなら、Push7 APIから必要な情報を取得して、HTMLに反映させる必要があります。(※Push7デフォルトのボタンでもCSSをいじればある程度変更できます)

なので今回は、「WordpressでPHPを用いてPush7のAPIを利用する方法」を紹介したいと思います。

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

主な手順

APIを使用してPush7ボタンを設置する主な手順は以下です。

  1. Push7からAPPNOを取得する
  2. functions.phpに関数を書く
  3. テンプレートで関数を利用する

大まかに書くと、これだけです。

Push7のAPI詳細については、以下を参照してください。

今回は、具体的な使い方のみを紹介します。

Push7からAPPNOを取得する

まずは、Push7にログインして、「アプリケーション設定 → 自動プッシュ設定 → WordPress」を選択してください。

Push7のアプリナンバーを取得する

すると、APPNOが表示されるので、メモしておいてください。

Push7のアプリナンバーをメモする

Push7について詳しくは以下を参照してください。

最近、Push7というWEBプッシュ通信サービスに関する記事をよく目にします。 なんでも、プッシュ通信サービスを利用すると、ユ...

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とスタイルを駆使して書く必要があると思います。

僕の場合は、以下のようなバルーン表示のデザインに対応させています。

Push7のボタン表示例

ソーシャルサービス固有のシェアのボタンって表示が重たいと感じる時はないでしょうか? 特にFacebookのボタンとか。シェアボタンが表示さ...

まとめ

独自で作成するボタンのデザインさえ決まっていれば、PHPを編集できる人ならば、基本コピペのみでできるので、そこまで難しくはないとは思います。

Push7サービス自体が生成するタグで表示するボタン自体も、CSSを変更すれば、ある程度思い通りにデザインを変更することはできます。

Push7独自ボタン

でもやはり、自分の記述スタイルに沿った書き方ができる「API情報を利用した方法」の方が、思い通りのデザインにするには、何かとやりやすかったりします。

追記:JavaScriptで実装する方法は以下です。

前回は、PHPでPush7のAPIを利用してプッシュボタンを実装する方法を紹介しました。 で、今回はPHPを使わずJa...