Multi Device Switcherの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。

今回は、PCとスマートフォンなどデバイスによってサイトの見た目を整えるプラグイン、Multi Device Switcherの使い方について説明していきます。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

 

Multi Device Switcherとは

WordPressではサイトをPCで表示させた時と、スマートフォンやタブレットなどで表示させた時のデザインをプラグインを使用して別々に設定することができます。

ここではデバイスごとのテーマを切り替える「Multi Device Switcher」について説明していきます。

 

各デバイスで適用されるテーマを設定する

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

 

有効化し、次に「外観」→「マルチデバイス」を選択します。

マルチデバイスの設定画面が表示されます。(最初から日本語化されています)

「テーマ」タブからスマートフォン用テーマ・タブレット端末用テーマなどの各デバイスで使用したいWordPressのテーマを設定します。

※それぞれに設定できるテーマは現在そのWordPressにインストールされているものになります。

現在このWordPressでは「HarmonUX Core」というテーマが有効化されています。
PCで表示されたときはこのようになっています。

同じサイトをスマートフォンで見た時の状態です。
先ほど設定した「Twenty Sixteen」のテーマが適用されサイトが表示されました。

 

[PR] WordPressで挫折しない学習方法を動画で公開中

スマートフォン版サイトに「PC版に切り替え」のスイッチを設置する

スマホ用などに設定されたテーマでWordPressが表示されている時、PC版のテーマに切り替えを行うスイッチをページのフッターに追加します。

「外観」→「マルチデバイス」から設定画面を開き、「PC Switcher」タブをクリックします。
「PC Switcher をフッターに追加する」にチェックを入れます。

スマートフォン版サイトの一番下にスイッチャーが追加されました。

スイッチャー内の「PC」をタップすると元々設定されている「HarmonUX Core」でサイトが表示されます。
各デバイスに適用させるテーマはマルチデバイスの設定画面からいつでも追加・変更が可能です。

 

以上で解説は終わりです。

スマートフォンやタブレットにも対応したサイトにしていきましょう。

ぜひ、WordPressの使い方を覚えましょう！

 

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。