小説サイトの構築

モバイルでサイドバーの表示を切り替える方法

2017年3月14日

サイドバーにサムネイル付きの記事リストやSNSのストリームなど表示すると、お洒落な外観になりますが、モバイル・ファーストの時代、画像は極力使わないのが賢明だと思います。

ショッピングサイトのように商品画像が重要なポイントになるのと違い、コラムや小説など、テキストベースのサイトだと、画像はページの読み込みを遅くするばかりか、訪問者にとっては「無意味な外国人女性のアイキャッチ画像、邪魔!!」でしかないからです(多くのアイキャッチ画像は自己満足^^;)

サイドバーも同様。

サムネイル付きの記事一覧などは、PC閲覧なら非常に見栄えがいいですが、モバイルでは取り入れない方がいいと思います。2センチ四方ぐらいのアイキャッチ画像など、ほとんど意味ないですし。

モバイル専用のウィジェットを追加して、is_mobile タグを使った簡単な方法を紹介します。

PCとモバイルで、表示するサイドバーを切り替えるだけで、ページ読み込み速度や見やすさが大きく異なりますので、興味のある方はトライして下さい。

is_mobile の使い方は、こちらに分かりやすく紹介されています。functions.phpのコピペで実装できます。非常に簡単。

応用はこちら。
モバイルでアイキャッチ画像や記事サムネイルを非表示にする方法(当サイト)

モバイル専用サイドバーを追加する

functions.php にウィジェットを追加するコードを記入します。

この場合、ウィジェットの名前を mobile に設定しています。

数値は「3」になっていますが、お使いのテーマ・テンプレートによって、反映が異なりますので、ウィジェットエリアにどのように表示されるか、確認しながら数を調整して下さい。

記述が正しければ、ウィジェットエリアにmobilの名前の新しいサイドバーが登録されます。

サイドバー モバイル

sidebar.phpを編集する

is_mobile タグの使い方は、こちらの記事を参考にして下さい。

sidebar.php を開き、サイドバー dynamic_sidebar を呼び出しているテンプレート・タグを条件分岐で使い分けます。

最初の状態。

条件分岐で使い分け。

サイドバー モバイル 条件分岐

sidebar.phpや、sidebar.phpを読み込んでいる箇所は、テーマ・テンプレートによって大きく異なります。

また、サイドバーの使い分けはできても、CSSが上手く反映されない場合もありますので、モバイルでしっかり確認しながら作業を行って下さい。

sidebar-mobile.phpを読み込む

上記の他、sidebar-mobile.php(名前は任意)を作成し、get_template_partで読み込む方法もあります。

このテーマの場合、標準のサイドバーは sp_sidebar_post で読み込んでいますが、モバイルだけ、sidebar-mobile.phpを表示する方法です。

たとえば、sidebar-php.phpには、上記の方法で作成したモバイル専用ウィジェットを読み込むように記述します。

その後、テーマ・テンプレートでサイドバーを呼び出している箇所に is_mobile の条件分岐を適用すれば、簡単に切り替えが可能です。
is_mobile と else の間に何も記述しなければ、モバイルだけサイドバーを非表示にすることも可能です。

まとめ。

1. functions.php にモバイル専用のサイドバーを登録する。

2. sidebar.phpの if ( !function_exists( ‘dynamic_sidebar’ ) の箇所をモバイルの条件分岐で使い分ける

たとえば、PCのサイドバーには、画像付き記事リスト、Twitterのストリーム、広告バナーなど、ビジュアルの綺麗な要素を置いて、モバイルはテキスト要素だけに絞り込むと、スマホの画面もすっきりします。

モバイルはスピード命なので、ページビューを上げる為にも、余計な要素は極力排し、テキストメインにすることをおすすめします。

You Might Also Like