【SWELLテーマ】カスタム投稿タイプの目次CSSを強制反映させる方法

Q: 子テーマで対応するにはどうすればいいですか？

get_template_directory_uri() を get_stylesheet_directory_uri() に置き換えると、子テーマのCSSを読み込むようになります。

SWELLテーマでカスタム投稿タイプのアーカイブページに目次ショートコードを使用しても、CSSスタイルが反映されません。

本記事では、カスタム投稿タイプのアーカイブページにSWELLの目次CSSを強制的に反映させる方法をご紹介します。

カスタム投稿タイプのアーカイブページ限定で適用

目次CSSを読み込む設定をカスタム投稿タイプのアーカイブページに限定して適用します。

SWELLテーマでは、目次のショートコードを使った際に、カスタム投稿タイプのアーカイブページでスタイルが反映されません。この問題を解決するために、wp_enqueue_style() 関数を使ってSWELLテーマの目次用CSSを手動で読み込む方法を解説します。

<?php
// カスタム投稿タイプのアーカイブで目次用CSSを読み込む
function enqueue_toc_styles_for_custom_post_type() {
    // カスタム投稿タイプのアーカイブページに限定
    if (is_post_type_archive('カスタム投稿タイプ名')) {
        // 親テーマ内のCSSを読み込む
        wp_enqueue_style(
            'swell-toc-double', // ハンドル名
            get_template_directory_uri() . '/build/css/modules/parts/toc--double.css', // 親テーマのCSSパス
            [],
            '1.0.0' // バージョン
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_toc_styles_for_custom_post_type');
?>

is_post_type_archive()

カスタム投稿タイプのアーカイブページでのみ条件を満たす関数です。
例: is_post_type_archive('post_type') は、post_type のアーカイブページを判定します。

wp_enqueue_style()

CSSファイルを読み込むためのWordPress標準関数。

'swell-toc-double': このCSSの識別子（ハンドル名）。他と衝突しないよう一意の名前を設定します。
get_template_directory_uri(): 親テーマのCSSパスを取得。必要に応じて get_stylesheet_directory_uri() を使うことで子テーマに対応できます。

add_action(‘wp_enqueue_scripts’, ‘enqueue_toc_styles_for_custom_post_type’)