wp.​​customize不是函数

因此, 我一直在Mutlisite上开发自己的主题, 而我正在使用的默认主题正在构建的测试站点之一正在输出以下错误：

Uncaught TypeError: wp.customize is not a function
    at HTMLDocument.<anonymous> (customizer.js?ver=4.9.5:3)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

我的functions.php具有以下功能：

<?php

// Include Theme Customizer Settings
require_once('includes/customizer.php');

//


// MEDIA LIBRARY QUEUE
add_action('wp_enqueue_scripts', 'my_register_javascript', 100);
function my_register_javascript() {
  wp_register_script('mediaelement', plugins_url('wp-mediaelement.min.js', __FILE__), array('jquery'), '4.8.2', true);
  wp_enqueue_script('mediaelement');
}

// REQUIRE BS MENU
require_once get_template_directory() . '/includes/class-wp-bootstrap-navwalker.php';

// REGISTER MAIN MENU LOCATION
function register_my_menu() {
  register_nav_menu('main-menu', __( 'Main Menu' ));
}
add_action( 'init', 'register_my_menu' );

// ADD LOGO SUPPORT TO THEME
function pb_custom_logo() {
  add_theme_support( 'custom-logo', array(
    'header-text' => array( 'site-title', 'site-description' ), ));
}
add_action( 'after_setup_theme', 'pb_custom_logo' );
function theme_prefix_the_custom_logo() {
    if ( function_exists( 'the_custom_logo' ) ) {
        the_custom_logo();
    }
}


// Add thumbnail support to posts
add_theme_support( 'post-thumbnails' );

// Create Services Post Type
function services_posttype() {

  register_post_type( 'Services', // CPT Options
      array(
          'labels' => array(
            'name' => __( 'Services' ), 'singular_name' => __( 'Service' )
          ), 'public' => true, 'has_archive' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'rewrite' => array('slug' => 'services'), )
  );
}
// Hooking up our function to theme setup
add_action( 'init', 'services_posttype' );



?>

Customizer.php：

<?php

function wpdocs_scripts_method() {
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/customizer.js', array( 'jquery' ) );
  }
  add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );

add_action( 'customize_register', 'pb_customizer_settings' );
function pb_customizer_settings( $wp_customize ) {


    //
    // MAIN HOME BANNER
    //

    $wp_customize->add_section( 'pb_front_page_banner' , array(
        'title'      => 'Front Page Banner', 'priority'   => 30, ));
    $wp_customize->add_setting( 'banner_image' , array(
        'transport'   => 'refresh', ));
    $wp_customize->add_control( 
        new WP_Customize_Image_Control(
            $wp_customize, 'banner_image', array(
                'label' => 'Banner Image', 'section' => 'pb_front_page_banner', 'settings' => 'banner_image', 'priority' => 2, 'description' => 'This will change your photo on the main header of the front page.', )
        )
    );

    // BANNER TITLE

    $wp_customize->add_setting('banner_title', array(
        'default'     => 'This is the main header content.', 'transport'   => 'postMessage', ));
    $wp_customize->add_control( 'banner_title', array(
        'label'     => 'Banner Title', 'section'   => 'pb_front_page_banner', 'type'      => 'text', 'description' => 'This is the main title on the banner.', ));

    // BANNER PARAGRAPH 

    $wp_customize->add_setting('banner_para', array(
        'default'     => 'This is the main content which will be displayed in a paragraph.', 'transport'   => 'postMessage', ));
    $wp_customize->add_control( 'banner_para', array(
        'label'     => 'Banner Paragraph', 'section'   => 'pb_front_page_banner', 'type'      => 'textarea', 'description' => 'This is the text under the main title on the banner.', ));

    /////////////////////
    // CONTACT DETAILS //
    /////////////////////

    // Create the section
    $wp_customize->add_section('pb_foot_contact' , array(
        'title'      => 'Contact Details', 'priority'   => 30, ));

    //Telephone

    $wp_customize->add_setting('contact_det_tel', array(
        'default'     => '', 'transport'   => 'postMessage', ));
    $wp_customize->add_control('contact_det_tel', array(
        'label'     => 'Telephone Number', 'section'   => 'pb_foot_contact', 'type'      => 'text', 'description' => 'This will display your telephone number so customers can call you.', 'input_attrs' => array(
            'placeholder' => __('e.g 0151 123 4567'), )
    ));

    //Email Address

    $wp_customize->add_setting('contact_det_email', array(
        'default'     => '', 'transport'   => 'postMessage', ));
    $wp_customize->add_control('contact_det_email', array(
        'label'     => 'E-Mail Address', 'section'   => 'pb_foot_contact', 'type'      => 'text', 'description' => 'This will show customers what E-Mail Address you can be contacted on.', 'input_attrs' => array(
            'placeholder' => __( 'e.g info@powerbookings.com'), )
    ));

    //Company Address

    $wp_customize->add_setting('contact_det_address', array(
        'default'     => '', 'transport'   => 'postMessage', ));
    $wp_customize->add_control('contact_det_address', array(
        'label'     => 'Company Address', 'section'   => 'pb_foot_contact', 'type'      => 'textarea', 'description' => 'This will display your trading address to your customers. Create a new line by typing <code>&lt;br&gt;</code>. ', 'input_attrs' => array(
            'placeholder' => __('Company Address'), )
    ));

    //Company Address

    $wp_customize->add_setting('contact_det_opening', array(
        'default'     => '', 'transport'   => 'postMessage', ));
    $wp_customize->add_control('contact_det_opening', array(
        'label'     => 'Opening Hours', 'section'   => 'pb_foot_contact', 'type'      => 'textarea', 'description' => 'Show your customers what times you are open, and when you are closed. Create a new line by typing <code>&lt;br&gt;</code>.', 'input_attrs' => array(
            'placeholder' => __('Opening Hours'), )
    ));


}
?>

Customizer.js

jQuery(document).ready( function($){

    wp.customize( 'banner_title', function( value ) {
        value.bind( function( newval ) {
          $( '.mi-content h1' ).html( newval );
        } );
      } );

    wp.customize( 'banner_para', function( value ) {
      value.bind( function( newval ) {
        $( '.mi-content p' ).html( newval );
      } );
    } );

    wp.customize('contact_det_tel', function(value) {
      console.log("postMessage");
      value.bind(function(newval) {
        $('.contact_det_tel').html(newval);
      } );
    });
    wp.customize('contact_det_email', function(value) {
      value.bind(function(newval) {
        $('.contact_det_email').html(newval);
      } );
    });
    wp.customize('contact_det_address', function(value) {
      value.bind(function(newval) {
        $('.contact_det_address').html(newval);
      } );
    });
    wp.customize('contact_det_opening', function(value) {
      value.bind(function(newval) {
        $('.contact_det_opening').html(newval);
      } );
    });



});

现在, 当我使用WordPress定制程序编辑站点时, 这些功能似乎正常工作, 但是当我在前端查看站点时, 它会收到第一条消息。

我假设我将文件链接到主题中的其他位置, 但是我似乎无法掌握其中的位置或包含方式。有问题的文件是customize.js, 所以我只需要弄清楚是什么原因引起的。

这就是我认为与此相关的所有信息, 如果有人有解决方案, 我将不胜感激, 如果他们能帮助我。

非常感谢

#1

@Matty Clarke, 你应该将脚本放入custom_preview_init挂钩中。

即这条线

add_action(‘wp_enqueue_scripts’, ‘wpdocs_scripts_method’);

变成

add_action(‘customize_preview_init’, ‘wpdocs_scripts_method’);

#2

最近, 我遇到了同样的问题, 并尝试了许多方法来解决该问题, 包括将我的钩子从functions.php移到了customiser.php本身。

通过WP Codex, 我通过调整以下内容设法解决了该问题；

add_action( 'customize_preview_init', 'theme_preview_register' );
function theme_preview_register() {
    // Customizer JS
    wp_enqueue_script( 
       'wpa-customizer', get_stylesheet_directory_uri() . '/js/wpa-customizer.js', array( 'jquery', 'customize-preview' ), // <<< Specify Dependencies...
        true );
    }