Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでスマートアプリのバナーを簡単に追加する方法

WordPressサイトからモバイルアプリを直接宣伝する方法はありますか?答えはイエスで、思ったより簡単です。

これを実現する最もシンプルな方法のひとつが、スマートアプリバナーです。これらの洗練された小さなバナーは、iPhoneやiPadで表示されたときに、あなたのサイトの上部にシームレスに表示され、訪問者にアプリをダウンロードするか、すでにアプリを持っている場合はそれを開くように優しく促します。

スマートアプリバナーは、ダウンロードを促進し、ユーザーを引きつけ、シームレスなモバイル体験を提供する素晴らしい方法です。さらに詳しく知りたい方は、WordPressサイトにバナーを追加する2つの簡単な方法をご覧ください。

How to add smart app banners in WordPress (easy)

なぜWordPressにスマート・アプリ・バナーを追加するのか?

多くのサイトオーナーは、訪問者がモバイルに最適化された方法でコンテンツを閲覧できるコンパニオンモバイルアプリを作成しています。

これらのアプリはモバイル端末向けに設計されているため、多くの場合、より優れたユーザー体験を提供します。また、モバイルプッシュ通知を使って、リマインダー、パーソナライズされたコンテンツ、オファー、更新などを表示することもできます。これらはすべて、エンゲージメント、コンバージョン、売上の増加を意味します。

モバイルアプリをすでにお持ちでない場合は、WordPressサイトをモバイルアプリに変換する方法についての完全ガイドをご覧ください。

スマートアプリバナーを使って、iPhoneやiPadユーザーにモバイルアプリのダウンロードを促すことができます。これは、iOSユーザーがSafariブラウザを使ってサイトにアクセスすると、画面上部に表示されるバナーです。

An example of a smart app banner on a WordPress website

訪問者はバナーをクリックしてApp Storeからアプリをダウンロードすることができます。訪問者がすでにアプリを持っている場合は、バナーが代わりにアプリを開くように促します。このようにして、アプリのダウンロード数とエンゲージメントを増やすことができます。

訪問者がアップル以外の端末やウェブブラウザを使用している場合、WordPressは自動的にバナーを非表示にします。

例えば、次の画像は同じサイトをクロームのモバイルブラウザで表示したものです。

A hidden smart app banner.

それでは、WordPressでスマートアプリのバナーを追加する方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプしてください:

方法1:WPCodeを使う(WordPress全体にスマートアプリのバナーを表示する)

WordPressサイトにスマートアプリのバナーを追加する最も簡単な方法は、WPCodeを使用することです。この無料プラグインを使用すると、1行のコードを使用して、すべてのページと投稿に同じバナーを表示することができます。

WPCodeは、個別iOSアプリケーションを宣伝したい場合に最適です。しかし、異なるページで異なるバナーを表示したい場合は、代わりに方法2を使用することをお勧めします。

WordPressにカスタマイザーのコードを追加する際、サイトのfunctions.phpファイルを編集するように指示するガイドもあります。小さなタイプミスやミスがWordPressの一般的なエラーを引き起こしたり、サイトにアクセスできなくなったりする可能性があります。

WPCodeを使用することで、リスクなくWordPressテーマファイルにカスタムコードを追加することができます。また、ボタンをクリックするだけで、コードスニペットを有効化・無効化することができます。

まず、無料のWPCodeプラグインをインストールし、有効化する必要があります。詳しくは、初心者向けWordPressプラグインのインストール方法をご覧ください。

有効化したら、Code Snippets ” Add Snippetにアクセスしてください。次に、「カスタムコードを追加する(新規スニペット)」設定の下にある「スニペットを使用する」ボタンをクリックします。

Adding an iOS smart app banner to WordPress

カスタムスニペットの作成」ページが表示されますので、コードタイプ名を入力してください。これは参考用ですので、お好きな名前をお使いください。

その後、「コードタイプ」ドロップダウンを開き、「HTMLスニペット」を選択する。

Creating an Apple app banner using WPCode

次のステップでは、アプリケーションのIDを知る必要があります。

この情報を得るには、新しいブラウザータブを開き、Apple Services Marketing Toolsのページにアクセスします。ここで、宣伝したいアプリケーションの名前を入力し、「検索」アイコンをクリックします。

The App Marketing Tools website

検索キーワードに一致するiOSアプリをすべて表示するには、「Apps」セクションまでスクロールするだけです。

ここで、宣伝したいアプリを見つけてクリックします。

Getting the app ID for an iPhone or iPad iOS app

画面の下に「コンテンツリンク」が表示されます。

アプリIDはidと?の間の値です。この情報は次のステップで必要になるので、このタブを開いたままにしておくか、アプリIDをメモしておきましょう。

An Apple App ID

アプリIDを取得したら、WordPressダッシュボードに戻ります。次のスニペットをコードエディターに追加し、アプリIDを前のステップで取得した情報に置き換えてください:

<meta name="apple-itunes-app" content="app-id=12345678">

そうしたら、「インサーター」ボックスまでスクロールしてください。すでに選択されていない場合は、「自動挿入」をクリックし、ドロップダウンメニューから「サイトワイドヘッダー」を選択します。

Adding custom code to the WordPress theme header

準備ができたら、ページを一番上までスクロールし、「Inactive」スイッチを「Active」に切り替える。

最後に、’Save Snippet’ボタンをクリックして変更を保存します。

Publishing a smart app banner to WordPress

これで、WordPressサイトにスマートアプリのバナーが表示されます。

WordPressでスマートアプリのバナーコードをテストする方法

スマートアプリバナーをテストする最善の方法は、Safariモバイルアプリを使ってiOS端末でサイトにアクセスすることです。実際、デスクトップからWordPressサイトのモバイル版を表示しようとしても、スマートアプリバナーは表示されません。

コード・スニペットが機能しているかどうかを素早くチェックする必要がある場合、ブラウザーにあるInspect ツールを使用するのもひとつの方法です。これにより、<meta name>コードがサイトの<head> セクションに挿入されているかどうかを確認できます。

これを行うには、WordPressブログの任意のページまたは投稿に移動します。次に、ページ上の任意の場所で右クリックし、「検査」を選択します。

The Google Chrome Inspect tool

新しいパネルが開き、サイトのコードがすべて表示されます。

<head>セクションを見つけ、矢印をクリックして展開する。

Apple app code in the WordPress header

ここで、前のステップで追加した<meta name="apple-itunes-app">のコードを探します。

このコードが表示されれば、iOS端末にスマートアプリのバナーが表示されるはずです。

Testing the Apple smart app banner code

方法2:スマートアプリバナーを使う(特定のページや投稿にバナーを追加する)

特定のページや投稿日のみアプリを宣伝したい場合もあるでしょう。

この場合、Smart App Bannerプラグインの使用をお勧めします。このプラグインを使用すると、異なるウェブページに異なるバナーを表示し、それらのバナーにアフィリエイトデータを含めることができます。これらの機能により、アフィリエイトマーケッターには最適なプラグインです。

まず、Smart App Bannerプラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。

有効化した後、特定のページや投稿、WordPressのトップページ、またはサイト全体にアプリバナーを追加できます。

手始めに、アプリの設定を見てみよう。ここでは、すべてのページや投稿にバナーを追加したり、コンバージョンの高いランディングページのみにスマートアプリのバナーを追加したりすることができます。

開始するには、設定 ” スマートアプリバナーに 行き、アプリケーションの値を「アプリID」フィールドに入力します。

Adding an app ID to a WordPress plugin

この情報は、方法1で説明したのと同じ手順で入手できる。

アフィリエイト・マーケティングを利用してブログを書いている場合は、アフィリエイト・トークンを「アフィリエイト・データ」フィールドに入力します。情報は様々なので、正しいトークンを取得するには、アフィリエイト・ポータルにログインするか、パートナーに相談する必要があるかもしれません。

その後、「すべてのページに表示」ボックスにチェックを入れるか、チェックを外したままにします。チェックボックスをオフにした場合、アプリのバナーはホームページにのみ表示されます。

Showing a smart app banner across your WordPress blog or website

バナーの設定に満足したら、「変更を保存」ボタンをクリックするだけで、バナーが有効になります。

スマートアプリのバナーを特定のページや投稿に追加したいですか?これにより、サイト上のどこにバナーを表示するかを正確にコントロールできます。

例えば、あなたがアフィリエイトマーケターなら、異なるページで異なるアプリを宣伝し、Googleアナリティクスを使ってどのバナーが最もコンバージョンを獲得したかを確認するかもしれない。

これを行うには、バナーを追加したいページまたは投稿を開くだけです。WordPressのコンテンツエディターで、新しい「Smart App Banner」セクションを見つけてください。

Adding a smart app banner to a WordPress page or post

ここで、アプリIDとオプションのアフィリエイト情報を上記と同じ手順で追加するだけです。

入力した情報に問題がなければ、「更新」または「公開する」をクリックするだけで、変更が反映されます。

An example of a smart app banner on a WordPress blog or website

あとは、この手順を繰り返すだけで、他のランディングページにもスマートアプリのバナーを追加することができます。

WordPressでスマートアプリのバナーを追加するFAQ

WordPressサイトにスマートバナーを追加する方法について、よくある質問をまとめました。

スマートアプリのバナーとは?

スマートアプリのバナーはSafariウェブブラウザの上部に外観表示され、アプリユーザーにアプリを開くか、Apple App Storeからダウンロードするかのオプションを提供する。

スマートアプリのバナーはアップル社によって作成されたため、多くのiOSユーザーが認識する一貫したデザインを持っています。このバナーは、iOS 6以上を搭載したiPhoneやiPadを使用している人にのみ外観が表示されます。

デスクトップにスマート・アプリのバナーが表示されないのはなぜですか?

スマートアプリのバナーは、サイトのモバイル版を表示しても、デスクトップコンピューターには表示されません。

このバナーを実際に見るには、iPhoneまたはiPadでSafariモバイルアプリを使ってサイトにアクセスする必要があります。

iPhoneやiPadでスマート・アプリのバナーが表示されないのはなぜですか?

スマートアプリのバナーは、iOS 6以上を搭載した端末でSafariモバイルアプリを使用している場合にのみ表示されます。スマートアプリのバナーが表示されない場合は、iOSとSafariモバイルアプリの両方が最新バージョンであることを確認することから始めてください。

スマートアプリのバナーは、端末がアプリをサポートできるかどうか、アプリが現在地で利用可能かどうかも検出します。スマートアプリのバナーが表示されない場合は、端末がこれらのチェックに失敗している可能性があります。

Safariでスマートアプリのバナーが消えたのはなぜですか?

x’ボタンをクリックしてバナーの外観を消せば、初期設定では二度と表示されません。

お使いの端末によっては、設定をリセットするために、プライベートブラウザタブを開いたり、キャッシュやCookieをクリアしたり、その他の操作が必要になる場合があります。

このチュートリアルで、WordPressでスマートアプリのバナーを追加する方法を学んでいただけたら幸いです。また、コールトゥアクションのベストプラクティスに関するガイド、またはコンバージョンを急上昇させるWordPressリードマグネットツールのエキスパートピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

5件のコメント返信を残す

  1. Jiří Vaněk

    Is there a similar option for Android device owners, or is it only for the Apple store? I write articles on the topic of Android and this would really come in handy.

    • WPBeginner Support

      We do not have a method we would recommend at the moment for Android users.

      管理者

      • Jiří Vaněk

        I’m sorry because my articles are mostly about Android. But thank you for your response, and I’ll try to find an equivalent plugin for Android and Google Play.

  2. Ralph

    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 Support

      Mobile is definitely a growing way that sites are being viewed :)

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。