アクションフックは、クラシックテーマで functions.php から使っていた「テーマのフック」を、ブロックテーマの好きな位置に自分で置けるようにするブロックです。ブロックを置いた場所で sb_action_{フック名} というアクションが発火し、PHP で echo した内容がそこに表示されます。単体では何も表示しません。フィールドブロックや自作のコードと組み合わせて使う、上級者向け(マスターブロック)のひとつです。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
↓ ここに、フック名「manual-demo」のアクションフックブロック(モード: フィールド)を置いています。
ここはフィールドブロック「manual-demo」の中に書いた文章です。フィールドブロックの位置には表示されず、下の「アクションフック manual-demo」の位置に出力されます。
できること
- WP Code などのスニペットプラグインや自作プラグインで書いた PHP の出力を、ページの任意の位置に表示する
- 同じ名前のフィールドブロックの内容を、この位置に出力する(PHP で加工することもできる)
- クエリループやクエリラップの中に置くと、各項目の投稿 ID を受け取って、その投稿のカスタムフィールドやタームを出力する
基本的な使い方
- ブロック挿入ツールの「shitate advanced blocks」からアクションフックを追加します。
- サイドバーの「Hook name」にフック名を入力します。使えるのは小文字の英数字と
-_だけです。日本語や大文字を入れると入力中は赤いエラー表示になり、入力欄から離れると自動で取り除かれます(例:catch、price、company-info)。 - モードを選びます(下記)。
- 必要なら「メモ」にこのフックの用途を書いておきます。メモはエディター内だけに表示され、フロントには出ません。
- functions.php またはスニペットプラグインに
add_action( 'sb_action_フック名', … )を書きます(後述)。
エディター上のブロックには、発火するフック名(do_action( 'sb_action_xxx', … ))がそのまま表示されるので、コードを書くときに名前を確認できます。
エディターでの設定画面


設定項目
- 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() などのテンプレートタグもそのまま使えます。処理が終わると元の投稿に戻ります。
フィールドモードでクエリループ内に置く場合は、フィールドブロック側で「クエリループで利用可能にする」をオンにしておく必要があります(詳しくはフィールドブロックの記事を参照)。
フィールドブロックとの組み合わせ例
「製品紹介ページのキャッチコピーを、記事一覧のカードにも出したい」という場合の流れです。
- 各記事の本文に、名前「catch」のフィールドブロックを置き、中にキャッチコピーを書きます。「クエリループで利用可能にする」をオンにします。
- 記事一覧のテンプレート(クエリループの投稿テンプレート内)に、フック名「catch」・モード「フィールド」のアクションフックを置きます。
- 一覧のカードごとに、その記事のキャッチコピーが表示されます。PHP は書かなくても動きます。装飾したい場合だけ上のコードのようにフックで包みます。
出力される HTML
出力がある場合だけ、<div class="sb-action-hook">…</div> で包んで表示します。出力が空のときはブロックごと何も出力しないので、空の div が残ることはありません。
注意点
- PHP のコードに誤りがあるとページ全体の表示に影響します。まずローカルやステージングで動作を確認してから本番に反映してください。
- echo する内容は、必要に応じて
esc_html()やwp_kses_post()でエスケープしてください。$fieldはブロックエディターで保存された HTML なのでそのまま出力して問題ありません。 - フック名は投稿ごとに固有である必要はありません。同じ名前のアクションフックを複数のテンプレートに置けば、同じ PHP でまとめて制御できます。
