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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

大石ゆかり

田島メンター!!WordPressのデザインをパソコンとスマホで切り替えたいんですけど・・・どうしたらいいですか?

田島悠介

そういうことなら「Multi Device Switcher」の出番だね。

大石ゆかり

教えてください!!!

 

Multi Device Switcherとは

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

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

 

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

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

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

 

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

mds_p_1

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

mds_p_2

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

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

mds_p_3

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

mds_p_4r

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

mds_p_5

 

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

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

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

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

mds_p_6

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

mds_p_7

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

mds_p_8

 

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

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

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

 

大石ゆかり

単純にデザインを整えるだけでなく、テーマを切り替えたりもできるんですね♪

田島悠介

そうだね。

大石ゆかり

頑張って見やすいサイトを作ってみます!

 

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