ワードプレスのwp_get_global_styles_custom_cssフィルタの使用方法・解説

概要

wp_get_global_styles_custom_cssフィルタは、現在のテーマの theme.json ファイルからグローバルスタイルのカスタムCSSを取得し、カスタマイズを行うために利用されます。このフィルタを使用することで、テーマやサイトのデザインを細かく調整することが可能です。

このフィルタは以下のような機能を実装する際に役立ちます：

1. テーマのカスタムスタイルの追加
2. デフォルトのスタイルの修正
3. サイト特有のスタイル定義
4. 新しいテーマ同士の上書きルール設定
5. グローバルCSSの強化
6. レスポンシブデザインのサポート
7. ブロックエディタのスタイル調整
8. プラグインとのスタイルの統合

構文

add_filter( 'wp_get_global_styles_custom_css', 'custom_function' );

パラメータ

• $css: デフォルトのカスタムCSS。

戻り値

• $css: 修正されたカスタムCSS。

関連する関数

wp_get_global_styles_custom_css

使用可能なバージョン

このフィルタは、WordPress 5.9.0以降で利用可能です。

コアファイルのパス

wp-includes/class-wp-theme.php

この関数のアクションでの使用可能性

アクション名	使用可能
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプルコード1: 基本的なカスタムCSSの追加

function add_custom_css( $css ) {
    $css .= "
        body {
            background-color: #f0f0f0;
        }
    ";
    return $css;
}
add_filter( 'wp_get_global_styles_custom_css', 'add_custom_css' );

このコードは、ページの背景色を薄い灰色に設定するカスタムCSSを追加します。

サンプルコード2: フォントスタイルの変更

function modify_font_style( $css ) {
    $css .= "
        h1 {
            font-family: 'Arial', sans-serif;
            color: #333;
        }
    ";
    return $css;
}
add_filter( 'wp_get_global_styles_custom_css', 'modify_font_style' );

このコードは、h1要素のフォントファミリーをArialに変更し、色を濃い灰色に設定します。

サンプルコード3: ボタンスタイルのカスタマイズ

function customize_button_style( $css ) {
    $css .= "
        .wp-block-button__link {
            background-color: #0073aa;
            color: #fff;
            border-radius: 5px;
        }
    ";
    return $css;
}
add_filter( 'wp_get_global_styles_custom_css', 'customize_button_style' );

このコードは、ブロックボタンの背景色やテキスト色、ボーダー半径を設定します。

サンプルコード4: レスポンシブデザインの調整

function responsive_styles( $css ) {
    $css .= "
        @media (max-width: 600px) {
            body {
                font-size: 14px;
            }
        }
    ";
    return $css;
}
add_filter( 'wp_get_global_styles_custom_css', 'responsive_styles' );

このコードは、画面幅が600px以下のときに、フォントサイズを小さく設定します。

サンプルコード5: 特定のページでのみCSSを変更

function page_specific_styles( $css ) {
    if ( is_page( 'contact' ) ) {
        $css .= "
            .contact-form {
                border: 2px solid #0073aa;
            }
        ";
    }
    return $css;
}
add_filter( 'wp_get_global_styles_custom_css', 'page_specific_styles' );

このコードは、「contact」ページにおいて、特定のフォームにボーダーを追加します。

引用元のページは、公式のWordPress Developer Handbookなどを参照してください。