サイトの利用者層によっては、モバイルフレンドリーなサイトを持つことが重要かもしれません。これを実現するには、さまざまな画面サイズ/端末に適応するレスポンシブWordPressテーマを使用するか、サイトデザインを変更したくない場合は、モバイル専用バージョンのサイトを作成します。この投稿では、WPTouch Proを使用してモバイルフレンドリーなWordPressサイトを作成する方法を紹介します。
WPtouch Proは、WordPressサイトを最新のスマートフォンブラウザ向けのネイティブモバイル体験に変換できる商用WordPressプラグインです。高速で、完全な国際化サポート、iOSホームスクリーンの統合など、モバイルユーザーエクスペリエンスを向上させる方法が満載です。
WPtouch Proを購入すると、ライセンスキーとプラグインのダウンロードファイルが届きます。あなたのブログにインストールし（簡単なプラグインインストールガイドに従ってください）、ダッシュボードから有効化する必要があります。
有効化すると、プラグインにライセンスキーの入力を促す通知が表示されます。プラグインの更新を受けたり、テーマやアドオンをダウンロードするには、ライセンスキーを入力する必要があります。ライセンスキーを入力するには、「ライセンス有効化」リンクをクリックしてください。
次の画面で、アカウントのメール・アドレス（プラグイン購入時に使用したもの）と製品のライセンス・キーを入力し、有効化ボタンをクリックします。WPTouchがライセンスキーを確認し、成功のメッセージを表示します。
有効化すると、プラグインはWordPress管理バーにWPTouch Proメニュー項目を追加します。プラグインを設定するには、WP Touch Pro ” Core Settingsに行く必要があります。
コア設定画面では、サイトのモバイル版に関する様々なオプションを設定することができます。この画面の最初のオプションは、サイトタイトルとバイラインを変更することです。これは、あなたのサイトがモバイル画面にうまく収まらない長いタイトルと傍線を持つ場合に特に便利です。
この画面の次のオプションは地域化です。WP Touch Proは自動的にWordPressのインストールからサイトの言語を検出しますが、このオプションを使用して手動で言語を選択することもできます。
コア設定画面の表示オプションでは、プラグインを無効化せずにモバイルテーマを手動で無効化することができます。初期設定はNormalで、モバイル端末からサイトにアクセスするすべての訪問者にモバイルテーマの表示を有効化します。プレビューに変更することで、ログイン中のサイト管理者にのみモバイルテーマを表示させることができます。無効化」を選択すると、モバイルテーマの表示を完全にオフにすることもできます。
コア設定ページには高度な設定オプションもあります。例えば、モバイル版サイトのカスタムランディングページを選択することができます。テーマフッターエリアに表示されるカスタムコードを追加することができます。また、すべてのWP Touch Proの設定をバックアップし、WP Touch Proで別のWordPressサイトでそれらをインポートすることができます。ステージングサイトや ローカルインストーラを持っている場合は、このオプションが便利です。
コアの設定ページが表示されたら、このページの下にあるテーマのプレビューボタンをクリックして、モバイルサイトをデスクトップでプレビューすることができます。テーマの見た目に満足したら、「変更を保存」ボタンをクリックして設定を保存します。
WPTouch Pro 3でモバイルテーマを変更する
デフォルト設定として、WPTouch Pro 3には1つのモバイルテーマがプリインストールされています。WPTouch Pro ” Themes & Extensionsから追加のテーマをダウンロードしてインストールすることができます。Bauhaus、CMS、クラシックRedux、Simpleは、すべてのライセンスプランで利用可能なテーマです。 テーマをインストールするには、テーマの下にあるインストールボタンをクリックするだけです。WPTouch Proがクラウドからテーマをダウンロードし、インストールします。テーマがインストールされたら、有効化ボタンをクリックしてそのテーマを使用することができます。
WPTouch Pro3でモバイルテーマをカスタマイズする
モバイルサイトのテーマを選択したら、ニーズに合わせてカスタマイズすることができます。これを行うには、WPTouch Pro ” テーマ設定に移動する必要があります。WPTouch Proのモバイルテーマは高度にカスタマイズ可能です。テーマ設定画面からモバイルサイトのあらゆる面を微調整することができます。テーマ設定のさまざまなセクションを説明します。
トップメニューのタブでは、カスタマイズできるテーマのエリアが表示されます。このタブには、フロントページに表示する投稿数、カテゴリースライダーの有効化、おすすめ投稿スライダーの有効化などの基本的な設定のオプションが含まれています。初期設定はほとんどのサイトに対応していますが、必要に応じて変更することができます。また、いくつかのオプションの横に情報アイコンが表示され、マウスオーバーするとそのオプションのコンテキストヘルプが表示されます。
テーマに変更を加えたら、ページ下部の「テーマのプレビュー」ボタンをクリックして、変更をプレビューすることができます。変更内容に満足したら、「変更を保存」ボタンをクリックしてテーマ設定を保存してください。初期設定に戻したい場合は、リセットボタンもあります。
モバイルテーマの一般設定を構成した後、ブランディングタブに切り替えます。ここでは、独自のロゴ、背景、カスタムフォント、ソーシャルメディアアイコンなどをアップロードできます。また、ロゴやブランドカラーに合わせてテーマカラーを変更することもできます。
サイトをモバイルウェブアプリにする
WPTouch Proでは、サイトをウェブアプリ化することで、モバイル端末の機能を最大限に活用することができます。まず、テーマ設定画面の「ブックマークアイコン」タブをクリックする必要があります。Android端末用とiOS端末（iPhone、iPod、iPad）用の2つのアイコンをアップロードする必要があります。
その後、テーマ設定のWeb-App Modeタブをクリックする。iOSウェブアプリモードを有効化するボックスにチェックを入れると、ウェブアプリモードの高度な設定が表示されます。初期設定を使用することもできますし、独自のカスタム起動画面をアップロードすることもできます。
WPTouch Proでモバイルサイトを収益化する
WPTouch Proテーマは、モバイルサイトに広告を表示することも非常に簡単です。テーマ設定の「広告」タブを開き、Google Adsenseまたはカスタマイザー広告サービスから選択する必要があります。
Google Adsenseの場合は、Google AdsenseのパブリッシャーIDとGoogle Adsenseアカウントから取得できるスロットIDを入力する必要があります。その後、広告を表示する場所を選択します。変更を保存すると、モバイルサイトに広告が表示されるようになります。
WPTouch Proでモバイルサイトのナビゲーションメニューをカスタマイズする
WPTouch Proは初期設定のWordPressメニュー機能を使用しますが、モバイルサイトでのメニュー表示方法を変更または選択することができます。メニューを設定するには、WPTouch Pro ” メニューに移動する必要があります。最初にメニューを選択する必要があります。WordPressのページをメニューに表示するか、既存のメニューを選択することができます。
メニュー設定タブでは、WordPressメニューをさらにカスタマイズすることができます。アイコンをメニュー項目にドラッグするだけで、各メニュー項目にアイコンを関連付けることができます。
初期設定のWPTouch Proには、Elegant ThemesによってデザインされたElegantアイコンセットが付属しています。その横にあるインストールボタンをクリックして他のアイコンセットをインストールしたり、カスタムアイコンセットをアップロードすることができます。
WPTouchは、WordPressを使用したサイトを本格的なモバイルWebアプリケーションに変換するための優れたプラグインです。美しいテーマと強力なカスタマイザー設定オプションにより、コードを一行も書くことなく、数分で見栄えの良いモバイルサイトを作成することができます。この投稿が、WP Touch Proを使ったモバイルフレンドリーなサイト作りのお役に立てば幸いです。フィードバックやご質問は、以下にコメントを残すか、Twitterでフォローしてください。
Wunmi
I want the Mobile view of my Post & Pages to automatically appear in LANDSCAPE VIEW. Please how can this be achieved.
I will appreciate your help.
WPBeginner Support
That would be determined by your theme, you would want to reach out to your theme’s support for if that is an option.
管理者
Kanika
Hello,
I am using the default free version of wptouch and the smart slider that i have used on my website appears well on desktop site but on mobile the slides does not appear.Does that mean i need to buy the pro version of wptouch to make the slider appear?
WPBeginner Support
It shouldn’t be a requirement. If you reach out to wptouch and let them know they should be able to take a look at the issue.
管理者
Justme
How can I view mobile view of my site in local server? I’m using WPtouch plugin, but I can’t view the mobile version on local server.
I guess there should be a link for that.
don
use Google Chrome, preview theme
Ramit Joshi
This is nice plugin, I already use this plugin. i am facing the problem with “Advance custom field” plugin. I am using “ACF” plugin on home page but “ACF” field text not showing on my home page.Somebody tell me either i have to code for “ACF” option in Home page or there is another way to do this.
JAE
OMG you are so awesome! Thank you a million times! I was quoted over $AUD2,000 to mobile friendly my website! This saved me a motza of money – and it was easy to install with your easy to follow instructions! Thanks a ton!
Michael
WPtouch is crap. I purchased the pro version and I was utterly dissapointed with their support. The whole concept is proprietary and has nothing to do with Wordpress standards. Don’t waste your time and money.
Marlies (GM&PB)
Hi,
I just started using this plugin. I used it for the website of the company I work at & for my own blog. I have a weird problem with the icon sets: when I want to install another set of icons (as provided by the plugin) it gives an error and says it cannot install the icon set. Weirdly enough I only experience this problem with my own blog and not with the website of my work.
Is this because my blog isn’t custom, while the website of my work is?
Thanks in advance,
Marlies
guzie
I use the free version of wptouch. But for some reason(s) it reverts the desktop version to the mobile page. How can I fix this.
WPBeginner Staff
Please contact plugin support.
Gaurav Srivastava
Uninstalled. It reverts mobile page version to desktop. It is very annoying.
Kate
I already have a mobile responsive theme of my website…however my astore does not show in full width on a mobile device. It only shows the first two columns of the store…..any suggestions how to solve?
Diena
This plugin sounds great, but wouldn’t it affect the site load time and create redirects?
I want to use it but don’t want to slow my site.
WPBeginner Support
The purpose of serving a mobile theme is to make sure that your site loads faster on mobile devices. The redirects only take place when a mobile device is detected by the plugin.
管理者
Bruce Gerencser
Just one point on your excellent article. You use the Bauhaus theme in this tutorial and it does not work on the iPad. Took me an hour trying to get it to work, only to find out it, as of day, does not work with the iPad. I hope they add this fuctionality in the future because I would really love to use the Bauhaus theme.
Long time reader, first time commenter.
WPBeginner Support
Bruce, thanks for the comment. We would recommend you to contact WPTouch’s support and let them know the issue you are facing.
管理者