2015.11.21WordPressツイート18シェアはてブ50送るPocket58こんにちは。香川のWEB屋矢野キチです。Switcher」というプラグインをご紹介します。WordPressは多種多用なテーマがあり、今ではほとんどがレスポンシブに対応しています。レスポンシブのテーマを使用すれば簡単にスマホ対応ができるのですが、スマホでみた時にページデータが重くなったり、レイアウトを自由に変更出来なかったりとデメリットもあります。いつもPCでサイトをみてくれている人が、たまたまスマホでサイトに訪れてくれた時に、スマホでの見た目が変わりすぎてサイト内で迷子になってしまわないように、「PC表示に切り替える」というボタンを設置することもできるようになります。どんなプラグインなのかを見てみましょう。Switcher簡単な使い方テーマを2つ(以上)用意する設定方法スマホでも「PC表示」を可能にするひとつめ!プラグインのデフォルト機能を使うふたつめ!切り換えボタンを任意の位置に追加したいユーザーエージェントの編集も可能あとがきプラグインの紹介まずはPCとスマホでテーマを切り替えるためのプラグインのご紹介。Switcherはテーマを複数インストールして、PC用、スマホ用、タブレット用などといった感じで、どのデバイスからアクセスしたかを基準にして、テーマを切り替えるプラグインです。レスポンシブテーマでもスマホ対応することは可能ですが、レスポンシブのテーマを使用するとスマホでみた場合不要なコンテンツまで読み込んでしまい表示速度が遅くなったり、スマホに最適化されたレイアウトが組みづらくなったりします。このプラグインはそれを解消するため、PC、スマホ、タブレットなどといった具合にテーマを切り換えて使うことが出来ます。一つの利点としてスマホからアクセスした際に「PC表示に切り替える」といった動作が可能となります。Switcher簡単な使い方テーマを2つ(以上)用意する冒頭で述べたようにテーマをPC用とスマホ用と言った感じで2つ以上用意し、アップロードしておきます。はいたって簡単で、先ほどのメニューを開くと下記画面のようになり、スマホ用テーマを選択できるようになっています。このサイトの場合、メインテーマとは別に「bge02-sp」というスマホ用に最適化したテーマを追加しており、スマホからのアクセスの場合のみ、別テーマに切り替えることが出来るようにしています。この他、スマートフォン用テーマタブレット端末用テーマ携帯モバイル端末用テーマゲームプラットフォーム用テーマと4種類設定することができ、例えばタブレット用にテーマをつくったなら、そのテーマを適用してあげることでそれぞれのデバイスに合わせて最適化されたレイアウトで表示させてあげることができます。スマホでも「PC表示」を可能にするスマホでみた時にまれですが、スマホテーマを嫌う方がいます。いつもはPCでサイトをみてくれていて、たまにスマホでみた時にサイトレイアウトの違いで戸惑ってしまわないように、スマホであっても「PC版テーマ」を表示できるようにすることが可能です。ここでは2通りのやり方をご紹介しておきます。Switcher」というタブがあるのでそちらを選択。追加デフォルトCSSを追加それぞれにチェックを入れて保存。スマホで確認してみるとサイトの一番下にデフォルトの切り換えボタンが入るようになります。スマホの切り換えは可能なので手軽に使いたい場合はこちらで十分かと思います。デフォルトCSSを追加にチェックを入れずに、自分でCSSで装飾してあげることもできます。ふたつめ!切り換えボタンを任意の位置に追加したいひとつめで紹介した方法だと、サイトの一番下にしかでてこないので、正直見つけるのが難しいと思います。切り換えボタンをもっと解りやすい場所に設置したいという場合は、テーマにタグを直接書いてあげることで、任意の場所にボタンを配置することができます。href="?pc-switcher=0">スマホ表示に切り替える</a>上記のタグをそれぞれのテーマに記入してあげれば、任意の場所にボタンを設置することが可能です。PC表示切り換えは、「スマホテーマに記述」。スマホ表示切り換えは、「PC用テーマに記述」です。PCで確認した際にはボタンが表示されないようにしたいここで注意したいのは、スマホでPC用テーマに切り換えた時は、スマホ表示に戻るボタンがあった方がいいのですが、通常通りPCでサイトを見た際も、切り換えボタンが出てしまっては調子が悪いです。いうタグを使って、出しわけます。下記がサンプルコードです。}}?>is_multi_device(‘smart’)はスマホの場合に表示するis_multi_device(‘tablet’)はiPadなどタブレットの場合に最後は上記以外に表示するタグです。一応全て記載しましたが、スマホの場合にのみ表示したいというのであれば下記コードだけでOKです。}}?>自分の場合はこれをヘッダーのメニューとフッターに2つ置いています。※実際にはアイコンフォントを使用してスマホ・PCのアイコンも追加しています。ユーザーエージェントの編集も可能ユーザーエージェントを追加してあげることで新しい端末にも対応できます。基本ここの部分はデフォルトのままでもいいかと思いますので、ユーザーエージェントが編集できるという点だけ紹介しておきます。■追記(2015/02/27)プラグインがアップデートされてページごとにテーマを適用するかどうか決めれるようになりました!詳しくはレビュー記事にて。スマホで一部のページだけをPC表示させたい場合に使うプラグイン。Switcherについて紹介してきました。僕はこのプラグインを使用することによって、WordPressテーマの可能性が広がりました。スマホでPC用テーマを表示できるメリットが。スマホ用レイアウトを自由に変更できる。PCではちょっと重ためのJavaScriptを使ってサイト印象的にできる。スマホではシンプルに。Adsense広告をPC、モバイルとで出し分けることによってはみ出さないようにもできる。...他にもメリットは多数ありますが、主にはこういった感じ。デメリットを上げるとするならば、テーマ制作や編集がテーマ数分必要になる点でしょうか。その手間をあげたとしても、本格的にサイトを構築したい場合このプラグインを使わない手はないかと思います。SPONSORLINKWordPressPICKUPプラグインこの記事をシェアツイート18シェアはてブ50送るPocket58FOLLOWFeedly新作!シンプルかつパワフルWPテーマ「スワロー」SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。件のコメントあなた損していませんか!?スマホ対策でアクセスと収益は○○%も変わる。下にしかでてこないので、正直見つけるのが難しいと思います。US矢野ヨシキ香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。Switcher」WPテーマ「スワロー」シンプル。このサイトで使っているWordPressテーマ、SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。