Amazonで商品を見る セール会場へ

SWELL│目次に対して特定の項目を表示非表示するカスタマイズ

少数の見出しだけを除外するなら、見出しブロックの「高度な設定」→追加CSSクラスへswl-toc-offを付ける方法もあります。SWELL 2.19.0の目次処理でこのクラスを確認しています。以下はACFの選択欄からまとめて指定したい場合の実装です。

SWELLの目次から特定の見出しを外したいときに、ACFのチェックボックスで対象を選ぶ例です。本文の見出しは残し、目次のリンク項目だけを隠します。見出しに付けたHTMLアンカーを使うため、順番を変えても同じ見出しを識別できます。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

見出しにHTMLアンカーを付ける

対象のH2またはH3の「高度な設定」でHTMLアンカーを設定します。

overviewやdetailのように英字で始まる半角英数字・ハイフン・アンダースコアを使い、同じ記事で重複させないでください。

同期パターン内の見出しにもアンカーを付け、パターンと使用する記事の両方を保存します。

カスタムHTMLや任意の動的ブロックが生成する見出しは、この選択肢には含めません。

ACFのフィールドを用意する

ACFでチェックボックスのフィールドを作り、名前をomit_headings、戻り値を「値」にします。対象の記事編集画面に表示する条件を設定してください。選択肢は次のコードで、保存済み本文のアンカーから生成します。まず見出しを保存し、編集画面を開き直してください。

フィールド値と追加コードを変更前にバックアップしてください。選択肢と保存値には見出しのアンカー名を使います。番号からアンカー名へ自動変換する処理はありません。

子テーマのfunctions.phpに追加する

子テーマのfunctions.phpへ次のコードを追加します。既存のPHPファイルへ追記するときは先頭の<?phpを重ねません。ACFが停止している場合は何も出力しません。

<?php
// ACFのチェックボックス: omit_headings / 戻り値は「値」。
add_filter('acf/load_field/name=omit_headings', function ($field) {
    if (!is_admin()) return $field;
    $id = isset($_GET['post']) ? absint($_GET['post']) : get_the_ID();
    $field['choices'] = [];
    if (!$id) return $field;
    $visited = [];
    $walk = function ($blocks, $depth = 0) use (&$walk, &$field, &$visited) {
        if ($depth >= 8) return;
        foreach ($blocks as $block) {
            if (($block['blockName'] ?? '') === 'core/heading') {
                $level = (int) ($block['attrs']['level'] ?? 2);
                $anchor = $block['attrs']['anchor'] ?? '';
                if (in_array($level, [2, 3], true) && preg_match('/^[A-Za-z][A-Za-z0-9_-]*$/D', $anchor)) {
                    $field['choices'][$anchor] = 'H'.$level.': '.wp_strip_all_tags($block['innerHTML']).' (#'.$anchor.')';
                }
            }
            if (($block['blockName'] ?? '') === 'core/block') {
                $ref = absint($block['attrs']['ref'] ?? 0);
                if ($ref && !isset($visited[$ref])) {
                    $visited[$ref] = true;
                    $shared = get_post($ref);
                    if ($shared && $shared->post_type === 'wp_block' && $shared->post_status === 'publish' && $shared->post_password === '') {
                        $walk(parse_blocks($shared->post_content), $depth + 1);
                    }
                }
            }
            if (!empty($block['innerBlocks'])) $walk($block['innerBlocks'], $depth + 1);
        }
    };
    $walk(parse_blocks(get_post_field('post_content', $id)));
    return $field;
});
add_filter('render_block_core/heading', function ($content, $block) {
    if (is_admin() || !is_singular() || !function_exists('get_field')) return $content;
    $anchor = $block['attrs']['anchor'] ?? '';
    $level = (int) ($block['attrs']['level'] ?? 2);
    if (!in_array($level, [2, 3], true) || !is_string($anchor) || !preg_match('/^[A-Za-z][A-Za-z0-9_-]*$/D', $anchor)) return $content;
    $values = get_field('omit_headings', get_queried_object_id());
    if (!is_array($values) || !in_array($anchor, $values, true)) return $content;
    if (!class_exists('WP_HTML_Tag_Processor')) return $content;
    $html = new WP_HTML_Tag_Processor($content);
    if ($html->next_tag('H'.$level)) $html->add_class('swl-toc-off');
    return $html->get_updated_html();
}, 10, 2);

ACFの選択を保存して目次への反映を確認する

本文の見出しにHTMLアンカーを保存してから、投稿の編集画面を開き直します。

ACFの「目次から除外する見出し」で対象を選択し、投稿を更新してください。

編集画面を再読み込みしてチェックが残ることを確かめたら、公開画面の本文と目次を確認します。

本文の見出しは残し、その見出しへのリンクだけが目次から消えることが確認の基準です。

隔離したWordPress 7.1.2 / SWELL 2.19.0に公式ACF 6.8.10を導入し、同期パターン内のH3を選択して保存しました。

保存したチェックが再読み込み後も残り、実際のACF保存値に従って見出しへswl-toc-offが付き、標準目次から該当リンクが外れました。

選択を解除して再び更新すると、見出しの除外用クラスが外れ、目次のリンクも戻りました。

アンカー名を変えた場合は選択し直すことを、この手順と併せて確認してください。

今回のフィールド定義はPHPで登録し、選択値は従来の投稿編集画面から保存しました。

フィールドグループを管理画面で作成する操作、ブロックエディターの編集操作、Pjaxとスマホの表示は別途確認が必要です。

公式ACFの投稿編集画面で同期パターン内の見出しを選択した画面
公式ACFの投稿編集画面で同期パターン内の見出しを選択した画面。2026年10月3日、隔離したWordPress 7.1.2 / SWELL 2.19.0で撮影。フィールド定義はPHPで登録し、選択値を編集画面から保存しました。

使うときの制約

本文の見出しにSWELLが認識するswl-toc-offクラスをサーバー側で追加し、標準の目次生成処理で除外します。独自の目次書き換えJavaScriptは不要です。PHPのHTML Tag Processorを使うためWordPress 6.2以上が必要です。H2だけを外すとH3の所属が変わる場合があるため、節全体を外すときは配下のH3も選んでください。アンカー名を変更した場合も選び直します。Pjaxや他の目次プラグインは今回未検証です。

確認した内容

2026年10月1日、実WordPressのparse_blocksで保存済み見出しを解析し、順番を入れ替えても選択値detailが同じ見出しを指すことを確認しました。さらに実WordPressで、対象アンカー、対象外、番号だけの値、値なし、対象外レベルの5分岐を確認しました。

SWELL 2.19.0の標準目次で、通常のH2・H3に続いてグループ内の同期H3も除外できることをPCとスマホで確認しました。

公式ACF 6.8.10を使い、投稿編集画面での選択・更新・再読み込みと選択解除まで確認しました。

同期パターン内の見出しを選ぶ

core/blockのrefから公開済みwp_blockの本文も解析します。

同じ参照先は一度だけ解析し、グループと参照を含む8段階で走査を止めます。

下書き・パスワード保護・別の投稿タイプの参照先は選択肢へ追加しません。

2026年10月2日の実WordPressフィルター検証で同期H3が選択肢に追加され、非公開・保護・循環参照が候補を増やさないことを確認しました。

PC1280pxとスマホ390pxの標準目次で、同期H3を本文に残しながら目次から除外し、Enterで結論へ移動できました。

2026年10月2日の表示画面は、ACFの戻り値を検証用メタデータに置き換えた隔離環境です。公式ACFでの保存確認は前述の手順で行っています。Pjax連携は未検証です。

同期ブロックの見出しが本文に残り目次から外れた隔離画面
2026年10月2日撮影、WordPress 7.1.2・SWELL 2.19.0の隔離環境。

元に戻す

選択をすべて解除して保存するか、追加した2つのフィルターを停止し、ページキャッシュを更新します。HTMLアンカーはリンク先として使われていれば残してください。見出しを検索対策のために増やして目次だけ隠すのではなく、読者が読み進めやすい見出し構成を先に整えます。

目次の詳細リンクだけを隠し、本文の詳細見出しを残した検証画面
2026年10月1日撮影。実SWELLが目次を生成したローカル検証。本文とACF戻り値は検証用で、ACF編集画面ではありません。
  • URLをコピーしました!

実装を任せたい方へ

SWELLのカスタマイズ代行

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

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

サービス

Service

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

目次