【WP】モバイル端末用にテーマを切り替えるプラグインのまとめ

wordpress-mobile-device-switche-index

先日のGoogleのウェブマスター向け公式ブログ「検索結果をもっとモバイルフレンドリーに」の記事にもあったように、モバイル端末によるウェブサイトの利用がシェアを伸ばしてきていることでウェブサイトのモバイル端末への最適化も重要な課題になってきていると思われます。

今回は、WordPressによってウェブサイトを構築している場合のモバイル端末へ対応に役立つプラグインをご紹介したいと思います。

WordPressにおけるモバイル端末への最適化

WordPressではデータベースに蓄積されているタイトルや本文などのデータが、デザインが施された「テーマ」に沿って成形され、ウェブサイトとして公開されるようになっています。

wordpress-mobile-device-switche

そのためモバイル端末に対応したい場合「テーマ」ファイルを切り替えることで対応することが可能です。今回、ご紹介するプラグインは主にアクセスされる端末によって「テーマ」ファイルを切り替えるためのプラグインになります。

Multi Device Switcher

「Multi Device Switcher」は国産のプラグインで、スマートフォン、タブレットなどの端末ごとに「テーマ」を設定することが出来るようになります。端末を判断するためのユーザーエージェントもカスタマイズすることができます。パソコン用、スマホ用と切り替えるスイッチを作ることも可能です。

multi-device-switcher

Any Mobile Theme Switcher

「Any Mobile Theme Switcher」も同様にスマートフォン、タブレットなどの端末ごとに「テーマ」を設定することが出来るようになります。パソコン用、スマホ用と切り替えるスイッチを作ることも可能です。

any-mobile-theme-switcher

Device Theme Switcher

「Device Theme Switcher」も同様にスマートフォン、タブレットなどの端末ごとに「テーマ」を設定することが出来るようになります。パソコン用、スマホ用と切り替えるスイッチを作ることも可能です。

device-theme-switcher

WPtouch Mobile Plugin

「WPtouch Mobile Plugin」はWordPressでスマートフォンの最適化というと定番といわれているプラグインです。上記の3つと異なりスマートフォン用のテーマが含まれている形で提供されています。テーマを切り替えてデザインを変える点では同じような仕組みで動いています。

WPtouch-mobile-plugin

関連記事

【WP】ログインページをカスタマイズする方法

WordPressのログインページはプラグインなどを利用してカスタマイズすることができます。 今回は、プラグインを使わずにアクションフックを利用してWordPressのログインページで利用されるCSSをカスタマイズしてオリジナルのデザインに変更する方法をご紹介します。 ...続きを読む

2015.02.25WordPress

【デザイン】HTML5を使用したアニメーションサイト

HTML5より新しく登場した「Canvas」などによって、AdobeのFlashのような動的な2次元グラフィックを、HTML形式ファイルをベースに制作することができるようになりました。 今後、デザインとして設計されるのはもちろん、アニメーションやゲーム、WEBアプリケー...続きを読む

2015.02.16インスピレーション

静岡洋館巡り「旧マッケンジー住宅」フォトギャラリー

国登録有形文化財「旧マッケンジー住宅」を見てきました。旧マッケンジー住宅は、明治から昭和初期にかけて活躍した建築家のウィリアム・M・ヴォーリズによる設計です。現在にでも通じるシステムキッチンや浴室があり、70年以上前とは思えないほどの設備が整っています。 概要(引用) ...続きを読む

2015.04.06フォトギャラリー

【WP】シンプルなショッピングカートを導入できるプラグイン「WP−OliveCart」

今回紹介するプラグイン「WP-OliveCart」は、WordPressでショッピングカートを追加することができるプラグインです。無料版と有料版の2つがあり、国産プラグインで、日本語に対応したプラグインになっております。無料版では「ショッピングカート機能」「商品管理機能」、有料版...続きを読む

2018.11.19WordPress

生成AIでHTML/CSS構築するなら「先に設計→後でAI」が安全な理由

ここまでの記事で、 AIが書いたHTMLが読みにくくなる理由や、 AI生成CSSが後から直しづらくなる構造、 Bootstrap・Flexbox・CSS Gridが混ざったときの違和感について整理してきました。 それらを振り返ってみると、 実は多くの...続きを読む

2026.01.09AI活用BootstrapCSS生成AI