トップページ > サイト作成 > CMS > Wordpress > Wordpress でスマホとパソコンのユーザエージェントでテーマを切り替える方法

Wordpress でスマホとパソコンのユーザエージェントでテーマを切り替える方法

Wordpress は HTML と CSS をゼロから用意せずともテーマをインストールするとすぐに利用できるが、基本的にスマホ版とパソコン版などデバイスで共通でテーマを利用するようになっているが、プラグインを利用することでユーザエージェントでスマホ版とパソコン版のテーマを切り替えて表示する方法について紹介する。

Wordpress でスマホとパソコンのユーザエージェントでテーマを切り替える方法

1. 一般的なデバイスごとに HTML を切り替える方法

スマホとパソコンなどデバイスごとに HTML を切り分ける方法は一般的に 2 つの方法が挙げられる。
1 つ目は、スマホ版とパソコン版のディレクトリを分け、それぞれのデバイスに合わせてデザインした HTML や CSS を用意する方法である。
厳密には切り替えるのではなく、閲覧者がスマホ版かパソコン版か任意で選択して表示させる運用となる。
プログラムなどを利用することなくデバイスごとにウェブサイトを用意するため管理しやすく、比較的安価に構築できるメリットがある。

2 つ目はアクセスしてきたデバイスがスマホかパソコンかを判別して自動的にアクセスしてきたデバイスに合わせた HTML や CSS を表示する機能を利用することである。
どのようなデバイスでアクセスされたかはユーザーエージェントと呼ばれる情報を用い、Web サーバのアクセスログには一般的に残るようになっている。

2. ユーザエージェントとは

ユーザエージェントとは、ウェブサイトやブログにアクセスしてきたブラウザや OS の情報のことであり、Web サーバのアクセスログに残るものである。 ユーザーエージェントはブラウザのバージョンも知ることができ、例えば Android でアクセスすると次のような情報を知ることができる。

Mozilla/5.0 (Linux; Android 11; SO-52A) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.85 Mobile Safari/537.36

上記の例では Android 端末の SO-52A で OS のバージョンは 11、並びにブラウザは Chrome でバージョンは 94 が利用されていることがわかる。
ただし、ユーザーエージェントは自己申告制のため、ブラウザのツール等を利用すれば書き換えて詐称することできるので必ずしも正しいユーザエージェントとは限らない点、注意が必要である。

3. Wordpress でスマホ版とパソコン版でテーマを変える方法

ユーザエージェントを利用してスマホ版とパソコン版の HTML を切り替える仕組みは PHP などプログラムで自作することが可能だが、Weordpress ではプラグインとして提供され利用することができる。
今回は UserAgent Themes Switcher を利用してユーザエージェントに応じてテーマを変えることとする。

3-1. プラグインの一覧を表示

ユーザエージェントごとにテーマを切り替えるプラグインを利用するために、Wordpress の管理画面の左メニューより「プラグイン」をクリックしてインストールされているプラグインの一覧を表示する。

インストール済みのプラグイン一覧を表示

プラグイン一覧の画面が表示されれば、画面上部にあるボタン「新規追加」をクリックする。

3-2. プラグインを新規追加

プラグインの「新規追加」を押すと下図のようにおすすめのプラグイン一覧が表示される。
画面右上のプラグインの検索入力欄に今回インストールする予定の「UserAgent Themes Switcher」と入力する。

プラグインの検索

3-3. UserAgent Themes Switcher をインストール

プラグインの検索欄に「UserAgent Themes Switcher」を入力すると画面下部に該当するプラグインが複数表示されるため、UserAgent Themes Switcher であることを確認した上でボタン「今すぐインストール」をクリックする。

今すぐインストールをクリック

3-4. UserAgent Themes Switcher の有効化

UserAgent Themes Switcher が問題無くインストールされると下図のように「今すぐインストール」だったボタンが「有効化」に変わるため、ボタン「有効化」をクリックすることで UserAgent Themes Switcher が動作を開始する。

ボタン「有効化」をクリック

3-5. UserAgent Themes Switcher の設定

プラグインの有効化はプラグインの一覧画面でも青色の背景になっていることで確認ができる。
もしプラグインの動作を止めたい場合は、リンク「無効化」をクリックすると停止する。
UserAgent Themes Switcher は有効化しても設定しない限り全てのデバイス(ユーザーエージェント)で利用中のテーマを表示するようになっているので、プラグインの一覧画面より UserAgent Themes Switcher のリンク「設定」をクリックする。

UserAgent Themes Switcher のリンク「設定」をクリック

UserAgent Themes Switcher のリンク「設定」をクリックすると下図の設定画面が表示される。
初期の状態では何も設定されていない状態である。

UserAgent Themes Switcher の設定画面

今回はスマホでアクセスされたときだけ Wordpress にデフォルトで用意されているテーマ「Twenty Seventeen」が利用されるように設定する。
まずは「Android Smartphone」にチェックを入れるとテーマとユーザエージェントの具体的な入力欄が表示されるため、テーマを「Twenty Seventeen」に変更する。

UserAgent Themes Switcher の設定

ユーザエージェントは既に下記の内容が入っているため、このままとしてボタン「保存する」をクリックするとユーザエージェントに Android と Mobile の文字列があるとテーマ「Twenty Seventeen」が表示されるようになる。

Android.*Mobile

3-6. ユーザーエージェントを変えてアクセスして確認

プラグイン「UserAgent Themes Switcher」の設定が終わると、実際にスマホやブラウザのユーザーエージェントを変更してアクセスする機能を利用して Wordpress のウェブサイトにアクセスするとテーマが切り替わっているのが確認できる。
下図はブラウザの Firefox でユーザエージェントをスマホにしてアクセスしたときの様子である。
実際にインターネット上に公開して動作確認できない場合はパソコンのブラウザでもこのようにユーザーエージェントを切り替えて確認することができる。

ユーザーエージェントを変更したウェブサイトにアクセス

関連記事

@webolve をフォローしてください