SWELLのテーマにはフックがたくさん用意されているのが、良い点です。
SWELLが用意したフックの位置なら、テンプレートを上書きせずにコードから内容を追加できます。フックのない位置では別の方法が必要です。
フックの一覧は下記の記事にまとめています。
では、実際によく使うフックとはどこでしょうか？
だいたいはウィジェットで配置できない場所にブログパーツを挿入することに使われます。
本記事ではそのフックの場所を一覧でまとめました。
フックの場所はしらこさんのサイトを参考にしています。
引用元：しらこさんのSWELLサイト
SWELLのウィジェットエリア一覧まとめ
フックを紹介する前にウィジェットの位置をおさらいします。
たとえばブログパーツにフッターのコンテンツを作成して、ショートコードをウィジェットに配置することはよくやります。
フックの前にウィジェットの場所を確認しておきましょう。2026年10月11日に参照した「外観 → ウィジェット」では21のエリアが表示されました。SWELLのバージョンは撮影記録から確認できていません。エリアの追加や名称の変更があるため、お使いの画面で確認してください。
サイドバー系
| ウィジェットエリア名 | 説明 |
|---|---|
| 共通サイドバー | サイドバーを表示するページの共通エリア |
| 共通サイドバー【スマホ版】 | 設定時にスマホの共通サイドバーを置き換える |
| トップページ専用サイドバー | トップページで共通サイドバーの上部に追加 |
| 追尾サイドバー | スクロールに追従するサイドバー（PCのみ） |
投稿・固定ページ系
| ウィジェットエリア名 | 説明 |
|---|---|
| 目次下 | 目次の下に置くエリア |
| 記事上部 | 投稿本文の上部。タイトル直前ではない |
| 記事下部 | 記事本文の下部に表示される |
| 固定ページ上部 | 固定ページの冒頭に表示される |
| 固定ページ下部 | 固定ページの最後に表示される |
| 関連記事上 | 関連記事の前に表示される |
| 関連記事下 | 関連記事の後に表示される |
トップページ専用
| ウィジェットエリア名 | 説明 |
|---|---|
| トップページ上部 | トップページのコンテンツ上部 |
| トップページ下部 | トップページのコンテンツ下部 |
スマホ用・その他
| ウィジェットエリア名 | 説明 |
|---|---|
| ヘッダー内部 | ヘッダー内部。保存ソース2.19.0ではスマホ非表示 |
| スマホ開閉メニュー下 | 開閉メニュー内の下部に表示 |
| CTAウィジェット | 記事下CTA専用のウィジェットエリア |
フッター系
| ウィジェットエリア名 | 説明 |
|---|---|
| フッター直前 | フッター全体の直前。コピーライト直前ではない |
| フッター（PC）1 | PC版フッターカラム1（左） |
| フッター（PC）2 | PC版フッターカラム2（中央） |
| フッター（PC）3 | PC版フッターカラム3（右） |
| フッター（スマホ） | スマホ表示時のフッター用 |
SWELLでフックを使ってコンテンツを挿入する場所一覧まとめ
ウィジェットでコンテンツが挿入できない場所、そこにフックが活躍します。
カスタマイズの高度な設定から挿入する方法も紹介します。2026年10月21日にSWELL 2.19.0の保存ソースのウィジェット登録・header.php・footer.php・single.phpを照合して位置の説明を修正しました。過去の画面・操作記録を今回再実施したものではありません。
この記事のPHPコードは、子テーマのfunctions.phpかCode Snippetsプラグインのどちらか1か所だけに追加してください。
親テーマ（SWELL）のfunctions.phpは更新で上書きされるため、直接編集しないでください。
コード内のpart_idは、ご自身の公開済みブログパーツIDに置き換えてください。
未公開・存在しないID・ブログパーツ以外のID・パスワード付きのパーツでは何も表示しません。
元に戻すときは、追加したadd_actionやadd_filterのコードを削除します。
ヘッダーの上にコンテンツを挿入したい
本文表示用の入口として、SWELLの高度な設定に加え、WordPress標準のwp_body_openを使える場合があります。SWELL 2.19.0の保存ソースではbody直後・ヘッダーより前で実行されています。
ただしカスタマイズの高度な設定から、コンテンツが挿入できます。
- headタグ終了直前に出力するコード（本文の表示場所には使いません）
- bodyタグ開始直後に表示する内容
メインビジュアル内部の末尾にコンテンツを挿入したい
swell_inner_main_visualはメインビジュアル内部の末尾で実行されます。
メインビジュアルが表示されないページでは、このフックからの追加内容も表示されません。
add_action('swell_inner_main_visual', function() {
$part_id = 13657; // 公開済みブログパーツのIDに変更
if ( ! shortcode_exists('blog_parts') ) return;
$part = get_post($part_id);
if ( ! $part || $part->post_type !== 'blog_parts' || $part->post_status !== 'publish' || $part->post_password !== '' ) return;
echo do_shortcode('[blog_parts id="' . absint($part_id) . '"]');
});フッターのコピーライト下にコンテンツを挿入したい
swell_after_copyrightのフックから挿入できます。
add_action('swell_after_copyright', function() {
$part_id = 64; // 公開済みブログパーツのIDに変更
if ( ! shortcode_exists('blog_parts') ) return;
$part = get_post($part_id);
if ( ! $part || $part->post_type !== 'blog_parts' || $part->post_status !== 'publish' || $part->post_password !== '' ) return;
echo do_shortcode('[blog_parts id="' . absint($part_id) . '"]');
});またはカスタマイズの高度な設定から、コンテンツが挿入できます。
- bodyタグ終了直前に出力するコード
投稿記事のタイトル上下にコンテンツを挿入したい
投稿記事の前に表示する内容
swell_before_post_headは投稿本文側の見出し処理より前に実行されます。
タイトルが「コンテンツ内」なら見出しの直前ですが、「コンテンツ上」では見出しが別の上部エリアへ移るため、このフックは上部タイトルの直前にはなりません。
固定ページには実行されません。
add_action('swell_before_post_head', function() {
$part_id = 64; // 公開済みブログパーツのIDに変更
if ( ! shortcode_exists('blog_parts') ) return;
$part = get_post($part_id);
if ( ! $part || $part->post_type !== 'blog_parts' || $part->post_status !== 'publish' || $part->post_password !== '' ) return;
echo do_shortcode('[blog_parts id="' . absint($part_id) . '"]');
});アイキャッチの前に表示する内容
swell_before_post_thumbは、投稿のアイキャッチを表示する条件が成立したとき、その直前で実行されます。
add_action('swell_before_post_thumb', function() {
$part_id = 64; // 公開済みブログパーツのIDに変更
if ( ! shortcode_exists('blog_parts') ) return;
$part = get_post($part_id);
if ( ! $part || $part->post_type !== 'blog_parts' || $part->post_status !== 'publish' || $part->post_password !== '' ) return;
echo do_shortcode('[blog_parts id="' . absint($part_id) . '"]');
});投稿タイトル位置と画像非表示で挿入先を選ぶ
| 実テンプレートの条件 | 投稿見出し前 | 投稿画像前 |
|---|---|---|
| 投稿・タイトルがコンテンツ内・画像表示 | 1回。本文側のタイトル直前 | 1回 |
| 投稿・タイトルがコンテンツ上・画像表示 | 1回。上部タイトル直前には移らない | 1回 |
| 投稿・画像を非表示 | 1回 | 0回 |
| 固定ページ | 0回 | 0回 |
SWELL 2.19.0のsingle.phpとpage.phpを隔離WordPressで実行し、二つのフックで公開ブログパーツが出る回数を照合しました。
画像を非表示にすると、その画像の前に置いた案内も出なくなります。
画像の有無にかかわらず必要な案内は、投稿見出し前など常に実行される場所を選んでください。
この確認はSWELLのテンプレート出力が対象で、すべてのプラグインの独自処理を検証した結果ではありません。
今回の確認はPHPの実テンプレート出力であり、新しい説明のPC・スマホ表示、背景動画や全スライダー、キャッシュ条件は未確認です。
メインビジュアルの表示設定と挿入回数を確認する
「外観 → カスタマイズ → トップページ → メインビジュアル」で、メインビジュアルを表示する設定と画像を確認します。
ブログパーツは公開済みにし、コードのpart_idをそのIDへ変更してから追加します。
フックを使う例では、メインビジュアル側の「ブログパーツID」に同じパーツを重ねて指定する必要はありません。
検証環境でメインビジュアルを「表示しない」にすると、メインビジュアルと追加パーツはともに出力されませんでした。
画像を1枚設定すると、#main_visual内部の末尾にパーツが1回だけ展開され、パーツ内のリンクをEnterキーで固定ページへ開けました。
掲載画像は、この画像1枚の設定で確認した実画面です。
画像2枚のスライダーでの結果は次の節にまとめています。動画と各スライド設定の全組み合わせは未検証のため、使用する表示方式で位置と重複の有無を確認してください。
戻すときはこのadd_actionを停止し、メインビジュアル自体は残って追加パーツだけ消えることを確認します。
複数スライドでも共通の案内を1回挿入する
swell_inner_main_visualに追加したブログパーツは、メインビジュアル内のスライダー本体の後に共通の案内として出力されます。
スライドを切り替えても、同じ案内を各画像の上へ個別に配置する動作にはなりません。
スライドごとに異なる内容を出したい場合は、各スライドのブログパーツ設定を確認してください。
共通案内に使う同じパーツを各スライドにも設定すると、意図しない重複につながります。
今回は画像2枚のスライダーを用意し、各スライドのブログパーツ設定を空にした状態で、フックだけに案内パーツを追加しました。
次のスライドボタンをEnterで操作すると1枚目から2枚目へ切り替わり、共通案内は1つのままでした。
案内のリンクをEnterで開き、指定した固定ページへ到達することも確認しています。
ループ機能が作る複製スライドのDOM数を、設定した画像枚数やパーツの挿入回数として数えないようにしてください。
取り消すときは、今回追加したフックのスニペットだけを無効にします。
ブログパーツ本体を削除する必要はありません。
掲載画面はPC・画像スライダーの結果であり、動画、スマホ幅、WP Rocket統合の確認は別途必要です。
Pjaxで戻った後の共通パーツを確認する
共通の案内はメインビジュアルのフックに一度だけ登録し、各スライドのブログパーツ欄へ同じ案内を重ねて指定しないようにします。
トップを直接開いた状態に加え、対象外のページからリンクでトップへ移動して案内が一つだけ出ることを確認します。
案内の通常リンクをEnterで開き、移動先の本文が表示されてからブラウザーの戻るを使います。
戻ったトップで案内が一つだけ表示され、スライドを並べるswiper-wrapperの外にあることを確認します。
2026年10月3日のWordPress 7.1.2 / SWELL 2.19.0では、この実Pjax遷移と履歴復帰で共通パーツが一つだけ表示されることを確認しました。
戻す場合は今回のswell_inner_main_visualへの登録だけを停止します。
動画方式、背景画像の取得、すべての高速化設定を含めた検証ではありません。
ブログパーツが文字列で表示されるとき
PHPのdo_shortcodeへ渡す文字列は、角括弧を1組にします。
パスワード付きブログパーツを直接展開してしまう動作も実HTTPで再現し、4例にパスワード付きパーツを除外する条件を追加しました。
角括弧を二重にすると実行が抑止され、ブログパーツではなくショートコード文字列が表示されます。
記事本文に書き方を文字として載せる場合の二重角括弧と、実行するPHP内の指定を区別してください。
SWELL 2.19.0の実画面で、掲載PHPにより投稿タイトル前・アイキャッチ前・著作権表示後と、メインビジュアルの実パーツ内部でブログパーツの本文が展開されました。
アイキャッチ前は表示条件が成立する投稿で確認し、メインビジュアルを表示しない場所にはこのフックから挿入されません。
まず挿入先を1か所に絞り、公開ブログパーツID、PCとスマートフォンの表示、コードを止めたときの状態を順に確認してください。
WordPress本体の3例も実投稿ページで本文前後とメインループ前後の出力を確認しています。
各サイトのキャッシュ設定との組み合わせと、すべてのテンプレート配置を検証したものではありません。
応用│フックのない場所にフックを仕込む方法
実はフックは特定の場所に自作することができます。
追加したい位置を出力するテンプレートや関数を調べ、対応する拡張方法を選びます。親テーマを直接編集せず、更新時の差分確認が必要な実装として扱ってください。
サンプルとして固定ページのタイトル上にswell_before_page_titleというフックを作成してみました。
作り方は別の記事に記載しています。
WordPressの本体に用意されているフックでコンテンツを挿入する
最後におまけです。
WordPressの本体に用意されているフックでコンテンツを挿入する方法もまとめておきました。
| 目的 | フック名 |
|---|---|
<head>に何か追加 | wp_head |
<body>開始直後 | wp_body_open |
| 本文前後に何か挿入 | the_content |
| 本文ループの前後に挿入（記事やカードの前後） | loop_start, loop_end |
| フッターにJS挿入など | wp_footer |
add_filter('the_content', function($content) {
if ( ! is_singular() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
// 既にこの例で加工された本文には重ねて追加しない。
$marker = '<!-- waza-content-wrapper -->';
if ( strpos( $content, $marker ) !== false ) {
return $content;
}
return $marker . '<div class="custom-before">前</div>' . $content . '<div class="custom-after">後</div>';
});add_action('loop_start', function($query) {
if ( $query->is_main_query() && !is_admin() ) {
echo '<div class="before-loop">ここにループ前のHTMLなど</div>';
}
});add_action('loop_end', function($query) {
if ( $query->is_main_query() && !is_admin() ) {
echo '<div class="after-loop">ここにループ後のHTMLなど</div>';
}
});WordPress本体のフックの一覧と実行順は、こちらです。
本文の挿入とループの挿入を使い分ける
the_contentの例は、個別ページのメインループ内で本文の前後にHTMLを追加します。
本文にSWELLのブログパーツを含めた場合も、この例では本文全体の外側に前後のHTMLが1組出力され、パーツごとの前後には追加されません。
パーツの内部を変更したい場合は、SWELLのフック一覧でswell_do_blog_partsの例を確認してください。
loop_startとloop_endは、ページ単位で一度だけ動くフックではありません。
メインクエリのループを同じリクエスト内で二度回すと、開始・終了のHTMLも二度出力されます。
二次クエリでは、この例のis_main_query判定により出力しません。
表示が重複した場合は、子テーマや追加プラグインでメインループを二度実行していないかを確認してください。
本文だけの前後に案内を出す用途ならthe_contentの例を使い、一覧全体の前後に案内を出す用途ならloop_start・loop_endを使います。
隔離環境で、実際のSWELLブログパーツを含む本文、表示後の投稿ID保持、メインループ1回、二次クエリ、メインループ2回の5条件をPHPで確認しました。
Pjaxやスマホの表示は、このサーバー側検証とは分けて確認します。
加工済み本文へ前後の案内を重ねて追加しない
末尾のthe_content例では、追加済みの印をHTMLコメントとして本文へ付けます。
同じ印がある加工済みHTMLを再処理しても、前後の要素を重ねて追加しません。
元の本文から表示を作り直す場合は前後を一組ずつ追加します。
2026年10月4日の隔離したWordPress 7.1.2 / SWELL 2.19.0で、通常本文と実際のブログパーツを含む本文へフィルターを二回適用し、前後の要素が一組のままになることを確認しました。
HTMLコメントを取り除く外部処理は未検証です。
loop_startとloop_endの例へこの重複防止を加えたわけではなく、メインループを二度回すとそちらの案内は二度出ます。
今回の例だけを停止すると本文の前後への追加を戻せます。
更新後の実画面では、本文とパーツが残り、案内が一組だけ表示されるかをPC・スマホで確認してください。
ほかの挿入位置やカスタマイズはSWELLカスタマイズまとめから探せます。
よくある質問：SWELLでフックを使ってコンテンツを挿入する場所
SWELLのフックは、どんなときに使いますか？
記事では、SWELLが用意したフックの位置なら、テンプレートを上書きせずにコードから内容を追加できます。フックのない位置では別の方法が必要です。だいたいは、ウィジェットで配置できない場所にブログパーツを挿入することに使われます。
コードは、どこに追加しますか？
記事では、この記事のPHPコードは、子テーマのfunctions.phpかCode Snippetsプラグインのどちらか1か所だけに追加します。親テーマ（SWELL）のfunctions.phpは更新で上書きされるため、直接編集しないでください。コード内のpart_idは、ご自身の公開済みブログパーツIDに置き換えてください。
ブログパーツが何も表示されないときは？
記事では、未公開・存在しないID・ブログパーツ以外のID・パスワード付きのパーツでは何も表示しません。ブログパーツが文字列で表示される場合の対処も、記事内の見出しにまとめられています。
ヘッダーの上に、コンテンツを入れられますか？
SWELLの高度な設定のbody開始直後、またはWordPress標準のwp_body_openが候補です。head内は本文コンテンツの表示場所として使いません。Pjax遷移時に再実行されるかは別途確認します。
メインビジュアルが表示されないページでは？
記事では、メインビジュアル内部の末尾に挿入するフックは、メインビジュアルが表示されないページでは、追加内容も表示されません。メインビジュアルのスライドを切り替えても、共通の案内は1つのままで、各画像の上へ個別に配置する動作にはなりません。
投稿タイトルの上に入れたいのですが、固定ページでも使えますか？
記事では、投稿記事の前に表示するフックは投稿本文側の見出し処理より前に実行されます。タイトルが「コンテンツ内」なら見出しの直前ですが、「コンテンツ上」では見出しが別の上部エリアへ移るため、上部タイトルの直前にはなりません。固定ページには実行されません。固定ページのタイトル上にフックを作る方法は、記事内で案内している別記事にあります。
WordPress本体のフックで挿入するときの、注意点は？
記事では、本文の前後に案内を出す用途ならthe_contentの例、一覧全体の前後に案内を出す用途ならloop_start・loop_endを使います。the_contentの例は本文全体の外側に前後のHTMLが1組出力され、パーツごとの前後には追加されません。loop_startとloop_endはページ単位で一度だけ動くフックではなく、メインクエリのループを同じリクエスト内で二度回すと、開始・終了のHTMLも二度出力されます。表示が重複した場合は、子テーマや追加プラグインでメインループを二度実行していないかを確認してください。
確認の範囲や、元に戻す方法は？
記事では、取り消すときは、今回追加したフックのスニペットだけを無効にします（ブログパーツ本体を削除する必要はありません）。確認はSWELL 2.19.0・WordPress 7.1.2の隔離環境（PC・画像スライダー）で、動画、スマホ幅、WP Rocket統合の確認は別途必要です。ウィジェットエリアの一覧は2026年10月11日に参照した21エリアで、SWELLの版は未確認のため、お使いの画面で確認してください。最新は公式で確認してください。
