AFFINGER5でスマホ閲覧時にサイドバーを非表示にする方法!サイドウィジェットの表示をPCとスマホで分ける。


Wordpress

AFFINGER5_サイドバースマホ非表示_eyecatch

有料テーマAFFINGER5ではスマホ閲覧時にサイドバーに設置してあるウィジェットがページ下部に回り込んで表示されるため、ページ全体がどうしても縦長になってしまいます。

そこで「サイドバートップ」「サイドバーウィジェット」「スクロール広告用」の3つをPC閲覧時に表示、スマホ閲覧時に非表示にする方法をご紹介。

ビューポートが狭いスマートフォンではサイドウィジェットは非表示にするか、メニューなどに避けておくと邪魔にならずユーザービリティーが向上します。

AFFINGER5の設定にはなかったので、sidebar.phpを編集して対応しました。

サイドバーをスマホで非表示にする

当サイトの場合はサイドスクロール追尾に設置してある目次が、スマホ閲覧時にページの最後に表示されてしまいます。
ページ下部から目次を使う人は少ないだろうということで非表示にします。

AFFINGER5_サイドバースマホ非表示1

ページ下部に回り込むサイドバー

また、サイト内検索もサイドバーに設置していますが、スマホ閲覧時にページの下部に表示されていても意味がありません。

AFFINGER5_サイドバースマホ非表示2

回り込んだ検索とカテゴリー

このようにPC閲覧時には問題がないサイドバーですが、スマホで閲覧するとページの下部に表示されてしまい使い物になりません。

PCで表示されるサイドバーウィジェットは、スマホアクセスの場合スライドメニューに隠しておいた方が使いやすいと思われます。

AFFINGER5_サイドバースマホ非表示3

実装後のスマホ表示

実装後はこんな感じ。
余計な「サイドバートップ」と「スクロール広告用」を非表示にしました。
「サイドバーウィジェット」にはお問い合わせと自己紹介を入れているのでそのまま使用します。

AFFINGER5でスマホとPCの表示を切り替える

テーマによってはWordpressのダッシュボードからスマホの表示・非表示を切り替えれたりするのですが、AFFINGER5にはこの機能はついていませんでした。

AFFINGER5_サイドバースマホ非表示4

AFFINGER5のサイドバー用ウィジェット

そこで「サイドバートップ」「サイドバーウィジェット」「スクロール広告用」を表示するコードが記述されているsideber.phpにモバイルでは非表示という条件分岐を追加します。

sideber.phpの編集

親テーマのsideber.phpを編集してしまうとアップデートした時に元に戻ってしまうので、子テーマにコピーして編集します。

AFFINGER5_サイドバースマホ非表示5

親テーマ内のsidebar.phpを子テーマにコピー

親テーマのsideber.phpをコピーし、子テーマ内に設置するだけで上書きされます。
(有料専用子テーマjet-childを使用している方はJET内)

子テーマにsideber.phpを設置したらスマホで非表示にするコードを追加しましょう。
(子テーマ内のsideber.phpを編集する)
スマホで表示したくないウィジェットの箇所を以下のコードで囲います。

モバイル非表示条件分岐開始。(ここから)

<?php if(!wp_is_mobile()): ?>

モバイル非表示条件分岐終了。(ここまで)

<?php endif; ?>

モバイルアクセスかを判定するコードに!を付け、モバイルではない時という判定にしています。

AFFINGER5_サイドバースマホ非表示6

必要な箇所にis-mobile関数を入れる

「スクロール広告用」を非表示にしたい場合はこんな感じに。
AFFINGER5ではそれぞれのサイドバーウィジェットに以下のようなIDが振られています。

  • サイドバートップ:<div id="side">
  • サイドバーウィジェット:<div id="mybox">
  • スクロール広告用:<div id="scrollad">

このdivクラスの前後を先ほどのコードで囲うことでモバイルで非表示にできます。

全部非表示にしたい場合は、sideber.phpの先頭と最後にコードをそれぞれ追記すればOKです。

wp_is_mobileの弱点としてiPadもモバイルとして判定されてしまいます。
対応するにはカスタムが必要です。

ポイント

AFFINGERではst_is_mobile()というテーマ側で用意された関数もあります。

コードが良く分からない方は少し難しいと思いますので、バックアップを取ってから試してみてください。
(コードの挿入個所を失敗するとエラーが出ます。)

保存したら、ブラウザの開発者ツールか実機でサイトにアクセスして確認します。

AFFINGER5_サイドバースマホ非表示7

スマホのページ下部がスッキリ!

当サイトの場合「サイドバートップ」と「スクロール広告用」の二つのdivの前後にコードを追記し、スマホで非表示にしました。
「サイドバーウィジェット」は生かしてますので、自己紹介とお問い合わせはページ下に回り込んで表示されます。

まとめ

サイドバーをページ下部から排除したことにより、スマホ閲覧時のページがスマートになりました。

スマホ閲覧時はただ非表示にするだけではなく、サイドバーはスライドメニューなどに押し込んでおくとより使いやすいですね。

うちのようなIT、特にパソコンに関するハウツーサイトはスマホアクセスが少ないですが、どの端末でもストレスなく自然にページを読んでもらいたいものです。

AFFINGER5を使い始めてしばらくになりますが、誰でも簡単にすぐに使えるように設計されている分、カスタムするとなるとそれなりの工夫が必要なようです。

-Wordpress

ありがとうございました。
良かったらシェアしてネ・w・

© 2022 ソロ学