位置設定

position は、theme.json の settings プロパティ内に直接ネストされたオブジェクトです。現在、単一のプロパティを設定することしかできません：

  • sticky: Position: Sticky オプションのブロックサポートを有効にするためのブール値です。

position プロパティを、デフォルト値を持つ theme.json ファイルの文脈で見てみましょう： 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "position": {
  5.             "sticky": false
  6.         }
  7.     }
  8. }

スティッキー位置の有効化

スティッキー位置は、ユーザーがページをスクロールするときに画面の上部に固定されるヘッダーを特徴とするテーマデザインに特に便利です。これは主な使用例の一つですが、他のシナリオでも役立つことがあります。

ブロックをスティッキー位置に設定すると、ユーザーがページをスクロールしたときに、そのブロックは最も近い親に固定されます。スティッキー位置は、theme.json で有効にされている場合にのみ可能です。

スティッキー位置をサポートするブロックのためにスティッキー位置を有効にするには、settings.position.sticky を true に設定します： 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "position": {
  5.             "sticky": true
  6.         }
  7.     }
  8. }

これにより、ブロックインスペクタコントロールに新しい Position タブが有効になります（位置機能をサポートするブロック、例えばグループなど）。コントロールには、利用可能な位置オプションのドロップダウンセレクトが表示されます：Default と Sticky：

WordPress サイトエディタでヘッダー テンプレート パートが選択されています。右のサイドバーでは、位置設定のためにスティッキーオプションが選択されています。

スティッキーヘッダーを作成したい場合は、ヘッダーテンプレートパートに位置設定を使用できないことに注意してください。必ずそれを含むグループブロックでラップし、グループにスティッキー位置を適用する必要があります。