「Sticky Block for Gutenberg Editor」は、本文やテーマテンプレート内の任意のブロックをスクロールに応じてページ上部へ固定表示させることができるプラグインです。
特にサイドバーという概念を持たないブロックテーマで、作成したサイドバー部分の特定のパーツを、固定（追従）表示させることができるので重宝します。
現在、ブロックテーマであるTT2(Twenty Twenty-Two)テーマを使って勝手に作成したこちらのデモサイトのサイドバー部分で使用していますので、どのように動作するのかを確認できます。
【Sticky Block for Gutenberg Editor】プラグインの用途や機能
このプラグインで追加される「Sticky」というブロック内に配置した任意のブロックをスクロールに応じて上部へ固定表示させることができます。
本ページを最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用（試用）したテスト環境・公式ページなど
この紹介記事作成にあたって、試用（テスト）を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。
| テストしたサーバー | カラフルボックス
 |
| WordPressバージョン | 6.0.2 |
| PHPバージョン | 7.4.27 |
| テストしたテーマ | HABONE(本サイトでも使用しているオリジナルテーマ) |
| プラグインバージョン | 本記事で紹介するために試用したバージョン ：1.11 公式サイトで配布されている最新バージョン ：1.11 ※バージョンが違うと、仕様が大きく変更となっている可能性があります |
| テストした日 | ※本記事の最終更新日であり、実際の試用日とは異なることがあります |
| 公式サイト | https://wordpress.org/plugins/sticky-block/ ※wordpress.org上のページへのリンクです |
| 作者サイト | ※プラグイン制作者の独自ページ（サイト）リンクです |
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Sticky Block for Gutenberg Editor】プラグインの設定画面や表示画面の日本語化と翻訳
【Sticky Block for Gutenberg Editor】プラグインは言語の変更に未対応ですので表示のまま設定することになりますが、設定項目が少ないため特に翻訳しなくても設定できると思います。
【Sticky Block for Gutenberg Editor】プラグインのインストールと設定方法
プラグイン追加画面から「Sticky Block for Gutenberg Editor」というキーワードで検索すると容易に発見できます。
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
基本的な設定方法と使用方法
ブロックエディタ、または、ブロックテンプレート、テンプレートパーツなどで「Sticky」というブロックを追加します。
「Sticky」ブロックの中に挿入した任意のブロックが、スクロールに応じて（任意のブロックがページ上部に達すると）、ページ上部に固定表示されます。
「Sticky」ブロックの設定項目
| 設定項目（英語） | 日本語訳と設定方法 |
|---|---|
| Space between sticky block and top of screen: | 固定表示させるブロックと画面最上部との距離を指定します |
| Move the block down a little bit if there is a toolbar at the top (for logged in users) | ログインしているユーザーに対し、ツールバー分上部に隙間を設けるようにします |
| Block should not be sticky on screens smaller than: | 設定した画面幅よりも小さいときは固定表示させないようにします |
| Block should not be sticky on screens wider than: | 設定した画面幅よりも大きいときは固定表示させないようにします |
| Pushup Element: | 指定したHTML要素（class idなど）で固定表示が終了するようにします |
| Z-index: | 固定表示部分の前面度を指定します（数字が大きいほど前面に表示されます） |
モバイルでは意図的に動作させないようにした方がいいかも．．
現在、こちらのサイトで実際にこのプラグインを使用していますが、モバイル表示時に、固定したブロックとページトップとの関係が計算しきれないのか、スクリプトエラーが出続けてしまうようです。
上記のサイトのように、ブロックテーマ（Twenty Twenty-Two）などを使っていて、パソコン表示時にサイドバーに入れた特定のブロックを追従表示させたいだけで、モバイル時に固定表示させる必要がないのであれば、以下のコードを追加することで、モバイル時にはこのプラグインが出力するスクリプトとスタイルの読み込みを停止させて、エラーを回避することができます。
/***** モバイルでSticky Blockプラグインの動作を停止する *****/
function sample_disable_mobile_sticky_block(){
if(wp_is_mobile()){
wp_dequeue_style('sticky_block-css');
wp_dequeue_script('sticky_block-js');
}
}
add_action('wp_enqueue_scripts','sample_disable_mobile_sticky_block');このページの更新履歴
| 更新日 | 更新内容 |
|---|---|
| 2022年 9月22日 | 本ページを公開しました |
ポチップ
ポチップ
