【TT2】サイドバーの最下部パーツを固定(追従)表示させる

公開日:2022(令和4)年9月22日/最終更新日:

Twenty Twenty-Two Theme Customize | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

TT2(Twenty Twenty-Two)のようなブロックテーマでは、サイドバーという概念がないので、当然ウィジェットという概念もありません(知識不足で実際は作り方が間違ってるのかもと思いつつ..)。

したがって、サイドバーを作る場合には、本文部分をカラムブロックで分け、本文にするカラムにクエリーループブロックを、サイドバーとなるカラムに独自テンプレートパーツを入れて、疑似的にサイドバー化する必要があります。

ということは、ウィジェットではないので、固定式ウィジェットを実装する「Fixed Wdget」プラグインなどは使えません(テストもしてません)。

そこで実現できる方法を探したところ、いいプラグインがありましたので紹介しておきます。

プラグイン名は「Sticky Block」です。プラグインの追加から検索すればすぐに訪ね当たります。

このプラグインを有効化したら、ブロック一覧に追加される「Sticky」というブロックをサイドバーに当たるテンプレートパーツの中へ追加し、「sticky」ブロックの中に入れた任意のブロックが追従表示されるという仕組みになっています。

追従動作の設定がいろいろとあるので、スクロールに応じてブロックをページ上部へ固定表示するプラグイン「Sticky Block for Gutenberg Editor」を参考に設定してみてください。

このサイトでも早速追加して、新着投稿の一覧を追従表示させています(このページでも右側部分が追従になっていることが確認できます)。

設定のキモは、追従表示を解除するための位置(CSSクラスやID)と、追従させるブロックの下位置調整。

フッターに被らないように解除したいので、解除位置は「.footer」(TT2のフッターにはこのクラスが自動付加されます)にして、新着投稿一覧ブロックの下パディングを「10px」に設定しています。

jQueryなどを使って自力で..とも考えましたが、このプラグインであまりにも簡単に実現できたので、今回はプラグインに頼ることにしました。

このサイトと同じようにTT2(Twenty Twenty-Two)テーマを使っていて、このサイトと同じようにサイドバーの末尾となるブロックを追従させたい方は試してみてください。

Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
メディアライブラリのグリッド表示で、「さらに読み込む」機能を無効にして以前の無限スクロールへ戻す方法