アクションフックブロックの使い方

アクションフックブロックの使用例

アクションフックは、クラシックテーマで functions.php から使っていた「テーマのフック」を、ブロックテーマの好きな位置に自分で置けるようにするブロックです。ブロックを置いた場所で sb_action_{フック名} というアクションが発火し、PHP で echo した内容がそこに表示されます。単体では何も表示しません。フィールドブロックや自作のコードと組み合わせて使う、上級者向け(マスターブロック)のひとつです。

実際の表示

このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。

↓ ここに、フック名「manual-demo」のアクションフックブロック(モード: フィールド)を置いています。

ここはフィールドブロック「manual-demo」の中に書いた文章です。フィールドブロックの位置には表示されず、下の「アクションフック manual-demo」の位置に出力されます。

できること

  • WP Code などのスニペットプラグインや自作プラグインで書いた PHP の出力を、ページの任意の位置に表示する
  • 同じ名前のフィールドブロックの内容を、この位置に出力する(PHP で加工することもできる)
  • クエリループやクエリラップの中に置くと、各項目の投稿 ID を受け取って、その投稿のカスタムフィールドやタームを出力する

基本的な使い方

  1. ブロック挿入ツールの「shitate advanced blocks」からアクションフックを追加します。
  2. サイドバーの「Hook name」にフック名を入力します。使えるのは小文字の英数字と - _ だけです。日本語や大文字を入れると入力中は赤いエラー表示になり、入力欄から離れると自動で取り除かれます(例: catch、price、company-info)。
  3. モードを選びます(下記)。
  4. 必要なら「メモ」にこのフックの用途を書いておきます。メモはエディター内だけに表示され、フロントには出ません。
  5. functions.php またはスニペットプラグインに add_action( 'sb_action_フック名', … ) を書きます(後述)。

エディター上のブロックには、発火するフック名(do_action( 'sb_action_xxx', … ))がそのまま表示されるので、コードを書くときに名前を確認できます。

エディターでの設定画面

アクションフックを選択した状態。フック名・モード・メモを設定します。ブロック上に発火するフック名が表示されます。
アクションフックを選択した状態。フック名・モード・メモを設定します。ブロック上に発火するフック名が表示されます。
フィールドブロックを選択した状態。名前はロックされ、「PHP フック」パネルにひな形が出ます。
フィールドブロックを選択した状態。名前はロックされ、「PHP フック」パネルにひな形が出ます。

設定項目

  • Hook name(フック名) — 発火するアクション名は sb_action_{フック名} になります。
  • Mode(モード)
    • フィールド(初期値): 同じ名前のフィールドブロックの内容をこの位置に出力します。PHP のフックで加工することもできます。同名のフィールドが無く、PHP からの出力も無ければ何も表示しません。
    • PHP: フィールドは使わず、PHP のフックで echo した内容だけを表示します。
  • メモ — エディター専用の覚え書き。フロントには出力されません。
  • ブロックの設定として、上マージンと HTML アンカーが使えます。

PHP からの使い方

フックには 4 つの引数が渡されます。echo した内容がそのまま出力になります。フィールドモードで何も echo しなければ、フィールドの内容がそのまま出ます。

  • $field — 同名フィールドブロックの HTML(無ければ空文字)
  • $attributes — ブロックの属性(hookName、mode、note)
  • $block — WP_Block オブジェクト(コンテキストなどが取れます)
  • $post_id — 対象の投稿 ID。クエリループ内では各項目の投稿 ID、それ以外では表示中の投稿 ID
// フック名「catch」のブロックの位置に、フィールドの内容を div で包んで出力する
add_action( 'sb_action_catch', function ( $field, $attributes, $block, $post_id ) {
	echo '<div class="catch">' . $field . '</div>';
}, 10, 4 );

// PHP モードでカスタムフィールド「price」を出す(クエリループ内では各項目の投稿 ID が渡る)
add_action( 'sb_action_price', function ( $field, $attributes, $block, $post_id ) {
	echo esc_html( get_post_meta( $post_id, 'price', true ) );
}, 10, 4 );

すべてのアクションフックブロックで共通に発火する sb_action もあります。こちらは第 1 引数にフック名が入るので、引数は 5 つです。

add_action( 'sb_action', function ( $name, $field, $attributes, $block, $post_id ) {
	if ( 'catch' === $name ) {
		// …
	}
}, 10, 5 );

クエリループ・クエリラップの中で使う

クエリループ(またはクエリラップ)の投稿テンプレートの中に置くと、フックは項目ごとに、その投稿の ID を渡して発火します。発火している間はその投稿がグローバルの $post にセットされるので、get_the_title() や get_the_terms() などのテンプレートタグもそのまま使えます。処理が終わると元の投稿に戻ります。

フィールドモードでクエリループ内に置く場合は、フィールドブロック側で「クエリループで利用可能にする」をオンにしておく必要があります(詳しくはフィールドブロックの記事を参照)。

フィールドブロックとの組み合わせ例

「製品紹介ページのキャッチコピーを、記事一覧のカードにも出したい」という場合の流れです。

  1. 各記事の本文に、名前「catch」のフィールドブロックを置き、中にキャッチコピーを書きます。「クエリループで利用可能にする」をオンにします。
  2. 記事一覧のテンプレート(クエリループの投稿テンプレート内)に、フック名「catch」・モード「フィールド」のアクションフックを置きます。
  3. 一覧のカードごとに、その記事のキャッチコピーが表示されます。PHP は書かなくても動きます。装飾したい場合だけ上のコードのようにフックで包みます。

出力される HTML

出力がある場合だけ、<div class="sb-action-hook">…</div> で包んで表示します。出力が空のときはブロックごと何も出力しないので、空の div が残ることはありません。

注意点

  • PHP のコードに誤りがあるとページ全体の表示に影響します。まずローカルやステージングで動作を確認してから本番に反映してください。
  • echo する内容は、必要に応じて esc_html() や wp_kses_post() でエスケープしてください。$field はブロックエディターで保存された HTML なのでそのまま出力して問題ありません。
  • フック名は投稿ごとに固有である必要はありません。同じ名前のアクションフックを複数のテンプレートに置けば、同じ PHP でまとめて制御できます。

タイポグラフィスケール

変更はこのページに即時反映され、あなたのブラウザ内にだけ記憶されます。サイト側には何も保存されません。

比率が大きいほど見出し間のコントラストが強くなります(typescale.com と同じ考え方)。

画面幅 375px で使う比率。1260px までにメイン比率へなめらかに変化し、メディアクエリなしでスマホでは文字も余白も引き締まります。

本文の文字サイズ。スケール全体はここから計算されます。

すべての文字段を偶数ピクセル(2px)にスナップします。

Small / X-Small / XX-Small を比率で割らず 0.95rem / 0.8rem / 0.75rem に固定します(比率で割ると小さすぎて読みにくくなる場合の対策)。

この画面幅での実サイズ
Display / H1 –
Huge / H2 –
Extra Large / H3 –
Large / H4 –
Medium / 本文 –
Small / H6 –
X-Small –
XX-Small –