プラグインWooCommerceのtwentynineteen_custom_colors_lightnessフィルタの使用方法・解説

概要

twentynineteen_custom_colors_lightness フィルタは、WooCommerce のテーマ Twenty Nineteen において、カスタムカラーの明るさを調整するために使用されます。具体的には、ショッピングサイトのデザインをカスタマイズする際の色彩調整に役立ちます。以下のような機能実装でよく使用されます。

カートの背景色の調整
商品ページのボタンの色変更
メニューのホバー効果色の調整
ギャラリー画像の枠色の変更
フッターのテキスト色の調整
サイドバーウィジェットの背景色のカスタマイズ

構文

add_filter('twentynineteen_custom_colors_lightness', 'your_custom_function');

パラメータ

$lightness: 明るさの数値（0から1の間）。

戻り値

カスタマイズ後の明るさの数値。

バージョン

WooCommerce: 5.0以上
WordPress: 5.0以上

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

アクション	使用例
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

function adjust_lightness($lightness) {
    return $lightness * 1.2; // 明るさを20%増加
}
add_filter('twentynineteen_custom_colors_lightness', 'adjust_lightness');

このコードは、明るさの値を20%増加させて返します。色の見え方を明るくするために使用されます。

サンプルコード2

function decrease_lightness($lightness) {
    return max(0, $lightness - 0.1); // 明るさを10%減少
}
add_filter('twentynineteen_custom_colors_lightness', 'decrease_lightness');

このコードは、指定された明るさの値を10%減少させます。色合いを暗くしたい場合に使われます。

サンプルコード3

function set_custom_lightness($lightness) {
    if (is_product()) {
        return 0.5; // 商品ページでは明るさを50%に設定
    }
    return $lightness; 
}
add_filter('twentynineteen_custom_colors_lightness', 'set_custom_lightness');

このコードは、商品ページで明るさを50%に固定します。他のページではデフォルトの明るさが適用されます。

サンプルコード4

function conditional_lightness_adjustment($lightness) {
    if (is_cart()) {
        return $lightness + 0.15; // カートページで明るさを15%増加
    }
    return $lightness;
}
add_filter('twentynineteen_custom_colors_lightness', 'conditional_lightness_adjustment');

このコードは、カートページでの明るさを15%増加させ、視認性を高めます。

サンプルコード5

function lightness_for_mobile($lightness) {
    if (wp_is_mobile()) {
        return 0.7; // モバイルデバイスでは明るさを70%に設定
    }
    return $lightness;
}
add_filter('twentynineteen_custom_colors_lightness', 'lightness_for_mobile');

このコードは、モバイルデバイスの表示時に明るさを70%に設定します。モバイル向けの視覚的調整を目的としています。

概要

構文