iPhone, iPad, Macアプリのリンクを生成するWordPressプラグイン「WP Applink Shortcode」を作成しました。

iPhone, iPad, MacアプリのPHGリンクを貼り付ける、App Storeアフィリエイト支援ためのWordPressプラグイン「WP Applink Shortcode」を作りました。WordPressのショートコードでリンクを動的に生成したかったのが動機です。
Shortcodeとつけてしまいましたが、HTMLタグでの挿入も可能です。

2017/02/10 追記このプラグインは「WP Applink」として公式にリリースしました｡

詳しくはこちらのWP Applink公式プラグインページをご覧ください｡

WP Applink | e-JOINT.jp
iPhone, iPad, Macのアプリや音楽、映画などiTunes PHGのアフィリエイトリンクを簡単に作成できるWordPressプラグインです。WordPress記事投稿画面内で、検索からリン…
e-joint.jp

注意: 以下古い情報です｡

プラグインの概要

WordPressの投稿画面内でiPhone, iPad, Macアプリを検索して、ショートコードでリンクを表示させるのがやりたかったことなんですが、静的HTMLの生成もできるようにしました。動的生成のショートコードか、静的HTMLのどちらかを選んで貼り付けることが可能です。

ごく簡単な設定と、最小限の工数でリンクを貼り付けできます。スクリーンショットの枚数を指定して表示させることもできます。

ダウンロード

~~Githubで最新版をダウンロード~~

~~Githubページ~~

インストール

上記のzipファイルをダウンロード・解凍し、WordPressのプラグインディレクトリにwp-applink-shorcodeフォルダごとアップロードし、プラグインページにてWP Applink Shortcodeを有効してください。

設定

WordPressの管理メニュー内設定→Applinkを開きます。

設定項目は2つあります。まずは、PHGのアフィリエイト・トークンを入力します。（PHGの登録に関してはここでは割愛します。）

もうひとつは、デフォルトのCSSを使用するかどうかの設定。自前CSSを使う場合は、デフォルトのCSSを使用しないにチェックを入れて、ご自分のスタイルシートに内でスタイルを作成してください。出力されるHTMLの構造はこのページの下の方に書いてあります。

使い方

プラグインを有効にすると、投稿作成画面と、固定ページ作成画面に、WP Applink Shortcodeという名前のボックスが表示されます。アプリの種類を選択し、検索ワードを入力して検索ボタンを押すと、検索結果が一覧表示されます。

上の写真はiPhoneで、cameraと入力してみたところ。検索にマッチしたアプリのアイコン、タイトルなどが表示され、同時に「ショートコード」「HTMLタグ」というボタンが表示されます。

このふたつのの違いについては後述しますが、ここでは「PIP Camera」なるものの「ショートコード」をクリックしました。すると本文内に、アプリリンクを表示させるためのショートコードが挿入され、こんな感じにブログに表示されます。↓

[applink id=”521922264″ title=”PIP Camera”]

次は、同じアプリで、スクリーンショットを表示させてみます。「Screenshot」の数字で、0以外を選択した後に、検索ボタンを押します。この数字が、表示するスクリーンショットの最大枚数となります。

スクショ2枚に設定して、同じく「PIP Camera」の「ショートコード」を挿入。こんなん出来ました↓

[applink id=”521922264″ title=”PIP Camera” screenshot=”2″]

ショートコードとHTMLタグの違い

ショートコード

ショートコードは、アプリリンクを動的に生成します。常にアプリの最新の状態で表示されます。

下記のようなショートコードが作成されます。これは上のPIP Cameraのショートコードです。別にPIP Cameraのまわしものではありません。

[[applink id="521922264" title="PIP Camera"]]

idはアプリのtrackIdとなります。titleはなくても動きますが、アプリのリンク切れの表示に使用されます。また、自分がコードを見てどのアプリが認識できる意味もあります。

スクリーンショット数を1以上にした場合は、

[[applink id="521922264" title="PIP Camera" screenshot="2"]]

[[applink id="521922264" title="PIP Camera" screenshot="2"]]

となります。値の数がスクリーンショットの最大数となります。

パラメータについて

idは必須です。値はアプリのtrackIdとなります。アプリが削除された場合、また、idの値がない場合など、アクティブなtrackIdでない場合、は、リンクエラーとしてこんな表示が出ます。↓

[applink title=”PIP Camera” screenshot=”2″]

titleも自動で作成されますが、これは必須ではありません。削除しても動きます。存在理由としては、

自分がソースコードを見て何のアプリか分かる
上記のリンクエラーの際の表示に利用される

となります。

Screenshotは、値の数が表示するスクショの最大枚数となります。パラメータなし、または1〜5以外の値の場合は表示されません。

ショートコードの特徴

閲覧者がページを読み込んだ際に、リンクが動的に生成されるため、そのときの最新の状態でリンクが表示されます。
これがいいかどうかは考え方だと思いますが…。また、ソースコードがすっきりします。個人的に、これがやりたかったというわけです。

注意点もあります。また、ショートコードは1ページにたくさん入れ過ぎると、ページの読み込みが遅くなってしまいます。1ページに大量に貼る場合は、後述のHTMLタグの貼り付けをおすすめします。

HTMLタグ

静的HTMLを生成し、本文に貼り付けるスタイルとなります。ショートコードに比べ、動作が軽いのが利点です。
HTMLを直に貼り付けるため、はりつけた時点の情報が永劫表示されます。プラグインを無効にしてもソースは残ります。

HTMLタグ構造については下記に記載します。

スタイルのカスタマイズ

独自のCSSを使う際の手順です。

前述の、管理画面設定→ApplinkでデフォルトのCSSを無効にチェックます。
このプラグインのフォルダ内css/wp-applink-shortcode.cssをコピーして、カスタマイズしたものをご自分のテーマ内で読み込んで下さい。また、Sassファイル（wp-applink-shortcode.scss）もありますので、Sasserの方はご利用ください。

HTML構造

CSSをカスタマイズする際の参考にしてください。（実際に挿入されるタグは改行やインデントはされません。）

スクショなしの場合

<div class="wpas-app">
    <a class="wpas-icon software" href="https://itunes.apple.com/jp/app/pip-camera/id521922264?mt=8&uo=4&partnerId=11&at=11l64V" target="itunes_store">
        <figure><img src="http://a1860.phobos.apple.com/us/r30/Purple5/v4/53/71/b4/5371b4a2-ccd5-3b87-cc39-5c99e56af1c0/logo.png"></figure>
    </a>
    <a class="wpas-title" href="https://itunes.apple.com/jp/app/pip-camera/id521922264?mt=8&uo=4&partnerId=11&at=11l64V" target="itunes_store">PIP Camera</a><br>カテゴリ: 写真／ビデオ　無料　iOSユニバーサル<br>
    <a class="wpas-btn" href="https://itunes.apple.com/jp/app/pip-camera/id521922264?mt=8&uo=4&partnerId=11&at=11l64V" target="itunes_store">App Store</a>
</div>

スクショあり（2枚）の場合

<div class="wpas-app">
    <a class="wpas-icon software" href="https://itunes.apple.com/jp/app/pip-camera/id521922264?mt=8&uo=4&partnerId=11&at=11l64V" target="itunes_store">
        <figure><img src="http://a1860.phobos.apple.com/us/r30/Purple5/v4/53/71/b4/5371b4a2-ccd5-3b87-cc39-5c99e56af1c0/logo.png"></figure>
    </a>
    <a class="wpas-title" href="https://itunes.apple.com/jp/app/pip-camera/id521922264?mt=8&uo=4&partnerId=11&at=11l64V" target="itunes_store">PIP Camera</a><br>カテゴリ: 写真／ビデオ　無料　iOSユニバーサル<br>
    <a class="wpas-btn" href="https://itunes.apple.com/jp/app/pip-camera/id521922264?mt=8&uo=4&partnerId=11&at=11l64V" target="itunes_store">App Store</a>
    <div class="wpas-screenshot">
        <p class="wpas-caption">Screenshots</p>
        <div class="wpas-screenshot-inner">
            <figure><img src="http://a5.mzstatic.com/jp/r30/Purple4/v4/15/48/b5/1548b5d4-5e40-2204-5c9a-eee1b69684a2/screen1136x1136.jpeg"></figure>
            <figure><img src="http://a1.mzstatic.com/jp/r30/Purple6/v4/bf/ea/59/bfea59a7-2791-7038-ec0a-fade7d8451b0/screen1136x1136.jpeg"></figure>
        </div>
    </div>
</div>