さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【WordPress】スマホ版テーマなどを切り替えて表示するプラグイン「Multi Device Switcher」

Pocket
LINEで送る

スマホ版のテーマ作成がようやく完成しました!

Nucleusで使用していたHTMLファイルを流用して作成していたのでもっと簡単に出来るかと思っていたのですが、思いのほか手こずってしまい時間が掛かってしまいました。

ウィジェットの切り分けとかなかなかうまくいかなくてまいりましたが、ようやく見れるぐらいにはまとまりました。
ただ、自分のアンドロイドのスマホでしか確認出来ていないので若干心配はありますが、おかしなところがありましたらご指摘いただけるとたすかります。

さて、スマホ版のテーマの表示切替ですが、「Multi Device Switcher」というプラグインを使用しました。

使い方

1)スマホ用のテーマを事前にインストールしておきます。(※有効化はしなくてよい)

2)WordPressの管理画面で、プラグインの新規追加で「Multi Device Switcher」を検索してインストールし有効化します。

3)管理画面の「外観」メニューの中の「マルチデバイス」メニューをクリック。

メニュー画面

4)マルチデバイスの設定画面の「テーマ」タブのページが表示されますので、「スマートフォン用テーマ」のセレクトメニューから、事前にいストールしておいたスマホ用のテーマを選択して「変更を保存」をクリック。
※スマホ用の他にもテーマを用意している場合は、それに対応したセレクトメニューが選択してください。

設定メニュー「テーマ」タブ

これだけで自動で切り替えて表示してくれます。

その他設定(ユーザーエージェント)

マルチデバイスの設定画面で「ユーザーエージェント」タブをクリックすると、どのデバイスをどのテーマで表示するかを細かく割り振ることができます。

設定画面「ユーザーエージェント」

その他設定(PC Switcher)

マルチデバイスの設定画面で「PC Switcher」タブをクリックすると、スマホ用テーマでページを表示した際にPC版への切り替えリンクを表示するかどうかを設定することができます。
また、プラグインデフォルトのCSSを使用するかどうかも設定できます。

設定画面「PC Switcher」タブ

カテゴリー:プラグイン, WordPress

コメントを残す

コメント内容