web-dev-qa-db-ja.com

テーマカスタマイザ設定でスタイルシートまたはスクリプトを条件付きでエンキューするにはどうすればよいですか。

私は新しいWordPressテーマを開発していて、テーマカスタマイザオプションを追加しています。それらのほとんどは驚くほど簡単に実装できましたが、私はいくつかの重要なオプションに悩まされています。

  1. 明るいテーマと暗いテーマを切り替える
  2. 2つのWebフォントの選択を切り替える

スタイルシートやスクリプトを正しくエンキューする方法を理解しています。また、テーマカスタマイザに設定、セクション、およびコントロールを追加する方法についてもよく知っています。私が今必要としているのは、スタイルシート（薄暗いスキン）とスクリプト（ウェブフォント）を条件付きでロードする方法です。

どうすればこのようなことができますか？

// if the skin is set to 'light'
     // enqueue light.css
// if the skin is set to 'dark'
     // enqueue dark.css

または

// if the font style is set to 'sans-serif'
     // enqueue source-sans-pro;
// if the font-style is set to 'serif'
     // enqueue merriweather;
theme-customizer
3
Nick Pfisterer

とった！これが私のために働いたコードです。

- テーマカスタマイザの設定とコントロール（私のものは別のcustomizer.phpファイルにあります）：

function themename_customize_register( $wp_customize ) {

    ...

    $wpcustomize->add_setting( 'themename_skin', array(
        'default' => 'light',
        ),
    );

    $wp_customize->add_control( 'themename_skin', array(
        'label'    => 'Skin',
        'section'  => 'colors',
        'settings' => 'themename_skin',
        'type'     => 'radio',
        'choices'  => array(
            'light' => 'Light',
            'dark'  => 'Dark',
            ),
        )
    );

    ...

}

add_action( 'customize_register', 'themename_customize_register' );

- 他のスクリプト/スタイルと一緒にfunctions.phpに明るい/暗いスタイルシートをエンキューします。

function themename_scripts() {

    ...

    /* Enqueue the appropriate CSS based on which skin is selected via Theme Customizer */
    $skin = get_theme_mod( 'themename_skin' );

    if ( $skin == 'light' ) {
        wp_enqueue_style( 'themename-light-skin', get_template_directory_uri() . '/skins/light.css' );
    }
    if ( $skin  == 'dark' ) {
        wp_enqueue_style( 'themename-dark-skin', get_template_directory_uri() . '/skins/dark.css' );
    }

    ...

}

add_action( 'wp_enqueue_scripts', 'themename_scripts' );

私を正しい方向に向けてくれた cale_b に感謝します。

3
Nick Pfisterer

これを試して...

//add your stylesheet url to a variable
$light = 'path to light css';
$dark = 'path to dark css';

add_action('wp_enqueue_scripts', 'theme_color_switcher');

function theme_color_switcher() {

// switch the stylesheet registration
// if light is not blank
if ($light !='') :
// then register the light color
wp_register_style('stylesheet_id', $light);

else :
// else register the dark color
wp_register_style('stylesheet_id', $dark);
endif;

wp_enqueue_style('stylesheet_id');
}

それが選択されていないとき変数$ lightを削除するあなたのテーマ能力を追加することを確認してください、さもなければあなたのテーマはライトテーマだけを登録するでしょう。

また、2つの関数とフックを作成してスタイルシートを含め、次のように 'if else'ステートメント内にアクションフックを配置することもできます。

if ($dark !='' ) :
add_action('wp_enqueue_scripts', 'darktheme_function_callback');
else :
add_action('wp_enqueue_scripts', 'lighttheme_function_callback');
endif;

//register and enqueue you dark css
// register and enqueue your light css
0
KeepMove