楽天セール開催中!ポイント最大11倍! セール会場へ

WordPress│目次の文字を削る方法

SWELLの目次リンクから指定した文字列を取り除く例です。

見出し本文やリンク先IDは変更しません。

旧版の正規表現による置換を、記号をそのまま扱う文字列置換へ変更しました。

目次

著者

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

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

省略する文字列を登録

このPHPは通常の投稿だけを対象とし、固定ページには出力しません。

投稿のカスタムフィールドtoc-omit-letterに、取り除きたい文字列を1つ登録します。

「C++」「[入門]」などの記号も正規表現として解釈しません。

メタ値が空なら何もしません。

子テーマfunctions.phpなどへ追加

変更前のfunctions.phpやスニペットを保存し、既存のPHP領域へfunctionから貼り付けます。

このコードは途中でPHPとHTMLを切り替えるため、内部の?>と<?phpは削除しないでください。

旧motoki_remove_toc_omit_letterとJavaScriptは停止してから切り替えてください。

本文用のメタ値をJSONとして埋め込み、対象投稿を主クエリのIDで取得します。

function waza_literal_toc_omit() {
    if (!is_singular('post')) return;
    $word = get_post_meta(get_queried_object_id(), 'toc-omit-letter', true);
    if (!is_string($word) || $word === '') return;
    $json = wp_json_encode($word, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
    if ($json === false) return;
    ?>
    <script>
    (() => {
      const word = <?php echo $json; ?>;
      const run = () => document.querySelectorAll('.p-toc__link').forEach(link => {
        const original = link.textContent;
        const shortened = original.split(word).join('').trim();
        if (shortened && shortened !== original) link.textContent = shortened;
      });
      if (document.readyState === 'complete') run();
      else window.addEventListener('load', run, {once:true});
    })();
    </script>
    <?php
}
add_action('wp_print_footer_scripts', 'waza_literal_toc_omit');

投稿の設定を保存して目次へ反映する

省略文字は、対象の投稿に保存する1つの文字列です。

カスタムフィールドの名前をtoc-omit-letterにし、値に[入門]などを入力して投稿を更新します。

ACFで入力欄を作る場合は、テキスト型のフィールドをこの名前で用意してください。

記事本文や追加CSS欄に省略文字を入力しても、このPHPはその値を読み取りません。

PHPを設置したうえで、投稿のフィールド値が保存されているかを編集画面の再読込で確認します。

隔離環境では、ACF 6.8.10の投稿編集欄で[入門]を保存し、SWELLの目次リンクが「設定を保存する」「リンク先を確かめる」に変わりました。

本文の見出しと見出しIDはそのままで、目次リンクをEnterキーで選ぶと対応する見出しへ移動しました。

見出し全体が[入門]だけの場合は、リンク名を空にしないため元の文字が残ります。

写真の3番目がこの例です。

省略を解除するときはフィールド値を空にして投稿を更新します。

実際に空へ戻して更新すると、目次の先頭2項目にも[入門]が復帰しました。

フィールドの作成画面とスマホ表示は今回の追加確認に含めていません。

省略文字を保存した実SWELL目次
省略文字を保存した実SWELL目次。2026年10月3日、隔離したWordPress 7.1.2 / SWELL 2.19.0で撮影。

対象と制約

SWELLの.p-toc__linkに一致するリンクが対象です。

置換後に空のラベルになる場合は元の文字列を残します。

リンク内部を単純なテキストへ置き換えるため、独自のアイコンやHTMLを入れている目次にはそのまま適用しません。

ページ表示後に別スクリプトが目次を作り直す構成も対象外です。

確認と戻し方

通常文字と記号を含む文字列、文字列全体の一致、メタ未設定、目次がない投稿で確認します。

目次リンクを選んで正しい見出しへ移動することも確認してください。

戻す場合はこのフック登録と関数を停止します。

保存した見出しや記事本文の書き換えは行いません。

[入門]文字列を取り除く見本

このページの見本は対象文字列を「[入門]」に固定して、掲載PHPが出力するJavaScriptと同じ処理を動かしています。

目次では接頭辞だけを省き、この見出し本文とリンク先IDは残します。

設置先ではカスタムフィールドtoc-omit-letterの値を使います。

テーマが目次を作り終えるloadを待ってから処理し、load後の遅延実行にも対応します。

[入門]リンク先の見出しはそのまま

目次で短くなったリンクをEnterで選択し、この見出しへ移動できることを確認してください。

目次ラベルの置換は見出し内容やURLの変更を伴いません。

[入門]

この見出しは対象文字列と完全に一致します。

省略するとリンク名が空になるため、目次には元の「[入門]」を残します。

スクロール中の位置を示したい場合はサイドバー目次のハイライトを参照してください。

公開画面での確認

PCではサイドバーの目次ラベルから「[入門]」が省かれ、本文の見出しには残っています。

空のラベルになる項目は元の文言を維持します。

目次の接頭辞だけ省略し本文の見出しを保持した画面
2026年10月2日、WAZAの公開ページで撮影。

PHPの出力条件を確認する

2026年10月2日、WordPress 7.1.2・SWELL 2.19.0で実際の投稿メタから文字列を取得する処理を確認しました。

未設定・空文字・配列のメタではJavaScriptを出力せず、投稿以外にも適用しません。

終了タグや引用符を含む文字列もJSONで元の値を保持し、script要素を途中で閉じないことを確認しています。

  • URLをコピーしました!

実装を任せたい方へ

WordPressのカスタマイズ代行

ブロックの追加、テーマの改修、管理画面の調整など、記事で紹介している内容の実装を承ります。1時間 ¥8,000〜(税込)。

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

サービス

Service

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

目次