Contents
iTunesのバナービルダーがWPだと表示されない？
iOSアプリを紹介するブログを書くときデフォルトのiTunesのBannerBuilderだとワードプレスでiOSアプリのアイコンが表示されない場合と、アイコンの下になか余計な「App Storeからダウンロード」などのアイコンが表示される。
以下に表示させてみた・・・うまく表示されない。
↑ここに表示させてみたけど見えない？
上にこういうバナーが表示される予定だけど・・・
こんな困ったことになるのでiPhoneアプリを紹介するときになにかよいプラグインかWebサービスなどがないか探してみた。
以下のiTunesのサイトからiOSやMacのアプリのリンクを生成できます。
App Store Insertを試す
こちら2013年に作ってから更新されていないようなのでちょっとメンテナンスが必要。
ダウンロード・解凍したらプラグインのディレクトリにアップロードします。
WPで有効にしてトークンを設定します。
プラグインを有効にします。
-
- 有効にしたら設定します。
-
- 自分のトークンを設定
これで記事作成ページで下のほうに表示されるようになりました。
こんなかんじでiPhone,iPad,Macのアプリが検索できてアイコン付きのリンクを作ってくれるみたいです♪
おおっ！検索したら該当アプリに近いアプリが数個表示されました。
アイコンが表示されないアプリもありますのでこの辺を以下で修正してみます。
CSSを読み込むように設定
なんだかスタイルシートを読み込んで無いようなので”app-store-insert.php”に以下を追加
add_action( 'wp_enqueue_scripts', 'app_store_insert_style' );
function app_store_insert_style(){
wp_enqueue_style('app_store_insert_style', plugins_url('app-store-insert-style.css', __FILE__));
}
CSSを読むと投稿ページが崩れるので変更
app-store-insert-style.cssも変更します。26行目以下すべて削除
サイトのブログページで使うapplication_box以外の記事投稿ページ用のCSSをすべて削除しました。/* style */以下のCSSの.radio、.buttonなど削除。
（ただ、投稿ページのCSSがなくなるので表示がデフォルトになります（汗））
.application_box {
width: 100%;
margin: 0 0 12px 0;
display: block;
float: left;
font-size: 10px;
color: #333;
line-height:120%;
}
.application_box a strong{
font-size: 14px;
}
application_boxも一部変更しました。
一部アイコン画像が表示されない問題
app-store-insert-iframe.php 37行目
$replacement = '$1.100x100-75.$2';
// macSoftware を検索した場合に、.512x512-75 が邪魔なので除去する
$subject = str_replace(".512x512-75", "", $result->{'artworkUrl512'});
↓ 以下のように変更（ついでにアイコンの大きさを75pxに変更しました。）
// macSoftware を検索した場合に、.512x512-75 が邪魔なので除去する
$subject = str_replace(".512x512-75", "", $result->{'artworkUrl512'});
//$replacement = '$1.100x100-75.$2';
if(preg_match("/thumb/",$subject)){
$replacement = '$1.$2';
}else{
$replacement = '$1.75x75-75.$2';
}
こうすると表示されなかったアプリのアイコンが表示されるようになる。↓
上記のようにスクリプトを変更したら「thumb」がつくURLは投稿ページにデカイアイコンが表示されてしまうので、以下のテンプレートのimgタグに「width=\"75\"」を入れてあります。アイコンのサイズを変更する場合はimgタグも一緒に変更してくださいね。
HTMLテンプレート変更
バージョン・サイズ・作者を表示するように以下のように変更しました。（52行目）
// ここから: 投稿に使用するテンプレート
$temp = "<div class=\"application_box\"><a href=\"$software->phgTrackViewUrl\" target=\"itunes_store\"><img width=\"75\" src=\"$software->artworkUrl\"></a><a href=\"$software->phgTrackViewUrl\" target=\"itunes_store\"><strong>$software->trackName</strong></a><br />カテゴリ: $software->genre<br />作者: $software->sellerName<br />Var：$software->version<br />サイズ：$software->fileSize<br />価格: $software->price<br clear=\"both\" /></div>";
// ここまで: 投稿に使用するテンプレート
以上でうまくアイコン付きでiPhoneのアプリをワードプレスで手軽に紹介できるようになりました。
App Store Insertで生成したリンクで作った記事はこの前の記事 ↓ こちらで表示されてますのでご参考までに。
今度はAndroidやWindowsもアイコン付きのアプリ紹介するときに便利なのないか調べてみます。