SWELL│フックを使ってコンテンツを挿入する場所まとめ

2024.10.282026.10.04

SWELLのテーマにはフックがたくさん用意されているのが、良い点です。

他のWordPressテーマでは子テーマでテンプレートを上書きするような場面でも、SWELLならフックにコードを追加するだけでカスタマイズできます。

フックの一覧は下記の記事にまとめています。

SWELLのウィジェットエリア一覧まとめ

フックを紹介する前にウィジェットの位置をおさらいします。

たとえばブログパーツにフッターのコンテンツを作成して、ショートコードをウィジェットに配置することはよくやります。

フックの前にウィジェットの場所を覚えておきましょう。

サイドバー系

ウィジェットエリア名	説明
共通サイドバー	全ページで共通のサイドバー表示
共通サイドバー【スマホ版】	スマホ表示時の共通サイドバー
トップページ専用サイドバー	トップページだけに表示されるサイドバー
追尾サイドバー	スクロールに追従するサイドバー（PCのみ）

投稿・固定ページ系

ウィジェットエリア名	説明
記事上部	投稿のタイトル上に表示される
記事下部	記事本文の下部に表示される
固定ページ上部	固定ページの冒頭に表示される
固定ページ下部	固定ページの最後に表示される
関連記事上	関連記事の前に表示される
関連記事下	関連記事の後に表示される

トップページ専用

ウィジェットエリア名	説明
トップページ上部	トップページの上に表示される
トップページ下部	トップページの下に表示される

スマホ用・その他

ウィジェットエリア名	説明
スマホ開閉メニュー下	スマホのメニューを開いた直後に表示
CTAウィジェット	記事下CTA専用のウィジェットエリア

フッター系

ウィジェットエリア名	説明
フッター直前	コピーライトの上に表示される
フッター（PC）1	PC版フッターカラム1（左）
フッター（PC）2	PC版フッターカラム2（中央）
フッター（PC）3	PC版フッターカラム3（右）
フッター（スマホ）	スマホ表示時のフッター用

SWELLでフックを使ってコンテンツを挿入する場所一覧まとめ

ウィジェットでコンテンツが挿入できない場所、そこにフックが活躍します。

あとはカスタマイズの高度な設定からもコンテンツが挿入できるので合わせて紹介します。

この記事のPHPコードは、子テーマのfunctions.phpかCode Snippetsプラグインのどちらか1か所だけに追加してください。

親テーマ（SWELL）のfunctions.phpは更新で上書きされるため、直接編集しないでください。

コード内のpart_idは、ご自身の公開済みブログパーツIDに置き換えてください。

未公開・存在しないID・ブログパーツ以外のID・パスワード付きのパーツでは何も表示しません。

元に戻すときは、追加したadd_actionやadd_filterのコードを削除します。

ヘッダーの上にコンテンツを挿入したい

ヘッダー上に挿入できるフックはありません。

ただしカスタマイズの高度な設定から、コンテンツが挿入できます。

headタグ終了直前に出力するコード（本文の表示場所には使いません）
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タグ終了直前に出力するコード

カスタマイズの高度な設定にある、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で実行し、二つのフックで公開ブログパーツが出る回数を照合しました。

画像を非表示にすると、その画像の前に置いた案内も出なくなります。

画像の有無にかかわらず必要な案内は、投稿見出し前など常に実行される場所を選んでください。

末尾のthe_content例は、個別ページのメインループ本文に前後の要素を1回ずつ追加し、副問い合わせでは元の本文を保ちました。

加工済み本文を同じthe_contentへもう一度渡す条件は追加検証し、二重挿入を防ぐ印を加えました。

すべてのプラグインの独自処理を検証した結果ではありません。

今回の確認はPHPの実テンプレート出力であり、新しい説明のPC・スマホ表示、背景動画や全スライダー、キャッシュ条件は未確認です。

メインビジュアルの表示設定と挿入回数を確認する

「外観 → カスタマイズ → トップページ → メインビジュアル」で、メインビジュアルを表示する設定と画像を確認します。

ブログパーツは公開済みにし、コードのpart_idをそのIDへ変更してから追加します。

フックを使う例では、メインビジュアル側の「ブログパーツID」に同じパーツを重ねて指定する必要はありません。

検証環境でメインビジュアルを「表示しない」にすると、メインビジュアルと追加パーツはともに出力されませんでした。

画像を1枚設定すると、#main_visual内部の末尾にパーツが1回だけ展開され、パーツ内のリンクをEnterキーで固定ページへ開けました。

掲載画像は、この画像1枚の設定で確認した実画面です。

画像2枚のスライダーは追加確認済みです。

動画と各スライド設定の全組み合わせは未検証のため、使用する表示方式で位置と重複の有無を確認してください。

戻すときはこのadd_actionを停止し、メインビジュアル自体は残って追加パーツだけ消えることを確認します。

メインビジュアル内部の末尾に展開したブログパーツ — 2026年10月3日撮影／WordPress 7.1.2・SWELL 2.19.0／画像1枚のメインビジュアルの末尾へ挿入したリンク付きパーツ。

複数スライドでも共通の案内を1回挿入する

swell_inner_main_visualに追加したブログパーツは、メインビジュアル内のスライダー本体の後に共通の案内として出力されます。

スライドを切り替えても、同じ案内を各画像の上へ個別に配置する動作にはなりません。

スライドごとに異なる内容を出したい場合は、各スライドのブログパーツ設定を確認してください。

共通案内に使う同じパーツを各スライドにも設定すると、意図しない重複につながります。

今回は画像2枚のスライダーを用意し、各スライドのブログパーツ設定を空にした状態で、フックだけに案内パーツを追加しました。

次のスライドボタンをEnterで操作すると1枚目から2枚目へ切り替わり、共通案内は1つのままでした。

案内のリンクをEnterで開き、指定した固定ページへ到達することも確認しています。

ループ機能が作る複製スライドのDOM数を、設定した画像枚数やパーツの挿入回数として数えないようにしてください。

取り消すときは、今回追加したフックのスニペットだけを無効にします。

ブログパーツ本体を削除する必要はありません。

掲載画面はPC・画像スライダーの結果であり、動画、スマホ幅、WP Rocket統合の確認は別途必要です。

2枚目のスライドと1つの共通案内ブログパーツ。2026年10月3日、隔離したWordPress 7.1.2 / SWELL 2.19.0のPC画面で撮影。

Pjaxで戻った後の共通パーツを確認する

共通の案内はメインビジュアルのフックに一度だけ登録し、各スライドのブログパーツ欄へ同じ案内を重ねて指定しないようにします。

トップを直接開いた状態に加え、対象外のページからリンクでトップへ移動して案内が一つだけ出ることを確認します。

案内の通常リンクをEnterで開き、移動先の本文が表示されてからブラウザーの戻るを使います。

戻ったトップで案内が一つだけ表示され、スライドを並べるswiper-wrapperの外にあることを確認します。

2026年10月3日のWordPress 7.1.2 / SWELL 2.19.0では、この実Pjax遷移と履歴復帰で共通パーツが一つだけ表示されることを確認しました。

戻す場合は今回のswell_inner_main_visualへの登録だけを停止します。

動画方式、背景画像の取得、すべての高速化設定を含めた検証ではありません。

実Pjaxでトップに入った共通案内パーツ — 実Pjaxでトップに入った共通案内の位置。背景画像の取得を示す写真ではありません。2026年10月3日、隔離したWordPress 7.1.2 / SWELL 2.19.0で撮影。

ブログパーツが文字列で表示されるとき

PHPのdo_shortcodeへ渡す文字列は、角括弧を1組にします。

パスワード付きブログパーツを直接展開してしまう動作も実HTTPで再現し、4例にパスワード付きパーツを除外する条件を追加しました。

角括弧を二重にすると実行が抑止され、ブログパーツではなくショートコード文字列が表示されます。

記事本文に書き方を文字として載せる場合の二重角括弧と、実行するPHP内の指定を区別してください。

SWELL 2.19.0の実画面で、掲載PHPにより投稿タイトル前・アイキャッチ前・著作権表示後と、メインビジュアルの実パーツ内部でブログパーツの本文が展開されました。

アイキャッチ前は表示条件が成立する投稿で確認し、メインビジュアルを表示しない場所にはこのフックから挿入されません。

まず挿入先を1か所に絞り、公開ブログパーツID、PCとスマートフォンの表示、コードを止めたときの状態を順に確認してください。

WordPress本体の3例も実投稿ページで本文前後とメインループ前後の出力を確認しています。

各サイトのキャッシュ設定との組み合わせと、すべてのテンプレート配置を検証したものではありません。

2026年10月2日、SWELLの投稿タイトル前とアイキャッチ前へブログパーツを挿入した検証画面 — 掲載PHPによるブログパーツ挿入位置（2026年10月2日、SWELL 2.19.0の隔離環境）。

応用│フックのない場所にフックを仕込む方法

実はフックは特定の場所に自作することができます。

それをするためにはSWELLのテンプレートのコードを上書きしてフックを仕込む必要があります。

サンプルとして固定ページのタイトル上にswell_before_page_titleというフックを作成してみました。

テンプレートファイルの上書きはしていません。

子テーマのfunctions.phpでSWELLの関数を上書きし、その中にdo_actionを追加しています。

作り方は別の記事に記載しています。

WAZA │ WordPress・SWELL専門の技…

SWELLフックを固定記事タイトル上に追加する方法 WordPressテーマ「SWELL」で公式に用意されていない固定記事のタイトル上に独自フックを作成するカスタマイズ手順です。Code Snippetsプラグインではなくfunctions.phpへコ…

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・スマホで確認してください。

URLをコピーしました！

実装を任せたい方へ

SWELLのカスタマイズ代行

記事のコードをそのまま使うのが不安な場合や、サイトに合わせた調整が必要な場合は当社が実装します。1時間 ¥8,000〜（税込）。テーマ更新に強い書き方で納品します。

カスタマイズ代行の詳細を見る

無料で相談する

WAZAの有料記事のサブスクリプションも開始しました。

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

詳細を見る

全サービス一覧