【Multi Device Switcher】特定のページの場合はテーマ切り替えをさせない方法

こんなことを考えている方へ。

この記事のポイントは以下です。

・デバイス別にテーマを切り替えることができるWordPressのプラグイン「Multi Device Switcher」で、URLに特定の文字列をもつページの場合は、テーマ切り替えを行わない方法

・上記の方法を活用して、URLにスラッグ名を持っている特定のカスタム投稿のアーカイブページと投稿記事ページでは、テーマの切り替えを行わない方法

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトやECサイトを作ったり、サイト分析をしたり、PMOとして開発案件に参画したり、ブログを書いたりして生活しています。

【Multi Device Switcher】特定のページの場合はテーマ切り替えをさせない方法

デバイス別にテーマを切り替えることができる「Multi Device Switcher」というWordPressのプラグインがあります。

このWordPressプラグインを使用すると、デバイス（スマートフォン、タブレットPC、携帯電話、ゲーム、カスタム）に個別のテーマを設定できます。このプラグインは、サイトがUserAgentによって表示されているかどうかを検出し、選択したテーマに切り替えます。

• 参考：Multi Device Switcherの説明はこちら >>

UA（ユーザーエージェント）の判定により、

• PC時には・・・テーマAを適用させる
• SP時には・・・テーマBを適用させる

といったデバイス別のテーマ適用ができるようになります。ただ、普通に設定をするとテーマ切り替えは全ページに適用されてしまいます。

といったニーズもあるはず。

それに対応するために「Multi Device Switcher」には、デフォルトで「切り替え無効」という機能があります。

切り替え無効は、以下の2つの方法で可能です。

• テーマ切り替えをさせたくないページのURLを直接指定する
• 正規表現を使ってテーマ切り替えをさせたくないページを指定する

今回は正規表現を使って「特定の文字列を含むページの場合は切り替えを無効にする」設定を解説します。

【関連記事はこちら】
【WordPress】カスタム投稿の一覧と個別ページをnoindexにする方法　を読む >>

テーマ切り替えをさせたくないページに含まれる文字列を特定する

正規表現を使って「特定の文字列を含むページの場合は切り替えを無効にする」設定を解説します。

この方法を使うことで、

といったことが実現できます。

まずは「テーマ切り替えをさせたくないページに含まれる文字列」を特定します。

たとえば、以下のようなパーマリンクの構造になっていた場合「”カテゴリー名”」を控えておきます。

・切り替えを無効にしたいカテゴリーのアーカイブページのURL
 https: //xxx.co.jp/”カテゴリー名”/

・切り替えを無効にしたいカテゴリーの個別記事ページのURL
 https: //xxx.co.jp/”カテゴリー名”/post-01/
 https: //xxx.co.jp/”カテゴリー名”/post-02/
 https: //xxx.co.jp/”カテゴリー名”/post-03/

また、以下のようなパーマリンクの構造になっていた場合「”カスタム投稿のスラッグ名”」を控えておきます。

・切り替えを無効にしたいカスタム投稿のアーカイブページのURL
https: //xxx.co.jp/”カスタム投稿のスラッグ名”/

・切り替えを無効にしたいカスタム投稿の個別記事ページのURL
https: //xxx.co.jp/”カスタム投稿のスラッグ名”/post-01/
https: //xxx.co.jp/”カスタム投稿のスラッグ名”/post-02/
https: //xxx.co.jp/”カスタム投稿のスラッグ名”/post-03/

【関連記事はこちら】
【2021年】カスタム投稿のアーカイブページにメタディスクリプションを出力する【All in one SEO Pack】　を読む >>

正規表現を使い「切り替え無効」設定を行う

「Multi Device Switcher」の「切り替え無効」を設定していきます。

WordPressの管理画面にログイン　＞　プラグインへと進み「Multi Device Switcher」の「設定」を押下します。

（なぜかプラグイン名が日本語の「マルチデバイス」になっていることもあります）

プラグインの管理メニューが開きます。タブから「切り替え無効」を選択します。

すると、切り替え無効にしたいURLを入力するエリアが表示されます。

特定のページのみを指定する場合は、このエリアに特定のページのURLを入れればOKです。

今回は正規表現を使って「特定の文字列を含むページの場合は切り替えを無効にする」設定をします。

「正規表現モード」にチェックを入れ、パス欄には正規表現で以下のような記述をします。

「ここに文字列を入れる」の部分に、切り替えを無効にしたいページに含まれる文字列を入力します。

前のステップで控えた「”カテゴリー名”」や「”カスタム投稿のスラッグ名”」を入れます。具体例は以下です。

//URLに menu を含むページの切り替えを無効にしたい場合
^(?=.*menu).*$

//URLに works を含むページの切り替えを無効にしたい場合
^(?=.*works).*$

//URLに category_A を含むページの切り替えを無効にしたい場合
^(?=.*category_A).*$

以下の例では「menu」がURLに含まれるページについて、切り替えを無効にしています。

記載内容に問題がなければ「変更を保存」を押して確定させます。

これで完了です。

【関連記事はこちら】
【WordPress】password protectedでサイトに認証をかける方法【プラグイン】　を読む>>

【具体例】特定のカスタム投稿のページを「切り替え無効」設定した

具体例として、

• 特定のカスタム投稿のアーカイブページと個別記事ページを「切り替え無効」に設定

したことがあります。

そのカスタム投稿のスラッグ名は「shop_list（仮）」で以下のようなパーマリンクの構造でした。

・カスタム投稿のアーカイブページのURL
https: //xxx.co.jp/shop_list/

・カスタム投稿の個別記事ページのURL
https: //xxx.co.jp/shop_list/post-01/
https: //xxx.co.jp/shop_list/post-02/
https: //xxx.co.jp/shop_list/post-03/

なので、以下のように設定しました。

//URLに shop_list を含むページの切り替えを無効にする
^(?=.*shop_list).*$

【関連記事はこちら】
wp-membersでカスタム投稿とアーカイブページにもロックをかける方法　を読む >>

2021年6月18日時点ではWordPress5.7でテストされていない

※2021年6月18日時点の情報です

「Multi Device Switcher」の「対応する最新バージョン」は WordPress5.6です。現在のWordPressの最新バージョンは5.7なので、最新では未検証ですね。

【関連記事はこちら】
【GMO｜iclusta】WordPressサイトのURLをルートディレクトリで表示　を読む >>

おすすめのWordPress勉強法はこちら

WordPressの勉強はネットの情報だけでもできますが、サイトによって情報や解説の粒度にバラつきがあり体系的に学ぶのが難しいです。また、最新の情報が反映されていないこともあります。

不安を抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。

• デイトラで学ぶ

デイトラは質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。「デイトラのWeb制作コース」では、スイーツ店のオンラインストアを作るという設定で、ゼロからストア構築を進めていきます。営業トークから広告運用の始め方までカバーしており、ストア構築を仕事にしたい方のための講座です。また、サポート体制も充実しています。Slackでプロのエンジニアによるアドバイスやフィードバックを受けることができます。

• TechAcademyで学ぶ

TechAcademy（テックアカデミー）の「WordPressコース」は、現役のエンジニアが講師です。パーソナルメンターとして、毎日15〜23時のチャット・レビューサポートで初学者の”分からない”をサポートしてくれます。
安い買い物ではないので、まずはTechAcdemyの講座を無料体験で試してみるのがおすすめです。

• 本で学ぶ

「WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版]」はおすすめです。WordPressの最新バージョンに対応しており、静的ページをWordPress化していく手順を丁寧に解説しています。

私も実際にこの本でWordPressを勉強しました。案件でよく使うカスタマイズ方法や、セキュリティ対策、有名プラグインの紹介もされており、痒い所に手が届きます。

• 動画学ぶ

Udemyの「WordPress開発マスター講座 」がオススメです！。WordPressで既存テーマのカスタマイズではない、オリジナルのウェブサイトを作る手順を解説しています。

プラグインによるカスタマイズ方法、フックの知識やテンプレート階層の知識、ショートコードやカスタム投稿タイプ・カスタム分類・カスタムフィールドといった、高度な機能についても紹介されてり、内容的には実案件のレベルです。

まとめ

この記事のポイントをまとめます。

WordPressのプラグイン「Multi Device Switcher」において、特定のページのテーマ切り替えをさせない方法は以下です。

• テーマ切り替えをさせたくないページのURLを直接指定する
• 正規表現を使ってテーマ切り替えをさせたくないページを指定する

正規表現を使うことで「特定の文字列を含むページの場合は切り替えを無効にする」設定ができます。

//URLに works を含むページの切り替えを無効にしたい場合
^(?=.*works).*$

正規表現を使うことで、

といったことが実現できます。

今回の記事はここまでです。