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公式プラグインページをご覧ください。

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

プラグインの概要

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

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

ダウンロード


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


Githubページ

インストール

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



設定

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

スクリーンショット 2014-10-28 9.40.13

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

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

使い方

スクリーンショット 2014-11-02 16.03.11

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

スクリーンショット 2014-11-02 16.04.50

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

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

PIP Camera-自撮り無音かめら&写真かぷせる
写真/ビデオ, エンターテインメント無料iOSユニバーサル

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

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

PIP Camera-自撮り無音かめら&写真かぷせる
写真/ビデオ, エンターテインメント無料iOSユニバーサル
Screenshots

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

ショートコード

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

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

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

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

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

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

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

パラメータについて

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

「PIP Camera」リンクが見つかりませんでした。: (WP Applink)

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

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

となります。

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

ショートコードの特徴

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

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

HTMLタグ

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

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

スタイルのカスタマイズ

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

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

HTML構造

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

スクショなしの場合

PIP Camera
カテゴリ: 写真/ビデオ 無料 iOSユニバーサル
App Store

スクショあり(2枚)の場合

PIP Camera
カテゴリ: 写真/ビデオ 無料 iOSユニバーサル
App Store

Screenshots

更新履歴

2015.06.25 v0.1.3 バグ修正、Sass更新
2014.11.02 v0.1.1 リンクエラー時の表示バグを修正
2014.11.02 v0.1

この記事が気に入ったら、シェアしよう