iscle [イズクル] - あなたの生活に役立つネタを!

WodrPressでスマホサイトに対応させる方法(オリジナルテーマ編)

竹中文人
執筆者:
[最終更新日]2017/06/29
[カテゴリ]Web・IT, Wordpress

ブログシステムとしてWodrPress(ワードプレス)を利用しているサイトがとても多くなりました。WodrPressはスマートフォンに表示を対応させることも簡単にできて人気ですね!

スマホ対応(モバイル対応)させる方法は「レスポンシブデザイン」か「スマホ用のテーマ(テンプレート)を適用する」という方法があります。それぞれメリット・デメリットはあるのですが、私の場合はモバイル対応は後者を選択しています。

今回は、WodrPressでスマホ用のテーマを用意して適用させる方法について紹介いたします。

モバイル用のテーマを用意する

まず最初にモバイル用のテーマを用意しておく必要があります。
「テーマを持っていないよ!」という方は、イズクルからモバイルテーマを無料プレゼント致します!イズクルでも利用しているオリジナルテーマです。

ダウンロードは下記のページからできますので、ぜひご活用ください。
WordPress用スマホのテーマを無料でダウンロード

モバイル用のテーマが用意できたら、「外観」→「テーマのインストール」かFTPでサーバーにアップしてください。※テーマを有効化する必要はありません。

スポンサーリンク

『WPtap Mobile Detector』を入れる

『WPtap Mobile Detector』はしばらく更新されていないため、代わりに『Multi Device Switcher』をお勧めします。

モバイル対応させるために『WPtap Mobile Detector』というプラグインを入れます。

上記URLからプラグインをダウンロードして、管理画面の「プラグイン」→「新規追加」→「アップロード」からダウンロードしたプラグインをインストールし、有効化します。

smart06有効化すると管理メニューの項目に「Mobile Detector」が表示されますので、その中の「Add Device」をクリックします。

Androidのモバイル端末に対応させるために、Mobile Device name:には「Android-mo」、Mobile Device agent:に「Android.*Mobile」を記入して下さい。

smart02

次に「Mobile Detector」の「Setting」をクリックします。

モバイル用テーマで表示させたいデバイスの「Mobile Themes」の部分を、モバイル用テーマ名に変更して「Update」をクリックします。上から2番目の「Android」はタブレットですので、スマホのAndroidの指定は先ほど設定した「Android-mo」です。

設定例

この設定だけで、スマホでサイトにアクセスしたときにスマホ用のテーマで表示がされるようになります。

関連記事(一部広告含む)