web-dev-qa-db-ja.com

テーマカスタマイザのカラースライダを使用せずにTwenty Nineteenのプライマリカラーを変更するにはどうすればよいですか？

新しい2019テーマをインストールしました。カスタマイザは、「デフォルト」と「カスタム」のカラーオプションを提供します。 「カスタム」を選択すると、通常のカラーピッカーではなく、色を選択するためのスライダーが表示されます。

残念ながら、そのスライダーを使用することはかなり不評であり、カスタマイザは正確な色（色相）を入力する方法を提供していません。

このテーマの正確な色を入力するには、どこに行く必要があり、何をする必要がありますか？

注：私はHEXカラー値を入力する方法を探していません。スライダーは色相に焦点を合わせているようです（@leymannxの回答で確認できるように）が、スライダーよりも正確にするための方法です。

PS：私はデータベースとコードに不慣れではないので、そこに送っても大丈夫です。

themestheme-customizercolor-picker
2
Marjan Venema

それは確かに興味深い質問です。次の問題を見てください-どちらも修正されないため終了しました-このカラースライダーをカラーピッカーに置き換えることはお勧めできません。

つまり、Twenty Nineteenは、色相、彩度、明度からフロントエンドに表示される色を計算します（ [〜＃〜] hsl [〜＃〜] ）。そして、それは最大のアクセシビリティのためにそれをします。ユーザーが独自の16進値を選択できるようにすると、ホバーや選択状態、オーバーレイなど、色の異なるニュアンスが使用される場所で、色の組み合わせが非常にアクセスしにくくなります。

したがって、実際には、子テーマのカラースライダーを無効にするか、子テーマのスタイルシートからCSSを完全にカスタマイズすることが最善の策です。

_function wpse_338301_customize_register( $wp_customize ) {
      $wp_customize->remove_section( 'colors' );
}
add_action( 'customize_register', 'wpse_338301_customizer' );
_

または–推奨されません–上記のように子テーマからカラースライダーを無効にし、16進数の色をHSLに変換してデフォルト値を上書きし、必要なすべての異なる値のフィルターを追加してすべての異なる色のニュアンスを調整します調整します。質問のIDを16進値_#338301_として、たとえばHSLではhsl(97, 98%, 26%)になります。私はランダムなオンラインの16進数からHSLへのカラーコンバーターを使用しました。

enter image description here

まず、色相値を設定します。

_function wpse_338301_init() {
      set_theme_mod( 'primary_color', 'custom' );
      set_theme_mod( 'primary_color_hue', 97 );
}
add_action( 'init', 'wpse_338301_init' );
_

次に、すべての彩度値を設定します。

_function wpse_338301_saturation() {
      return 98;
}
add_filter( 'twentynineteen_custom_colors_saturation', 'wpse_338301_saturation' );
add_filter( 'twentynineteen_custom_colors_saturation_selection', 'wpse_338301_saturation' );
_

そして最後にすべての明度値：

_function wpse_338301_lightness() {
      return 26;
}
add_filter( 'twentynineteen_custom_colors_lightness', 'wpse_338301_lightness' );
add_filter( 'twentynineteen_custom_colors_lightness_hover', 'wpse_338301_lightness' );
add_filter( 'twentynineteen_custom_colors_lightness_selection', 'wpse_338301_lightness' );
_

詳細については、Twenty Nineteenの _inc/color-patterns.php_ を参照してください。

2
leymannx