WordPressサイトのスマートホン対応は独自の子テーマ+振り分けプラグインでいくことにした

WordPressのスマートホン対応でWP-Touchの選択肢を完全にやめたってことなんですが。
だってあれ、見た目全部一緒になっちゃうじゃないですか。どのサイトを今見てるのかわからなくなったりします。

自分はお客様のサイトを作る立場なので、やはりオリジナルデザインのテーマでいきたいわけです。

レスポンシブWebデザインって選択肢もありますが、不要なコンテンツを非表示にしてもブラウザ的には読み込んでるわけだし、PCサイトのデザインがレスポンシブを想定して作られていない場合、かえって工数が増えることだってあるわけで。(PCサイトがすでにある場合は特に)

そこで、折角WordPressを使うんです。
「子テーマ」を使わない手はないでしょう、という結論に。

PCサイトを「親テーマ」、スマートホン用を「子テーマ」として作る

この方法がいいなぁと思ったポイントは

  • PCサイトの基本的なソースやCSSを流用しながらも、必要な部分だけ上書きができる

っていうのはもちろんなんですが、

  • 「PCサイト用ウィジェット」「スマートホンサイト用ウィジェット」を用意して端末ごとに別のウィジェットを使用することができる

「PCサイト用ウィジェット」「スマートホンサイト用ウィジェット」を用意

てのが便利かなと。

sidebar.php自体読み込まないようにしようかな…とか最初思ってたんですが、やっぱないと不便なので。
かといって、PCサイトでは読み込んでいるアーカイブ表示とか、ブログだと広告とか、スマートホン表示だったら要らないかなーと思ったりします。

結局、それぞれ選べるのがベストな方法なんじゃないでしょうかね。
実装も簡単ですし。

「PCサイト用ウィジェット」「スマートホンサイト用ウィジェット」を作る

特に何か変わったことは必要ありません。
親テーマのfunctions.phpに

// PCサイト用ウィジェット有効化
     register_sidebar(array(
     'name' => 'PC用ウィジェット',
     //ウィジェット項目の前後に出力するタグ
        'before_widget' => '<div class="widget">',
        'after_widget' =>'</div>',
     //ウィジェット項目のタイトル前後に出力するタグ
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
 
// ウィジェット有効化
     register_sidebar(array(
     'name' => 'スマホ用ウィジェット',
     //ウィジェット項目の前後に出力するタグ
        'before_widget' => '<aside class="widget">',
        'after_widget' =>'</aside>',
     //ウィジェット項目のタイトル前後に出力するタグ
        'before_title' => '<h2>',
        'after_title' => '</h2>'
    ));

みたいな感じでウィジェットの指定を2つ書く。それぞれマークアップを変えてもOKですねー

で、親テーマのsidebar.phpで

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
//ここにウィジェットがないとき用の記述
<?php endif; ?>

子テーマのsidebar.phpでは

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
//ここにウィジェットがないとき用の記述
<?php endif; ?>

こんだけです。

※ちなみに、子テーマじゃなくても同じようなことはできます。
それぞれのテーマのfunctions.phpで2個ずつウィジェット作っておいて、それぞれ片っぽしか呼ばない、
っていうのでOKかと思います。ただ、次期Verでウィジェットの挙動が変わる可能性があるのでどうなるかわかりません。

「PCサイト用メニュー」「スマートホンサイト用メニュー」を作る

せっかくなのでナビゲーションもPC用、スマホ用分けちゃいましょう。
カスタムメニュー機能も大いに活用しましょう。

親テーマのfunctions.phpに

	register_nav_menus( array(
		'pc' => 'PC用メニュー',
		'sp' => 'スマホ用メニュー'
	));

親テーマのheader.phpで

<?php wp_nav_menu( array(
            'theme_location' => 'pc'
 ) ); ?>

子テーマのheader.phpで

<?php wp_nav_menu( array(
            'theme_location' => 'sp'
 ) ); ?>

あたりでどうでしょうね。

振り分けプラグインを使う

プラグインを使って、PCからのアクセスは親テーマ・スマートホンからのアクセスは子テーマ、という振り分けをします。

端末ごとにテーマを振り分けるプラグインは色々ありますが、
個人的には「WPtap Mobile Detector」が、設定も簡単でおすすめです。
訂正:どうやらこのプラグインは子テーマに対応していないのかもしれない。。。
ということで、AVH Themed By Browserプラグインに変更しました。

子テーマじゃないとき、外部URLへリダイレクトさせたいときはWPtap Mobile Detectorを使ってください。

インストールして有効化すると、このような管理画面にいけますので、
端末ごとに使いたいテーマをプルダウンで選べばOKです。

Browser-Theme correlations


#2012.03.10追記
Multi Device Switcherという国産プラグインがリリースされていました。
こちらのほうが使い勝手がよさそうです。

デバイス別にテーマを選択できる(子テーマも!)

ユーザーエージェントを追加・変更するのも手軽

 

他にも、ウィジェットから訪問者が任意のテーマを選べるプラグインもありましたね。

ここ最近Updateされてないのが気になりどころですが。。。自分は開発用としてのみ使っています。

以上、最近自分が思うもっともしっくり来る形のWordPressスマートホン対応でした。

追記:モバイル対応して、やりきった気にならない

以前、仕事用サイトの雑記で書きましたが、
「同じ文章・コンテンツの見た目を切り替えることが、本当に『モバイル対応』になっているのか?」
ということは心のどこかに持っておくべきかと思います。

お時間のある方は、こちらの駄文もぜひ。
モバイル対応しながら「Webサイトの人格」について改めて考える | ozone notes

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

今年もスタッフしました!

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売です。

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索