Tweet

Pocket

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

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

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

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

使い方

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

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

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

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

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

その他設定（ユーザーエージェント）

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

その他設定（PC Switcher）

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