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

WordPressで美しいモバイルアプリバッジを追加する方法

WordPressを使ってモバイルアプリのレビューブログを作りたいですか?モバイルアプリのレビューサイトは、ユーザーがアプリを見つけるのに役立つだけでなく、有料アプリにアフィリエイトとして登録することでお金を稼ぐこともできます。この投稿では、WP-AppBoxを使ってWordPressに美しいモバイルアプリバッジを追加する方法を紹介します。

Displaying mobile apps in WordPress with beautiful banners

まず最初にWP-AppBoxプラグインをインストールし、有効化します。有効化したら、設定 ” WP-AppBoxのページでプラグインを設定します。

Settings for WP-Appbox

WP-AppBoxはたくさんの設定ができる強力なプラグインです。まず、設定タブから始めます。ここにはAppboxとバッジの一般的な設定がすべてあります。

初期設定はほとんどのサイトで使えるはずですが、必要であれば見直して変更することができます。

変更を保存するボタンをクリックして、設定を保存することを忘れないでください。

General settings for appbox and badges

アフィリエイトで収入を得たい場合は、アフィリエイトIDタブをクリックし、アプリストアのアフィリエイトIDを入力する必要があります。

現在、プラグインはMac app storeとAmazon Partnernetをサポートしています。

Adding your app store affiliate id

複数投稿者のブログを運営していて、投稿者が自分のアフィリエイトIDを使用したい場合は、カスタマイザーを有効化する必要があります。カスタムIDを有効化することで、投稿者は自分のプロフィールにアクセスし、自分のアフィリエイトIDを追加することができます。

Allowing authors to add their own affiliate IDs

次のステップは、サイトで使用するストアを選択することです。ボタンタブをクリックし、ボタンの動作ドロップダウンメニューからカスタマイザーを選択してください。

Select which stores you want to add

WP-AppBoxは以下のストアをサポートしています:

  • Google Play Apps
  • (Mac) App Store
  • Amazonアプリ
  • Windowsストア
  • WordPress
  • Steamストア
  • Chrome ウェブストア
  • Firefox 拡張機能
  • Firefox マーケットプレイス
  • 古き良きゲーム
  • Opera アドオン

投稿エディターで表示させたい店舗を選択できます。また、店舗ごとにボタンを表示したり、これらのボタンを1つのWP-Appboxボタンの下に追加することもできます。

WordPressの投稿とページにアプリを追加する

WP-Appboxを使えば、投稿やページにアプリを簡単に追加できます。新規投稿を作成するだけで、投稿エディターにappboxボタンが表示されます。

Appbox buttons in WordPress visual post editor

ボタンをクリックすると、投稿に簡単なショートコードが追加されます。例えば、play storeボタンをクリックすると、このようなショートコードが追加されます:

[SKX1]

追加したいアプリを見つけるために、アプリストアにアクセスする必要があります。アドレスバーからアプリIDをコピーし、ショートコードに追加します:

[SKX2]

投稿に複数のアプリバッジを追加できます。完了したら、投稿を保存してプレビューするだけです。

アプリの情報がダウンロードリンク付きの美しいアプリバッジで表示されます。

App badge showcasing an app from play store

アプリバッジのスタイルと外観を変更する

WP-Appboxには、アプリバッジ用の様々なビルトインスタイルが用意されています。プラグインの設定ページにある「App-Badge」タブをクリックして、アプリバッジを選択できます。

Choose a default badge style

ストアごとに異なるスタイルを選択することも、すべてのアプリバッジに初期設定を選択することもできます。

また、ショートコードに “compact”、”Screenshots”、”screenshots-only “のフォーマットを追加することで、この設定を上書きすることもできます。

App banners in compact format

この投稿がWordPressで美しいモバイルアプリバッジを追加するのにお役に立てば幸いです。WordPressで投稿評価システムを追加する方法についてのガイドもご覧ください。

この投稿が気に入った場合は、WordPressの動画チュートリアルをYouTubeチャンネルに登録してください。Twitterや Facebookでもご覧いただけます。

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

8件のコメントLeave a Reply

  1. yarenhausa

    Thank you for sharing, my question is what of if I want use my app link from my wordpress website.

    • WPBeginner Support

      The plugin would allow you to add the links from your site, if you want to link back to your articles, you would need to check with the plugin for if there are plans to add that as an option.

      Admin

  2. Firoz Ahmed

    Thanks man for this beautiful tip, i was trying to add App Box in my Posts but unable but right after showing your SS m now able to add App Boxes in my post.

  3. John

    Greetings. Please i need a url redirect plugin so when a user us leaving my site a count down will show before they are being redirected to the requested page. thanks

  4. Alex D

    Nice article.I was searching for this.I own a tech website so this type of plugin is must have for us.

  5. komal

    its not working in my website.Is is showing

    The app was not found in the store. :-( #wpappbox

    Links: → Visit Store → Search Google

  6. Raghu

    Great info to keep my site visitors entertained

    Thank you.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.