Soweeb!

wordpressでスマホとpc用のテーマ(デザイン)を別々にする方法 Device Theme Switcherプラグイン

      2014/08/18

s00029最近はスマートフォンでのアクセス数も増えているサイトオーナーさんも多いかと思います。スマートフォンはpc用のサイトも見れますが、基本的に横幅が狭いのでスマートフォン用のデザインを用意する方も多いかと思います。

スマートフォンに対応させる方法としましてはレスポンシブのテーマを使うとか、WPtouchのようなスマーフォンに対応させるプラグインを使うとかいろいろ方法があります。

WPtouchプラグインを使っている方も多いかと思いますが、デザインがちょっと気に入らないとかあるかもしれませんね。自分でWPtouch用のテーマを作るのありかもしれませんが、作るのも大変かもしれません。

レスポンシブのテーマを使う場合には、これ1つでPCでもスマートフォンでも綺麗に表示してくれますが、広告をpc用とスマートフォン用で別々のものを使いたい、使う必要があるといった場合には不便にはなります。

そこでPC用のテーマとスマートフォン用のテーマを別々にする事でPC用のサイトとスマートフォン用を別々のデザインにすると便利にはなります。今回紹介するのはその方法ですが、それを実現する方法としてDevice Theme Switcherというプラグインを使います。

1,スマートフォン用のテーマを用意する

スマートフォン用のテーマはレスポンシブのテーマを使ってもいいし、自分で作成してもいいでしょう。自分の技量次第でどんなデザインでも作成可能です。とりあえずはレスポンシブのテーマの子テーマでも用意したらいいかもですね。

2,Device Theme Switcherをインストールする

Device Theme Switcherのインストールは簡単です。管理画面のプラグインで新規追加をクリックし「Device Theme Switcher」と検索しましょう。

インストールし有効化します。Device Theme Switcherのインストールは完了です。

3,Device Theme Switcherを設定する

管理画面から外観>Device Themesをクリックします。すると下のような画面になります。
s00035

2つ項目があると思いますが1つがスマートフォン用、1つがタブレット用となります。

Handheld Theme: androidやiphoneなどのスマホ用のテーマ

Tablet Theme: タブレット用のテーマ

2つを適切なテーマに変更します。タブレットはPC用を使いまわしてもいいかもしれませんね。拘りのある方はタブレット用のテーマを作成してみてもよいでしょう。

適切なテーマを選んだらsave settingsを押して設定を保存します。

これで設定は完了です。スマートフォンからテーマが適用されているか確認しておきましょう。スマートフォンでアクセスすると自動的にスマートフォン用のテーマで表示されているはずです。

まとめ

Device Theme SwitcherはPC用のテーマとスマートフォン用のテーマを別々にする場合に便利に使えるプラグインです。インストールも簡単にできるし、設定も簡単です。

スマートフォン用のテーマは別に用意する必要がありますが、レスポンシブデザインのテーマをスマホ用に使ってもよいでしょう。もちちろん自分でスマホ用のテーマを作成してもいいですね。

WPtouchなどのプラグインでスマホ用のサイトを実現するよりも、カスタマイズ性に融通が効くんじゃないかな?という印象です。

 - web製作, wordpress, wordpressプラグイン

大谷翔平選手ホームランで50-50達成!動画など、1日で49、50、51号3本のホームランの大活躍、盗塁51も達成で51-51に!

大谷翔平選手ですが48ー49で迎えた今日の試合で、一気に前人未踏の50-50を達 …

ホリエモン「業務用の米は普通に入ってくる」米は足りてないわけじゃない?

最近スーパーに行っても米が手に入らない状況が続いてます。 今日スーパーに行ってみ …

選挙掲示板は税金の無駄遣い?批判殺到のNHK党ポスタージャックが掲示板の注目度を上げる皮肉な結果に

NHK党のポスタージャックがネット上で話題になっており、概ね批判が多いようには感 …

大谷翔平2024年3試合連続の11号ホームラン、動画など

2024年日本時間5月7日のドジャース対マーリンズの試合ですが、大谷選手が1回裏 …

大谷翔平2024年9号、10号ホームラン映像、動画、海外の反応リンクなど

大谷翔平選手が2024年の5月に入ってから調子がいいようです。 日本時間の5/6 …