メインカラムに本文、サイドカラム(サイドバー)にバナーやウィジェットを設置しているレイアウトの場合、記事本文が長いとサイドカラムが空白になってしまいます。

下の方までスクロールしてサイドバーに何も表示されていないとちょっともったいないですよね。そこで今回はサイドバーのコンテンツを追尾させて、デッドスペースを有効活用できるプラグインをご紹介いたします。

弊社で動画解説も行っていますので、よろしければご覧ください。2020年のものなのでプラグイン名が旧バージョンのものになっていますが、基本的な操作方法は参考にしていただけます。

「Fixed Widget and Sticky Elements」とは

ウィジェットを追尾表示できるプラグインです。

元々「Q2W3 Fixed Widget」という名前で人気だったプラグインですが、2022年2月現在は名称が変更され「Fixed Widget and Sticky Elements」となっています。

主な操作方法に大きな変更はなく、非常にシンプルな操作性で実用性は高いです。本文が長い記事でもサイドバーのウィジェットを追尾させることで空いたスペースを有効活用できます。

「Fixed Widget and Sticky Elements」のインストール

管理画面から「Fixed Widget and Sticky Elements」を検索してインストールして下さい。もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。

プラグインのイメージ

Fixed Widget and Sticky Elements

「Fixed Widget and Sticky Element」の使い方

プラグインを有効化しましたら、ウィジェットの管理画面(外観>ウィジェット)から追尾表示させたいウィジェットを開いてみてください。下記のような設定画面が表示されます。

q2w302

【Fixed widget】にチェックを入れるだけで、そのウィジェットが追尾表示されるようになります。

追尾表示のサンプル

注意点は、サイドバーの最下部のウィジェットにのみチェックを入れることです。上部のウィジェットを追尾表示させると他のウィジェットと重なって表示されてしまうからです。

「Fixed Widget and Sticky Element」の調整方法

先程の使い方でウィジェットが追尾するようになりますが、テーマやサイトのデザインによっては追尾時にヘッダーやフッターと重なってしまいます。このような現象のことです。

ヘッダーと重なる例

上記のような問題を回避するために、表示位置を調整できる設定項目が用意されています。ダッシュボードの外観の中に「Fixed Widget 設定」という項目があるので、そこで設定可能です。

下記画面が開きますので、赤枠の項目別にそれぞれ解説いたします。

設定画面

一般設定

ここには最新バージョンをテストするチェックボックスと、画面サイズによって追尾させないようにする設定項目が用意されています。「Test new version」のチェックボックスにて、最新版をテストできるようです。

「Minimum Screen Width(最低ブラウザ幅)」と「Minimum Screen Height(最低ブラウザ高さ)」に数値を入力するとそのサイズ以下ではウィジェットが追尾しなくなります。小さいデバイスで表示が崩れるような場合に対策可能です。

Stop Elements

こちらではどの位置でウィジェットを停止させるかを設定できます。ヘッダーやフッターにウィジェットが重なってしまう場合に設定します。

例えば、「Margin Top」と「Margin Bottom」に50pxずつ入力して、停止させたい要素のIDを「Stop Elements」に入れます。

マージンの設定例

するとウィジェットの追尾表示位置をこのように制御できます。

追尾表示位置の例

下部の「はじめてのお買い物で使えるクーポン配布中」の部分が「#footer_message」というIDの要素になっているので、その手前50pxの位置でウィジェットが停止するという設定例です。

Custom Fixed Elements

停止させたいウィジェットのIDを手動入力して設定する項目です。ウィジェットの管理画面(外観>ウィジェット)で設定する場合は、空白のままで問題ありません。

何を追尾表示させるべき?

このプラグインを使えば、ウィジェットを追尾表示させるのは簡単です。
では、どんなコンテンツを追尾させるべきなのでしょうか?

パッと思い浮かぶのは、まずは広告ではないでしょうか。自社商品の広告バナーや、アフィリエイト広告などの外部リンクなども追尾表示させるとユーザーの目につきやすく一定の効果を得られるかもしれません。ただし、外部広告の場合、ガイドラインや規約違反にならないように注意して設定しましょう。

もう一つは、目次コンテンツです。

内容が盛り沢山の解説記事や、何かの操作マニュアルなどは、目次がサイドバーに追尾しているとかなり読みやすくなりますよね。下記記事で紹介しているプラグインで目次ウィジェットを表示できるので、当プラグインと組み合わせて追尾表示させれば、より実用的です。

手前味噌になりますが、追尾表示する目次機能がついてるTCDテーマを少しご紹介させてください。

Google AdSenseは追尾させてはいけない?

比較的収益化しやすい広告といえば、Google AdSenseですが、こちらもサイドバーに追尾表示して問題はありません。以前はGoogleから承認を得ていない限り、追尾表示は禁止されていたようですが、2019年にポリシーが改正され、2022年2月現在は問題ないようです。

動画内でも言及されていますが、広告を追尾表示させる場合、以下のようなメリットがありますね。

広告がユーザーの目に触れる時間が長くなり、クリック率(CTR)の向上が見込めます。ご利用後、広告ユニットのCTRが約2倍になった事例もございます。

※追尾広告の実装に関して一定のガイドラインが定められているようですので、詳しい内容は下記の公式ページを参考にご確認ください。
追尾広告の実装に関するガイドラインと制限

まとめ

ウィジェットを追尾表示できるプラグイン「Fixed Widget and Sticky Elements」をご紹介して参りました。

以前は「Q2W3 Fixed Widget」というプラグインだったのですが、名称と設定項目が少し変わっているようです。とはいえ操作方法に大きな変化はなく、実用性・汎用性共に高いシンプルなプラグインだと思います。

広告や目次コンテンツなどを追尾表示させて、サイドバーを有効活用してみてください。