Wordpress customizer 사용자 지정 제어 전송 postMessage가 작동하지 않음

Wordpress customizer 사용자 지정 제어 전송 postMessage가 작동하지 않음

나는 건설 중입니다.WordPress테마 및 사용자 지정 추가 필요controlsCustomizer에서 입력 필드가 표시되지만 입력 값을 변경해도 아무 일도 일어나지 않습니다.

여기 제 코드가 있습니다.

class WP_Customize_Custom_Control extends WP_Customize_Control {
  public $type = 'custom_control';

  function render_content(){
  }
  public function content_template() {
    ?>
    <input type="text" id="custom_control" name="custom_control" />
    <?php
  }
}

function company_customize_register( $wp_customize ){
  $wp_customize->register_control_type( 'WP_Customize_Custom_Control' );
  $wp_customize->add_setting('custom_smthing', array( 'default' => get_theme_mod( "custom_smthing" ), 'transport' =>'postMessage' ) );
  $wp_customize->add_control(new WP_Customize_Custom_Control($wp_customize,'custom_smthing',
    array(
      'label'      => __( 'Custom Control', 'company' ),
      'section'    => 'body_backgrounds',
      'settings'   => 'custom_smthing',
     )
   )
  );
}
add_action( 'customize_register', 'company_customize_register' );

그리고 js는

( function( $ ) {
  console.log("test1");
  wp.customize( 'custom_smthing', function( value ) {
    console.log("test2");
    value.bind( function( to ) {
      console.log("test3");
    } );
  });
})( jQuery );

test1과 test2는 작동하지만 test3는 작동하지 않습니다.

제 대답은 당신이 찾는 게 아닐 수도 있지만,content_template는 밑줄 JS 템플릿용입니다.저는 당신의 대답으로 당신이 그것이 필요한지 아닌지 완전히 확신할 수 없습니다.그러나 여기에서 추가 정보를 찾을 수 있습니다.

제거하는 경우register_control_type입력을 정렬하고 재배치합니다.render_content방법 그것은 속임수를 쓸 것입니다.

당신의 PHP 부분은 다음과 같습니다.

class WP_Customize_Custom_Control extends WP_Customize_Control {
  public $type = 'custom_control';

  public function render_content() {
    ?>
    <label>
        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <input class="custom_control" id="custom_control" type="text" <?php $this->link(); ?> value="<?php echo esc_attr( $this->value() ); ?>">
        </label>
    <?php
  }
}

function company_customize_register( $wp_customize ){

  // $wp_customize->register_control_type( 'WP_Customize_Custom_Control' ); - remove this line

  $wp_customize->add_setting('custom_smthing', array( 'default' => get_theme_mod( "custom_smthing" ), 'transport' =>'postMessage' ) );

  $wp_customize->add_control(new WP_Customize_Custom_Control($wp_customize,'custom_smthing',
    array(
      'label'      => __( 'Custom Control', 'company' ),
      'section'    => 'body_backgrounds',
      'settings'   => 'custom_smthing',
     )
   )
  );
}
add_action( 'customize_register', 'company_customize_register' );

저는 당신의 코드를 수정했고 당신의 코드가 많은 시나리오나 최신 WP 버전에 따라 작동하지 않을 것이라는 것을 알게 되었습니다.

당신은 언급하지 않았습니다.body_backgrounds섹션을 참조하십시오.그래서 저는 생각합니다.Body Backgrounds기본값을 찾지 못했기 때문에 사용자 지정 섹션입니다.body_backgroundsWordPress의 섹션입니다.

그래서 섹션을 추가했습니다.

$wp_customize->add_section( 'body_backgrounds' , array(
    'title'      => 'Body Backgrounds',
    'priority'   => 20,
) );

WP_Customize_Control은 테마 커스터마이저를 실제로 사용할 때만 로드됩니다.따라서 'company_customize_register' 함수 내에서 클래스를 정의해야 합니다.그렇지 않으면, 그것은 줄 것입니다.PHP Fatal error: Class 'WP_Customize_Control' not found

당신은 당신의 j를 어떻게 큐에 넣는지 언급하지 않았지만 의존성을 추가하는 것이 좋습니다.jquery그리고.customize-preview.

function customizer_live_preview() {
    wp_enqueue_script(
        'theme-customizer',
        get_template_directory_uri() . '/assets/js/theme-customizer.js',
        array( 'jquery', 'customize-preview' ),
        '1.0.0',
        true
    );
}
add_action( 'customize_preview_init', 'customizer_live_preview' );

당신은 통과해야 합니다.data-customize-setting-link값을 바인딩하기 위해 입력합니다.

<input type="text" id="custom_smthing" name="custom_smthing" data-customize-setting-link="custom_smthing" />

PHP

function company_customize_register( $wp_customize ){

    class WP_Customize_Custom_Control extends WP_Customize_Control {
        public $type = 'custom_control';

        function render_content(){ }
        
        public function content_template() {?>
            <input type="text" id="custom_smthing" name="custom_smthing" data-customize-setting-link="custom_smthing" />
        <?php }
    }

    $wp_customize->register_control_type( 'WP_Customize_Custom_Control' );
    $wp_customize->add_section( 'body_backgrounds' , array(
        'title'      => 'Body Backgrounds',
        'priority'   => 20,
    ) );
    $wp_customize->add_setting('custom_smthing', array( 'default' => get_theme_mod( "custom_smthing" ) ? get_theme_mod( "custom_smthing" ) : '', 'transport' =>'postMessage' ) );
    $wp_customize->add_control(new WP_Customize_Custom_Control($wp_customize,'custom_smthing',
            array(
                'label'      => __( 'Custom Control', 'company' ),
                'section'    => 'body_backgrounds',
                'settings'   => 'custom_smthing',
            )
        )
    );
}
add_action( 'customize_register', 'company_customize_register' );

function customizer_live_preview() {
    wp_enqueue_script(
        'theme-customizer',
        get_template_directory_uri() . '/assets/js/theme-customizer.js',
        array( 'jquery', 'customize-preview' ),
        '1.0.0',
        true
    );
}
add_action( 'customize_preview_init', 'customizer_live_preview' );

"syslog-customizer.

(function( $ ) {
    "use strict";

    wp.customize('custom_smthing', function(value) {
        value.bind(function(value) {
            console.log(value);
        });
    });

})( jQuery );

테스트를 거쳐 작동합니다.

test3의 가치가 있을 때만 발사됩니다.custom_smthing변화들.

저는 그 문제를 알아냈습니다.
처음 두 개의 로그가 실행되면 질문에 아무 문제가 없습니다.
거기에는 실수가 없으며 모든 것은 공식 워드프레스 테마 개발 핸드북에 지시된 대로입니다.
그 이슈는 색인에 있었습니다.
wp_head();그리고.wp_footer();존재해야 함
제거했습니다. = 처음 두 개의 로그만 실행됩니다.
=에 올려놓았습니다. 세 개의 로그가 모두 실행되었습니다.
저를 화나게 하는 것은 왜 이것이 언론 공식 핸드북에 언급되지 않았는지입니다.
전체 핸드북의 맨 끝에 네.
하지만 이것을 포함한 많은 것들이 작동하기 위해 필수적이라고는 말하지 않습니다.

언급URL : https://stackoverflow.com/questions/34723464/wordpress-customizer-custom-control-transport-postmessage-not-working