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

Question

[Владислав]

Добрый день.
Сделал переключатель в кастомайзере, при открытом кастомайзере скрипт работает, меню фиксируется при скроле, а при закрытом кастомайзере скрипт не работает, ведь файл 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" );
					}
				});
			}
		});
	});

Answer 1

[Денис Янчевский]

Добрый.

ведь файл 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' );

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

Comments

[Владислав]

это подключил в customizer.php

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' ), 
  ) );
}

это вставил в main.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");
    }
  });
}

выдает ошибку, функция themeoptions.sky_header_sticky не определена

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' );

этот пробовал, тоже подключил в customizer.php и какой js подключать main.js или customizer.js?
подключил customizer.js выдает ошибку, функция wp.customize( 'sky_header_sticky', function( value ) { не определена

Что делаю не так?

[Владислав]

Получилось, спасибо большое, ошибка была в id скрипта jquery заменил на sky-main-script и все поключилось. Это прочел в вашем ответе здесь