有料テーマAFFINGER5ではスマホ閲覧時にサイドバーに設置してあるウィジェットがページ下部に回り込んで表示されるため、ページ全体がどうしても縦長になってしまいます。
そこで「サイドバートップ」「サイドバーウィジェット」「スクロール広告用」の３つをPC閲覧時に表示、スマホ閲覧時に非表示にする方法をご紹介。
ビューポートが狭いスマートフォンではサイドウィジェットは非表示にするか、メニューなどに避けておくと邪魔にならずユーザービリティーが向上します。
サイドバーをスマホで非表示にする
当サイトの場合はサイドスクロール追尾に設置してある目次が、スマホ閲覧時にページの最後に表示されてしまいます。
ページ下部から目次を使う人は少ないだろうということで非表示にします。
また、サイト内検索もサイドバーに設置していますが、スマホ閲覧時にページの下部に表示されていても意味がありません。
このようにPC閲覧時には問題がないサイドバーですが、スマホで閲覧するとページの下部に表示されてしまい使い物になりません。
PCで表示されるサイドバーウィジェットは、スマホアクセスの場合スライドメニューに隠しておいた方が使いやすいと思われます。
実装後はこんな感じ。
余計な「サイドバートップ」と「スクロール広告用」を非表示にしました。
「サイドバーウィジェット」にはお問い合わせと自己紹介を入れているのでそのまま使用します。
AFFINGER5でスマホとPCの表示を切り替える
テーマによってはWordpressのダッシュボードからスマホの表示・非表示を切り替えれたりするのですが、AFFINGER5にはこの機能はついていませんでした。
そこで「サイドバートップ」「サイドバーウィジェット」「スクロール広告用」を表示するコードが記述されているsideber.phpにモバイルでは非表示という条件分岐を追加します。
sideber.phpの編集
親テーマのsideber.phpを編集してしまうとアップデートした時に元に戻ってしまうので、子テーマにコピーして編集します。
親テーマのsideber.phpをコピーし、子テーマ内に設置するだけで上書きされます。
（有料専用子テーマjet-childを使用している方はJET内）
子テーマにsideber.phpを設置したらスマホで非表示にするコードを追加しましょう。
（子テーマ内のsideber.phpを編集する）
スマホで表示したくないウィジェットの箇所を以下のコードで囲います。
モバイル非表示条件分岐開始。（ここから）
<?php if(!wp_is_mobile()): ?>モバイル非表示条件分岐終了。（ここまで）
<?php endif; ?>モバイルアクセスかを判定するコードに！を付け、モバイルではない時という判定にしています。
「スクロール広告用」を非表示にしたい場合はこんな感じに。
AFFINGER5ではそれぞれのサイドバーウィジェットに以下のようなIDが振られています。
・サイドバーウィジェット：<div id="mybox">
・スクロール広告用：<div id="scrollad">
このdivクラスの前後を先ほどのコードで囲うことでモバイルで非表示にできます。
全部非表示にしたい場合は、sideber.phpの先頭と最後にコードをそれぞれ追記すればOKです。
対応するにはカスタムが必要です。
コードが良く分からない方は少し難しいと思いますので、バックアップを取ってから試してみてください。
（コードの挿入個所を失敗するとエラーが出ます。）
保存したら、ブラウザの開発者ツールか実機でサイトにアクセスして確認します。
当サイトの場合「サイドバートップ」と「スクロール広告用」の二つのdivの前後にコードを追記し、スマホで非表示にしました。
「サイドバーウィジェット」は生かしてますので、自己紹介とお問い合わせはページ下に回り込んで表示されます。
まとめ
サイドバーをページ下部から排除したことにより、スマホ閲覧時のページがスマートになりました。
スマホ閲覧時はただ非表示にするだけではなく、サイドバーはスライドメニューなどに押し込んでおくとより使いやすいですね。
うちのようなIT、特にパソコンに関するハウツーサイトはスマホアクセスが少ないですが、どの端末でもストレスなく自然にページを読んでもらいたいものです。
AFFINGER5を使い始めてしばらくになりますが、誰でも簡単にすぐに使えるように設計されている分、カスタムするとなるとそれなりの工夫が必要なようです。