スクロールに応じてブロックをページ上部へ固定表示するプラグイン「Sticky Block for Gutenberg Editor」

スクロールに応じてブロックをページ上部へ固定表示するプラグイン「Sticky Block for Gutenberg Editor」

「Sticky Block for Gutenberg Editor」は、本文やテーマテンプレート内の任意のブロックをスクロールに応じてページ上部へ固定表示させることができるプラグインです。

特にサイドバーという概念を持たないブロックテーマで、作成したサイドバー部分の特定のパーツを、固定(追従)表示させることができるので重宝します。

2022年9月22日現在、ブロックテーマであるTT2(Twenty Twenty-Two)テーマを使って勝手に作成したこちらのデモサイトのサイドバー部分で使用していますので、どのように動作するのかを確認できます。

ページ上部へ戻る▲

【Sticky Block for Gutenberg Editor】プラグインの用途や機能

このプラグインで追加される「Sticky」というブロック内に配置した任意のブロックをスクロールに応じて上部へ固定表示させることができます。

スクロールに応じてブロックをページ上部へ固定表示するプラグイン「Sticky Block for Gutenberg Editor」|Knowledge Base
画像は公式サイトからリンク挿入しています

ページ上部へ戻る▲

本ページを最後に編集したときの環境・バージョンなど

プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。

プラグインを使用(試用)したテスト環境・公式ページなど

この紹介記事作成にあたって、試用(テスト)を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。

テストしたサーバー カラフルボックス
WordPressバージョン6.0.2
PHPバージョン7.4.27
テストしたテーマHABONE(本サイトでも使用しているオリジナルテーマ)
プラグインバージョン本記事で紹介するために試用したバージョン :1.11 
公式サイトで配布されている最新バージョン :1.11
※バージョンが違うと、仕様が大きく変更となっている可能性があります
テストした日2022年9月22日
※本記事の最終更新日であり、実際の試用日とは異なることがあります
公式サイト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:固定表示部分の前面度を指定します(数字が大きいほど前面に表示されます)

モバイルでは意図的に動作させないようにした方がいいかも..

2022年9月22日現在、こちらのサイトで実際にこのプラグインを使用していますが、モバイル表示時に、固定したブロックとページトップとの関係が計算しきれないのか、スクリプトエラーが出続けてしまうようです。

上記のサイトのように、ブロックテーマ(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日本ページを公開しました
これからはじめる人・駆け出しのWebデザイナーに向けて シリーズ27万部以上の大ヒット! 「1冊ですべて身につく」の最新作が新登場! 今度は世界中で大人気のWordPress! この本でWebサイトが作れる!著:Mana
¥2,200 (2023/02/03 13:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahooショッピングで探す
WordPressによるWebサイト制作のための,究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで,余すところなく集めました。著:狩野 祐東
¥2,905 (2023/02/03 13:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahooショッピングで探す
Avatar photo

作者:

☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、このサイトでも使用している【HABONE】テーマの制作と配布を行っています。

年齢:50代 趣味/園芸・ペット・卓球