【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】カテゴリーやタグにサムネイルを反映するプラグイン「Taxonomy Thumbnail」

WordPressでサイトを構築して、記事を投稿するとき「カテゴリー」や「タグ」をつけることができます。一般的に「カテゴリー」や「タグ」にはテキストを設定して、表示もテキストを中心にしたものが多く、装飾などはCSSや画像を組み合わせて表現していることが多いと思います。 今回...続きを読む

2016.07.02WordPress

ネイルサロンBrillez(ブリレ)様ロゴ制作

ネイルサロン『Brillez(ブリレ)』様のロゴを制作いたしました。Brillez(ブリレ)はフランス語で輝くの意味があります。 お客様のご要望で、店内はランドマークとなるシャンデリアあり、高級感のある大人の女性の雰囲気なので、ロゴも店内の雰囲気に合わせてデザインをして...続きを読む

2015.01.14ロゴ制作

【ツール】レスポンシブサイトの確認に便利なViewportエミュレーター『Dimensions』

レスポンシブサイトを制作すると、PCやスマートフォン、タブレットでそれぞれ表示が異なるため、表示もそれぞれの端末に合わせたサイズでの確認が必要になります。 そこで便利なツールとして、Google Chromeのアプリに端末サイズごとのシミュレーションができる『Dimen...続きを読む

2015.02.10HTMLコーディング

【フォト】吉田町川尻海岸『幸福呼ぶ鳥居~初日の出~』

静岡県吉田町にある川尻海岸では年始の期間限定で『幸福呼ぶ鳥居』がお目見えします。鳥居に朝日が昇る様子は幻想的です。初日の出の日は、多くの方々でにぎわっていました。 フォトギャラリー ※写真をクリックすると拡大表示します。 [gallery link="file" col...続きを読む

2017.01.01フォトギャラリー

【CSS】linear-gradient(グラデーション)を使ったボタン作成

CSSのlinear-gradient()関数を用いることで画像を使わずとも、グラデーション色のボタンを作成することができます。 ※矢印は、「Font Awesome」、文字はGoogle Fontsの「M PLUS Rounded 1c」を組み合わせております。 ボ...続きを読む

2021.02.19CSSHTMLコーディング