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

Multi Device Switcher WordPress

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

ただ、URLに特定の文字列をもつページの場合は、テーマ切り替えを行いたくない。

具体的にいうと、特定のカスタム投稿のアーカイブページと投稿記事ページでは、テーマの切り替えを行いたくない。

URLにスラッグ名を持っているので、これを使ってテーマ切り替えを無効にできないかなぁ。

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

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

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

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

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

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

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

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

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

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」の「設定」を押下します。

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

Multi Device Switcher  WordPress

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

Multi Device Switcher WordPress

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

Multi Device Switcher WordPress

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

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

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

Multi Device Switcher WordPress

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

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

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

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

Multi Device Switcher WordPress

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

これで完了です。

【関連記事はこちら】
【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).*$
Multi Device Switcher WordPress

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

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

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

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

Multi Device Switcher WordPress

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

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

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

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

  • オンラインスクールで学ぶ

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

  • 本で学ぶ

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

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

  • 動画学ぶ

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

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

【Udemyがセール中(2021年7月30日(金)まで)】
対象コースが ¥1,730から。
セール中のWordPressの講座一覧を見る

まとめ

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

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

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

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

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

正規表現を使うことで、

特定のページだけはテーマ切り替えを無効にしたい
特定の文字列を含むページ群だけはテーマ切り替えを無効にしたい

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

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

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。