多くのアプリ開発者から、「WordPressサイトから直接モバイルアプリを宣伝する方法はありますか?」という質問を受けてきました。答えは「はい」であり、あなたが思うよりも簡単です。
これを行う最も簡単な方法の1つは、スマートアプリバナーを使用することです。これらの洗練された小さなバナーは、iPhoneやiPadで表示されたときにウェブサイトの上部にシームレスに表示されます。
ポップアップのように邪魔ではなく、サイトに自然に溶け込み、訪問者にアプリのダウンロードまたはオープンを優しく促します。その結果?より多くのダウンロード、より良いユーザーエンゲージメント、そしてよりプロフェッショナルなモバイル体験が得られます。
WordPressにこれらのバナーを追加するためのさまざまな方法をテストした結果、あらゆるスキルレベルに完全に機能する2つのアプローチが見つかりました。プラグインを使用したい場合でも、簡単なコードを追加したい場合でも、両方のオプションをステップバイステップで説明します。

WordPressにスマートアプリバナーを追加する理由
多くのウェブサイト所有者は、訪問者がモバイル向けに最適化された方法でコンテンツを閲覧できるコンパニオンモバイルアプリを作成しています。
これらのアプリはモバイルデバイス向けに設計されているため、多くの場合、より優れたユーザーエクスペリエンスを提供します。モバイルプッシュ通知を使用して、リマインダー、パーソナライズされたコンテンツ、オファー、アップデートなどを表示することもできます。これらすべてが、エンゲージメント、コンバージョン、売上の向上につながります。
⭐まだモバイルアプリをお持ちでない場合は、WordPressウェブサイトをモバイルアプリに変換する方法に関する完全なガイドをご覧ください。
スマートアプリバナーを使用して、iPhoneおよびiPadユーザーにモバイルアプリをダウンロードするように促すことができます。これは、iOSユーザーがSafariブラウザを使用してサイトにアクセスしたときに画面の上部に表示されるバナーです。

訪問者はバナーをクリックしてApp Storeからアプリをダウンロードできます。訪問者がすでにアプリを持っている場合は、バナーが代わりにアプリを開くように促します。このようにして、より多くのアプリのダウンロードとエンゲージメントを獲得できます。
訪問者がApple以外のデバイスまたは異なるWebブラウザを使用している場合、WordPressは自動的にバナーを非表示にします。
例えば、次の画像はChromeモバイルブラウザで同じウェブサイトを表示したものです。

それでは、WordPressにスマートアプリバナーを追加する方法を見ていきましょう。簡単なリンクを使用して、使用したい方法に直接ジャンプしてください:
- 方法1:WPCodeを使用する(WordPress全体にスマートアプリバナーを表示する)
- 方法2:Smart App Bannerの使用(特定のページや投稿にバナーを追加する)
- WordPressでスマートアプリバナーを追加することに関するFAQ
方法1:WPCodeを使用する(WordPress全体にスマートアプリバナーを表示する)
WordPressウェブサイトにスマートアプリバナーを追加する最も簡単な方法は、WPCodeを使用することです。この無料プラグインを使用すると、1行のコードで、すべてのページと投稿に同じバナーを表示できます。
これを踏まえると、単一のiOSアプリケーションを宣伝したい場合はWPCodeが最適です。ただし、ページごとに異なるバナーを表示したい場合は、代わりに方法2を使用することをお勧めします。
WordPressにカスタムコードを追加する際、サイトのfunctions.phpファイルを編集するように指示するガイドもあります。これは推奨しません。わずかなタイプミスや間違いでも、一般的なWordPressのエラーが発生したり、サイトにアクセスできなくなったりする可能性があります。
WPCodeを使用すると、リスクなしでカスタムコードをWordPressテーマファイルに追加できます。コードスニペットはボタンをクリックするだけで有効化および無効化できます。
まず、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。
有効化したら、コードスニペット » スニペットを追加 に移動します。「カスタムコードを追加 (新規スニペット)」オプションの下にある「+ カスタムスニペットを追加」ボタンをクリックします。

次に、画面に表示されるオプションのリストから、コードの種類として「HTMLスニペット」を選択する必要があります。

これで、「カスタムスニペットの作成」ページに移動し、コードスニペットの名前を入力できます。
これは参考用ですので、好きなものを使用できます。

次のステップでは、アプリケーションのIDを知る必要があります。
この情報を取得するには、新しいブラウザタブを開き、Apple Services Marketing Toolsページにアクセスします。ここで、プロモーションしたいアプリケーションの名前を入力し、「検索」アイコンをクリックします。

検索語句に一致するすべてのiOSアプリを表示するには、単に「アプリ」セクションまでスクロールしてください。
ここで、プロモーションしたいアプリを見つけてクリックします。

画面の下部には、「コンテンツリンク」が表示されます。
アプリIDは、idと?の間の値です。次のステップでこの情報が必要になるため、このタブを開いたままにするか、アプリIDをメモしておいてください。

アプリIDを取得したら、WordPressダッシュボードに戻ります。次のスニペットをコードエディターに追加し、前のステップで取得した情報でアプリIDを置き換えることができます。
<meta name="apple-itunes-app" content="app-id=12345678">
これが完了したら、「挿入」ボックスまでスクロールします。「自動挿入」がまだ選択されていない場合はクリックし、ドロップダウンメニューから「サイト全体ヘッダー」を選択します。

準備ができたら、ページの上部までスクロールし、「非アクティブ」スイッチを「アクティブ」に切り替えます。
最後に、[スニペットを保存]ボタンをクリックして変更を保存します。

これで、スマートアプリバナーがWordPressウェブサイトに表示されます。
WordPressでSmart App Bannerコードをテストする方法
スマートアプリバナーをテストする最良の方法は、Safariモバイルアプリを使用してiOSデバイスでウェブサイトにアクセスすることです。実際、デスクトップからWordPressサイトのモバイルバージョンを表示しようとしても、スマートアプリバナーは表示されません。
コードスニペットが機能しているかどうかをすばやく確認する必要がある場合は、ブラウザのインスペクトツールを使用する回避策があります。これにより、<meta name>コードがサイトの<head>セクションに挿入されているかどうかを確認でき、期待どおりに機能していることを示唆します。
これを行うには、WordPressブログの任意のページまたは投稿に移動します。次に、ページ上のどこかを右クリックして「検証」を選択します。

新しいパネルが開き、サイトのすべてのコードが表示されます。
単純に<head>セクションを見つけて、その矢印をクリックして展開します。

次に、前のステップで追加した<meta name="apple-itunes-app">コードを探します。
このコードが表示された場合、スマートアプリバナーはiOSデバイスに表示されるはずです。

方法2:Smart App Bannerの使用(特定のページや投稿にバナーを追加する)
特定のページや投稿でのみアプリを宣伝したい場合があります。
この場合、Smart App Banner プラグインの使用をお勧めします。このプラグインを使用すると、異なるウェブページに異なるバナーを表示したり、バナーにアフィリエイトデータを追加したりできます。これらの機能により、アフィリエイトマーケターにとって優れたプラグインとなります。
⚠️ 執筆時点では、スマートアプリバナーはWordPressの最新3つのメジャーリリースでテストされていません。そのため、可能な限りWPCodeの使用をお勧めします。
まず、Smart App Bannerプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
有効化すると、特定のページや投稿、WordPressホームページ、またはウェブサイト全体にアプリバナーを追加できます。
まず、アプリの設定を見てみましょう。ここで、すべてのページや投稿にバナーを追加したり、コンバージョン率の高いランディングページにのみスマートアプリバナーを追加したりできます。
開始するには、設定 » スマートアプリバナー に移動し、アプリケーションの値を「アプリID」フィールドに入力します。

この情報は、方法1で説明されているのと同じ手順に従うことで取得できます。
ブログでアフィリエイトマーケティングでお金を稼ぐ場合、アフィリエイトトークンを「アフィリエイトデータ」フィールドに入力できます。情報は異なる場合があるため、アフィリエイトポータルにログインするか、パートナーに問い合わせて正しいトークンを取得する必要がある場合があります。
その後、「すべてのページに表示」ボックスをチェックするか、チェックしないままにすることができます。ボックスをチェックしないままにすると、アプリバナーはホームページにのみ表示されます。

バナーの設定方法に満足したら、[変更を保存]ボタンをクリックして公開してください。
代わりに特定のページや投稿にスマートアプリバナーを追加したいですか?これにより、バナーが表示される場所をウェブサイト上で正確に制御できます。
例えば、アフィリエイトマーケターであれば、ページごとに異なるアプリを宣伝し、Google Analyticsを使用してどのバナーが最も多くのコンバージョンを獲得しているかを確認できます。
これを行うには、バナーを追加したいページまたは投稿を開くだけです。次に、WordPressコンテンツエディターで新しい「スマートアプリバナー」セクションを見つけます。

ここで、上記のプロセスと同じように、アプリIDとオプションのアフィリエイト情報を追加するだけです。
入力した情報に満足したら、「更新」または「公開」をクリックして変更をライブにします。

次に、これらの手順を繰り返すだけで、他のランディングページにスマートアプリバナーを追加できます。
WordPressでスマートアプリバナーを追加することに関するFAQ
それでも質問がある場合は、WordPressウェブサイトにスマートバナーを追加する方法に関するトップFAQをご覧ください。
スマートアプリバナーとは何ですか?
スマートアプリバナーはSafariウェブブラウザの上部に表示され、アプリユーザーにアプリを開くか、Apple App Storeからダウンロードするオプションを提供します。
Appleによって作成されたため、スマートアプリバナーは多くのiOSユーザーが認識する一貫したデザインを持っています。これらは、iOS 6以降を実行しているiPhoneおよびiPadを使用しているユーザーにのみ表示されます。
デスクトップでスマートアプリバナーが表示されないのはなぜですか?
スマートアプリバナーは、サイトのモバイルバージョンを表示している場合でも、デスクトップコンピューターには表示されません。
バナーがどのように表示されるかを確認するには、Safariモバイルアプリを使用してiPhoneまたはiPadでサイトにアクセスする必要があります。
iPhoneまたはiPadでスマートアプリバナーが表示されないのはなぜですか?
スマートアプリバナーは、Safariモバイルアプリを使用している場合にのみ、iOS 6以降を実行しているデバイスに表示されます。スマートアプリバナーが表示されない場合は、まずiOSとSafariモバイルアプリの両方の最新バージョンを確認してください。
スマートアプリバナーは、デバイスがアプリをサポートできるかどうか、およびアプリがお住まいの地域で利用可能かどうかを検出します。スマートアプリバナーが表示されない場合は、デバイスがこれらのチェックのいずれかに失敗した可能性があります。
Safariでスマートアプリバナーが表示されなくなったのはなぜですか?
「x」ボタンをクリックしてバナーを閉じた場合、デフォルトでは再度表示されません。
モバイルデバイスによっては、プライベートブラウザタブを開く、キャッシュまたはCookieをクリアする、または設定をリセットするために他のアクションを実行する必要がある場合があります。
このチュートリアルでWordPressにスマートアプリバナーを追加する方法を学べたことを願っています。また、CTA(コールトゥアクション)のベストプラクティスや、コンバージョンを急増させるための最高のWordPressリードマグネットツールに関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。

デニス・ムトミ
WPCodeは私が最も役立つと感じたセクションでした。テーマファイルを編集せずに、iOSアプリを持つクライアントを宣伝する方法を探していました。明確な手順をありがとうございます。これにより、彼のアプリを宣伝する時間が大幅に節約できます。
イジー・ヴァネック
Androidデバイスの所有者にも同様のオプションがありますか、それともAppleストアのみですか?私はAndroidをトピックにした記事を書いており、これは非常に役立ちます。
WPBeginnerサポート
現時点では、Androidユーザーにおすすめできる方法はありません。
管理者
イジー・ヴァネック
申し訳ありませんが、私の記事はほとんどAndroidに関するものです。しかし、ご返信ありがとうございます。AndroidとGoogle Playの同等のプラグインを探してみます。
ラルフ
I didn’t know such thing… is a thing
I have technical blog and often get offers of promoting apps for money in my articles and this is great way to do this. Especially that we get more and more mobile traffic. I used to have 60% mobile 40% desktop, but now it is 75% mobile and still growing trend.
WPBeginnerサポート
Mobile is definitely a growing way that sites are being viewed
管理者