テーマカスタマイザー（「外観」→「カスタマイズ」）で諸所の項目を設定する時、右にプレビュー画面が表示されるのはご存じかと思います。
でも、私が気にして使っていなかっただけなのか、一番下に切り替えボタンがあって、「パソコン」「タブレット」「モバイル」のプレビュー表示が切り替えられるというのはあまり知られていないかも知れません。
どこに切り替えがあるの？という方は、ご自身のサイトでテーマカスタマイザーを開き、左側のメニュー一番下にあるマーク（下図赤枠内）をクリックしてみてください。
一番左が「パソコン」、中央が「タブレット」、一番右が「モバイル」のボタンで、クリックすると、画面右側のプレビューが応じて変わるようになっています。
以下はテストサイトでこのプラグインを有効／無効にした時のスクリーンショットです。
上の例は、私が自作した【HABONE】というテーマを使った時のものなのですが、本テーマに限らず、実はWordPressのテーマでは、画面幅に応じて出力するものを切り分けている（難しい書き方をすれば「wp_is_mobile関数で分岐している」）ものが多くあり、この切り替えによるプレビューは完全に再読み込みされているものではないため、こうした違いが生じてしまうのです。
この問題を解消するためには、切り替えボタンがクリックされるたびに右側のプレビューを完全にリロードする必要があるのですが、これを簡単にプラグインでできるようにしてくれているのが、今回紹介する【Customizer Responsive Server-Side Components Device Preview】です。
【Customizer Responsive Server-Side Components Device Preview】プラグインの用途や機能
インストールして有効化するだけで、テーマカスタマイザーのビュー切替でモバイルやタブレットの表示が実際のものと異なってしまうのを解消してくれます。
しばらく更新されていないプラグインですが、後述する環境でも正常に動作しました
パソコン表示時のプレビュー同様、テーマカスタマイザーのプレビューはあくまでも目安ですので、完全に対応できないことがあるかもしれませんから、承知の上で使用してください
本ページを最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用（試用）したテスト環境・公式ページなど
この紹介記事作成にあたって、試用（テスト）を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。
| テストしたサーバー | カラフルボックス |
| WordPressバージョン | 5.9.2 |
| PHPバージョン | 7.4.27 |
| テストしたテーマ | HABONE(本サイトでも使用しているオリジナルテーマ) |
| プラグインバージョン | 本記事で紹介するために試用したバージョン ：0.1.1 公式サイトで配布されている最新バージョン ：0.1.1 ※バージョンが違うと、仕様が大きく変更となっている可能性があります |
| テストした日 | ※本記事の最終更新日であり、実際の試用日とは異なることがあります |
| 公式サイト | https://wordpress.org/plugins/customizer-responsive-device-preview/ ※wordpress.org上のページへのリンクです |
| 作者サイト | https://make.xwp.co/2016/10/29/previewing-themes-with-adaptive-designs-in-the-customizer/ ※プラグイン制作者の独自ページ（サイト）リンクです |
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Customizer Responsive Server-Side Components Device Preview】プラグインの設定画面や表示画面の日本語化と翻訳
【Customizer Responsive Server-Side Components Device Preview】プラグインは言語の変更に未対応ですが、設定画面などがありませんので、翻訳なしで問題なく使用できます。
【Customizer Responsive Server-Side Components Device Preview】プラグインのインストールと設定方法
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
基本的な設定方法と使用方法
設定画面はありません。プラグインをインストール・有効化すると、自動で動作します。
このページの更新履歴
| 更新日 | 更新内容 |
|---|---|
| 2022年 3月11日 | 記事公開しました |
ポチップ
ポチップ
