ブログなどをPCのブラウザで見ていると、右側のサイドバー領域にプロフィールやカテゴリ、新着記事などが表示されているエリアがあります。
一つ一つのパーツを、WordPressではウィジェットと呼ぶようで、サイドバーにこのウィジェットを複数設定することが多いと思います。
ただ、記事本文が長いと、サイドバー領域の長さが本文より短くなってしまい、記事を読み進めると右側に何も表示されない空白状態が出来上がってしまいます。
今日はこれを解消するために、指定したウィジェットを自動的にスクロールに追尾して、最下部まで表示する方法をまとめたいと思います。
自分でCSSをカスタマイズする方法などもあるかと思いますが、ここでは簡単に出来る2つの方法をご紹介します。
～ 目次 ～
スクロール追尾させる際の留意事項
Google Adsenseの追尾広告自体は許可された
スクロール追尾の方法を紹介する前に一つ気を付けるべき事があります。
Google Adsenseをサイトに導入している方は、余白を埋めるために追尾設定させたいウィジェットに、Google Adsenseの広告を設定しようと考えている方もいると思います。
WordPressで追尾広告のやり方を調べていると、よく注意事項として「アドセンスの広告をスクロール追尾させるのは禁止事項なので気を付けるように」と書かれています。
これについては、2019年07月まで、アドセンスのポリシーとして追尾広告は一部の許可されたユーザにのみ許されており、基本的には禁止されていた為です。
ただ、現在（2020年11月時点）ではアドセンスの追尾広告は問題なくなったようです。
Adsenseの方々がこのポリシー変更について丁寧に説明してくれている動画がYoutubeに上がっています。
[Google AdSense] 追尾広告のアップデートとポリシーに関するQ&A
ただ、許可されたとはいえ、気を付けないといけないポイントは幾つかありますので、Adsenseの広告をスクロール追尾させようと考えている方は、確認しておいた方がよいでしょう。
方法１：WordPressのプラグイン「Q2W3 Fixed Widget」を導入
では、実際にスクロール追尾させる機能を実装していきます。
一つ目の方法は、Q2W3 Fixed Widgetというワードプレスのプラグインを導入する方法です。
プラグインをインストール
まずはプラグインをインストール＆有効化します。
プラグインのインストール方法は以前記事を書いてますので、そちらを参考にしてください。
「外観」→「ウィジェット」から設定
「Q2W3 Fixed Widget」のインストールと有効化が終わったら、WordPressのダッシュボードから、ウィジェットの設定ページに行きます。
「サイドバー」という部分に、サイトのサイドバーに表示されているパーツの一覧が表示されていると思います。
スクロールに追尾させたいウィジェットをクリックしてください。
ここでは「カテゴリー」を選択します。
ウィジェットの設定がアコーディオン表示されます。
「Q2W3 Fixed Widget」を有効化していると、一番下に「Fixed widget」というチェックボックスが表示されるようになっている筈です。
これをチェックして、設定を保存してください。
基本的な設定は以上で完了です。
サイトを確認すると、Q2W3 Fixed Widgetの導入前は空白になってしまっていたサイドバーに、ちゃんと自動的に「カテゴリー」のウィジェットが付いてきてくれるようになっています。
◆プラグイン導入前
◆プラグイン導入後
（必要に応じて）デザインを調整
これで完了ですが、テーマによっては、自動的についてくるウィジェットのブロックの背景色が意図しないものになってしまい、デザインが崩れるようです。
少なくとも私はなりました。
ウィジェット個別に背景色が設定されておらず（背景色は親以上の要素で指定）、ウィジェット本体が移動してしまうと、サイト全体の背景色の上に追尾されたウィジェットが表示されてしまう事が原因だと思います。
私の使っていたテーマは、ウィジェットごとにHTMLのclass設定がされていたので、CSSを弄って追尾させたいウィジェットにダイレクトに背景色設定をしていました。
この辺りは使っているWordPressテーマに依存するかと思うので、テーマごとに必要な対応を考えて頂ければと思います。
方法２：テーマに付属する機能を使う
暫くの間「Q2W3 Fixed Widget」プラグインを使っていましたが、やはり微妙なデザイン（背景色）のずれが気になって色々調べていたら、テーマによっては、プラグインを使わなくても自動スクロール追尾機能が実装されているようです。
Cocoonテーマの場合
私が使わせて頂いているCocoonテーマにもこの機能は導入されていましたので、設定の仕方を紹介します。
「Q2W3 Fixed Widget」の設定をした時同様、WordPressのダッシュボード「外観」から、ウィジェットの設定ページに移動します。
すると、「サイドバー」の領域の下に、「サイドバースクロール追従」という項目があるので、それをクリックして設定を開きます。
スクロール追従させたいウィジェットを、ここにドラッグして配置しましょう。
ここでは、「人気記事」のウィジェットを配置してみました。
ちゃんとスクロールしても空白にならずに、ウィジェットが付いてきてくれています。
テーマとして導入している機能なので、デザインの崩れの心配もなさそうです。
Cocoon公式でも紹介されていますが、逆にサイドバーが長くてメインコンテンツ部分が短い場合の為に、「メインカラムスクロール追従」というのも出来るようです。
詳しく知りたい方は、Cocoon公式をご覧ください。
→テーマの追従領域について（Cocoon公式）
コメント