【SWELL】目次のタイトルを特定の記事や固定ページだけ変更するカスタマイズ方法
SWELLマニアのかんた（@swell_mania）です。
WordPressテーマ「SWELL」のカスタマイズ備忘録をシェアします。今回は、コンテンツエリアに表示される「目次のタイトル」を特定のページだけ変更する方法です。
カスタマイザー上からは設定できない？
目次のタイトルはカスタマイザー上で任意の文字列に指定可能ですが、サイト内で共通です。個別の記事や固定ページごとに変更するオプションはカスタマイザー上にはありません。
本記事では「特定の記事だけ」「固定ページだけ」といった、いくつかの条件ごとに目次のタイトルを変更する方法をシェアします。
環境
【カスタマイズ環境】
以下の環境にて今回のカスタマイズを行いました。
WordPress：6.6
SWELL：2.11.0
WordPress、SWELLとに記事執筆時に利用可能最新バージョンです。
【カスタマイズ方法】
以下の方法でのカスタマイズです。
子テーマのfunctions.phpへコードを追加する
Code Snippetsなどのプラグインにコードを追加する
Code Snippetsなど、カスタマイズコードを管理するプラグインにコードを追加する場合はテンプレートファイルを直接編集しません。
カスタマイズ本編
ここからはカスタマイズ編です。
カスタマイズの前提として、カスタマイザー上で目次のタイトルが初期設定のまま「目次」であるとします↓
【カスタマイズ①】特定の記事だけ変更するケース
記事Idが319の記事だけ、目次のタイトルを「メニュー」に変更する場合のカスタマイズコードです↓
function modify_the_content($content) {
// 投稿IDが389の場合にのみ処理を実行
if (is_single('389')) {
// 置換対象のHTMLタグと新しいテキスト
$old_text = '<span class="p-toc__ttl">目次</span>';
$new_text = '<span class="p-toc__ttl">メニュー</span>';
// コンテンツ内のテキストを置換
$content = str_replace($old_text, $new_text, $content);
}
return $content;
}
add_filter('the_content', 'modify_the_content', 20);
コード内の次の記述で、記事idが389の記事を指定しています↓
if (is_single('389')) {コード内の次の記述で「目次」を「メニュー」に変更しています↓
$old_text = '<span class="p-toc__ttl">目次</span>';
$new_text = '<span class="p-toc__ttl">メニュー</span>';メニューではなく、コンテンツと表示したい場合は次のように置換します↓
$old_text = '<span class="p-toc__ttl">目次</span>';
$new_text = '<span class="p-toc__ttl">コンテンツ</span>';【カスタマイズ②】固定ページだけ変更するケース
記事の目次タイトルは変更せず、全固定ページだけを対象にする場合は次の通りです↓
function modify_the_content($content) {
// 固定ページ
if (is_page()) {
// 置換対象のHTMLタグと新しいテキスト
$old_text = '<span class="p-toc__ttl">目次</span>';
$new_text = '<span class="p-toc__ttl">メニュー</span>';
// コンテンツ内のテキストを置換
$content = str_replace($old_text, $new_text, $content);
}
return $content;
}
add_filter('the_content', 'modify_the_content', 20);カスタマイズ①との違いは次の箇所です。
if (is_page()) {条件の指定で、is_page()関数を用いて固定ページを指定しています。
特定の固定ページだけを対象にする場合は次のように記述します↓
if (is_page('ページID')) {今回は以上です。
最後までお読みいただき、ありがとうございます。