【WordPress】ウィジェットを固定してスクロール追従させる方法

ブログやメディアを見ている時に、ある程度スクロールするとサイドバーの目次や広告が固定表示されるようなデザインのWebサイトを見たことがあると思います。

この記事では、サイドバーのウィジェットを固定してスクロール追従させる方法をご紹介しています。

プラグインを使用する

ウィジェットがスクロール追従させるには、「Q2W3 Fixed Widget」というプラグインを使用します。

プラグインがインストールできたら、WordPress管理画面の「外観」→「ウィジェット」から固定表示させたいウィジェットの設定画面を開きましょう。

すると、新しくウィジェット設定画面の一番下に「Fixed Widget」という項目が追加されているはずです。

固定表示させたいウィジェットを選んで、このチェックボックスを選択してください。これでウィジェットが固定表示されるようになります。

Q2W3 Fixed Widgetは便利なプラグインですが、いくつか使用上の注意点があります。

サイドバーに複数のウィジェットを配置している場合、一番最後のウィジェット以外を選択してしまうと表示が重なってしまいます。

固定表示させたいウィジェットは、サイドバーの一番下に配置しておくようにしましょう。

テーマによっては、ウィジェットの親要素に背景色が設定されており、スクロールすると中身のウィジェットだけスクロールに追従してデザインが崩れてしまう場合があります。

その場合は、テーマのCSSを編集してウィジェットの親要素ではなく、ウィジェット自身に背景色を設定するようにすれば、デザイン崩れを防ぐことができます。