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



?>

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所以我只需要弄清楚导致它的原因。

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

非常感谢

Answer 1

@Matty Clarke，您应该将脚本放入customize_preview_init钩子中。
即此行
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
成为
add_action( 'customize_preview_init', 'wpdocs_scripts_method' );

Answer 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 );
    }

wp.customize不是函数

2 个答案:

wp.​​customize不是函数

2 个答案:

wp.customize不是函数