Vladddosss
@Vladddosss

Как сделать fixed меню WordPress?

Добрый день.
Сделал переключатель в кастомайзере, при открытом кастомайзере скрипт работает, меню фиксируется при скроле, а при закрытом кастомайзере скрипт не работает, ведь файл javascript подключается в кастомайзере. Как сделать, чтобы скрипт работал при закрытом кастомайзере?
$wp_customize->add_setting( 'sky_header_sticky', array(
		'default'				=> false,
		'transport'				=> 'postMessage',
	) );

	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'sky_header_sticky', array(
		'label'					=> esc_html__('Sticky Header', 'sky'),
		'type'					=> 'checkbox',
		'section'				=> 'sky_header_general',
		'settings'				=> 'sky_header_sticky',
		'priority'				=> 10,
	) ) );

wp.customize( 'sky_header_sticky', function( value ) {
		value.bind( function( newval ) {
			var inner = $( '#site-header' );
			if ( true == newval ) {
				$( window ).scroll( function() {
					if ( $( this ).scrollTop() > 200 ) {
						inner.addClass( "fixed" );
					} else {
						inner.removeClass( "fixed" );
					}
				});
			}
		});
	});
  • Вопрос задан
  • 34 просмотра
Решения вопроса 1
deniscopro
@deniscopro Куратор тега WordPress
WordPress-разработчик, denisco.pro
Добрый.

ведь файл javascript подключается в кастомайзере.

Добавьте его в файл со скриптами в теме. Значение sky_header_sticky можно передать в js с помощью функции wp_localize_script
add_action( 'wp_enqueue_scripts', 'action_function_name_7714', 99 );
function action_function_name_7714(){
	wp_localize_script( 'jquery', 'themeoptions', array( 
		'sky_header_sticky' => get_theme_mod( 'sky_header_sticky' ), 
	) );
}

ну и затем в js аналогично Вашему коду
var inner = $( '#site-header' );
if (true == themeoptions.sky_header_sticky) {
	$(window).scroll(function () {
		if ($(this).scrollTop() > 200) {
			inner.addClass("fixed");
		} else {
			inner.removeClass("fixed");
		}
	});
}

Если хотите подключать отдельным файлом, то можно добавить условие на подключение:
function wpdocs_theme_name_scripts() {
    if( get_theme_mod( 'sky_header_sticky' ) ) {
        wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

в этом случае передавать ничего не нужно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы