php - wp.​​customize 不是一个函数

Question

因此，我一直在 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' );



?>

定制器.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'),
        )
    ));


}
?>

定制器.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，所以我只需要找出导致它的原因。

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

非常感谢

Answer 1

我最近遇到了同样的问题，并尝试了多种方法来解决该问题，包括将我的钩子(Hook)从 functions.php 移出并移入我的customiser.php 本身。

I managed to solve it by adjusting the following thanks to the 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 );
    }