Multi Device Switcherの使い方ーWordPressプラグイン【初心者向け】
WordPressのプラグインの使い方を初心者向けに紹介する記事です。今回は、PCとスマートフォンなどデバイスによってサイトの見た目を整えるプラグイン、Multi Device Switcherの使い方について説明していきます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
WordPressのプラグインの使い方を初心者向けに紹介する記事です。
今回は、PCとスマートフォンなどデバイスによってサイトの見た目を整えるプラグイン、Multi Device Switcherの使い方について説明していきます。
なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。
田島メンター!!WordPressのデザインをパソコンとスマホで切り替えたいんですけど・・・どうしたらいいですか?
そういうことなら「Multi Device Switcher」の出番だね。
教えてください!!!
Multi Device Switcherとは
WordPressではサイトをPCで表示させた時と、スマートフォンやタブレットなどで表示させた時のデザインをプラグインを使用して別々に設定することができます。
ここではデバイスごとのテーマを切り替える「Multi Device Switcher」について説明していきます。
各デバイスで適用されるテーマを設定する
このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。
インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。
有効化し、次に「外観」→「マルチデバイス」を選択します。
マルチデバイスの設定画面が表示されます。(最初から日本語化されています)
「テーマ」タブからスマートフォン用テーマ・タブレット端末用テーマなどの各デバイスで使用したいWordPressのテーマを設定します。
※それぞれに設定できるテーマは現在そのWordPressにインストールされているものになります。
現在このWordPressでは「HarmonUX Core」というテーマが有効化されています。
PCで表示されたときはこのようになっています。
同じサイトをスマートフォンで見た時の状態です。
先ほど設定した「Twenty Sixteen」のテーマが適用されサイトが表示されました。
スマートフォン版サイトに「PC版に切り替え」のスイッチを設置する
スマホ用などに設定されたテーマでWordPressが表示されている時、PC版のテーマに切り替えを行うスイッチをページのフッターに追加します。
「外観」→「マルチデバイス」から設定画面を開き、「PC Switcher」タブをクリックします。
「PC Switcher をフッターに追加する」にチェックを入れます。
スマートフォン版サイトの一番下にスイッチャーが追加されました。
スイッチャー内の「PC」をタップすると元々設定されている「HarmonUX Core」でサイトが表示されます。
各デバイスに適用させるテーマはマルチデバイスの設定画面からいつでも追加・変更が可能です。
以上で解説は終わりです。
スマートフォンやタブレットにも対応したサイトにしていきましょう。
ぜひ、WordPressの使い方を覚えましょう!
単純にデザインを整えるだけでなく、テーマを切り替えたりもできるんですね♪
そうだね。
頑張って見やすいサイトを作ってみます!
[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。