Как сделать возможность выбора шрифта в теме WP?

Question

[Владислав]

Добрый день.

Сделал стандартную настройку в кастомайзере

$wp_customize->add_setting( 'sky_typography_font_family', array(
		'default'				=> 'roboto',
		'sanitize_callback' 	=> 'sky_sanitize_select',
	) );

	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'sky_typography_font_family', array(
		'label'					=> esc_html__('Font Family', 'sky'),
		'section'				=> 'sky_typography_body',
		'settings'				=> 'sky_typography_font_family',
		'priority'				=> 10,
		'type'           => 'select',
        'choices'        => array(
            'roboto'   => esc_html( 'Roboto', 'sky' ),
            'open-sans'   => esc_html( 'Open Sans', 'sky' ),
        )
	) ) );

Как сделать, чтобы при выборе Roboto поключалась ссылка на гугл шрифт Roboto, если сменить на Open Sans, то подключалась ссылка Open Sans.

Попробовал сделать через font-family: '<?php echo get_theme_mod( ' ', ' ' ); ?>', sans-serif; } но так выводит ключи, а не значения и шрифт не применяется.

Подскажите, как можно реализовать?

Comments

[yarovikov]

А как вы вообще шрифты подгружаете на сайт?

[Владислав]

yarovikov,

wp_register_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap&subset=cyrillic-ext,greek-ext' );

wp_enqueue_style( 'google-fonts' );

[yarovikov]

Vladddosss,

"'Roboto', sans-serif" => "Roboto",

echo 'body {font-family:' . get_theme_mod('sky_typography_font_family', '"Open Sans", sans-serif') . '}'; // "Open Sans", sans-serif - шрифт по умолчанию

[Владислав]

yarovikov, В настройках кастомайзера нельзя писать с пробелом 'Open Sans' => esc_html( 'Open Sans', 'sky' ), если пишу ключ с пробелом он не срабатывает в кастомайзере

[Владислав]

Решил так

function sky_typography_body() {

	if ( 'roboto' == get_theme_mod( 'sky_typography_font_family', 'roboto' ) ) {
		wp_register_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap&subset=cyrillic-ext,greek-ext' );
		$classes[] = 'Roboto';
		
	} else if ( 'open-sans' == get_theme_mod( 'sky_typography_font_family', 'roboto' ) ) {
		wp_register_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap&subset=cyrillic-ext,greek-ext' );
		$classes[] = 'Open Sans';
	}
	wp_enqueue_style( 'google-fonts' );

	// Turn classes array into space seperated string
	$classes = implode( ' ', $classes );

	// Return classes
	return esc_attr( $classes );
}

Примитивно, но работает. Кто знает, как сделать по профессиональному, напишите.

[yarovikov]

Vladddosss, используйте case

[Владимир Брумер]

Vladddosss, все верно говорят проще будет использовать свитч кейс или тернарное выражение + один раз писать
wp_register_style()
например:

$Opt=get_theme_mod( 'sky_typography_font_family','roboto' );
$roboto='//fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap&subset=cyrillic-ext,greek-ext';
$opensans='//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap&subset=cyrillic-ext,greek-ext';
// 1 вариант
// wp_register_style('google-fonts',$Opt=='roboto'?''.$roboto.'':($Opt=='open-sans'?''.$opensans.'':''.$roboto.''));
echo $Opt=='roboto'?''.$roboto.'':($Opt=='open-sans'?''.$opensans.'':''.$roboto.'');

// 2 вариант
$newOpt=$Opt=='roboto'?''.$roboto.'':($Opt=='open-sans'?''.$opensans.'':''.$roboto.'');
// wp_register_style('google-fonts',$newOpt);
echo $newOpt;

// 3 вариант через свитч т.к у Вас 2 действия при условии
switch($Opt){
	case'roboto':$newOpt=$roboto;$classes[]='Roboto';break;
	case'open-sans':$newOpt=$opensans;$classes[]='Open Sans';break;
	default:$newOpt=$roboto;$classes[]='Roboto';break;
}
// wp_register_style('google-fonts',$newOpt);
echo $newOpt;

но надо правда тестить я проверял через echo....
з.ы. в Вашем случае ещё 3 варианта нет при проверке, когда опции нет совсем.... свитч кэйс этот вариант в default обработает...