追従式サイドバーウィジェット機能と設定方法

公開日:2021年6月20日 ha-Basicテーマ
追従式サイドバーウィジェット機能と設定方法

本機能は【ha-Basic】バージョン3.2から実装しており、2021年6月21日現在、本サイトでも有効化しています。

本文部分の高さよりもサイドバーのコンテンツが短い時、サイドバー部分が空白にならないよう、最下部に配置したウィジェットを追従(固定)表示させる機能です。

追従式サイドバーウィジェットの有効化方法

本機能を使うには以下の設定を行います。

  1. 「外観」→「カスタマイズ」を開きます
  2. 「ha-Basic設定」をクリックします
  3. 「表示設定」をクリックします
  4. 画面最下部にある「サイドバー固定ウィジェット」にチェックを入れます
  5. 画面上部の「公開」をクリックします

あとは「外観」→「ウィジェット」を開き、追従させたいウィジェットを「サイドバー」項目にあるウィジェットの一番下へ配置すれば完了です。

機能使用上の注意点・既知の不具合など

本機能は、動作の重さによる表示速度の低下を最小限にするため、スクリプトを使用せず、CSSのみで動作させています。従って、スクリプトを使用する場合と比べ、サイドバー部分の高さが再計算されないことから、下記のような問題が発生する可能性があります。

ある程度のテストは行いましたが、追従させるウィジェットの高さ(長さ)があまりにも大きいものですと、末尾の部分がフッター下まで伸びてしまうかも知れません。

また、【ha-Basic】テーマの高速化機能を有効にしている場合に、以下のコンテンツをサイドバーへ挿入すると不具合が起こることがあります。

  1. Google Adsenseの自動広告をOnにしている場合
  2. Google Adsenseのレスポンシブ広告を挿入している場合

両方を解消するには、テーマカスタマイザーの「アクセス解析&高速化」にある「表示高速化設定を使う」のチェックを外します。

「表示高速化設定を使う」のチェックを外すことで、【ha-Basic】による表示の高速化、Google PageSpeed Insightsのスコア改善機能がオフになりますので、速度低下やスコアの低下が発生します。

1に関しては、Google Adsense自動広告の設定でサイドバー部分の広告非表示設定ができないため、以下のコードを追加CSSまたは子テーマのCSSへ追記することでサイドバー部分へ自動広告が挿入されないようにできますが、収益の低下が発生する可能性があります。

2に関しては、固定式(336×280)の広告ユニットを挿入することで解消できますが、すべてのデバイスで固定幅の広告が表示されることで、見た目の問題が出ること、収益の低下が起こる可能性があります。

本機能を【ha-Basic】以外のテーマで実装したいときは

本機能はとても少ないコードをCSSへ追加するだけで実装できるものですが、使用されているテーマの構造確認と、CSSの修正が必要となります。

追従式サイドバーウィジェットの具体的な実装方法については以下の記事で詳しく紹介していますので参照ください。

CSSのみで、最下部のウィジェットを追従表示(ページの最後まで固定表示)させる方法

  •  白黒ハチワレ猫の【モモ】とのんびり暮らしながらフリーランスでサイト制作のお手伝いをしていますブログツールでありながら本格的なウェブサイトに必要な機能を追加できるWordpressの良さを活かした楽しく便利なサイト作りのお手伝いをさせていただいております

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。