Wordpress Customizer内容特定控件

时间:2016-04-16 13:51:05

标签: javascript php wordpress wordpress-theming

我在Wordpress的自定义主题中遇到了一个挑战。我想在我的主题定制器中使用内容特定的控件。我知道有选项" active_callback",但这不足以达到我的目的,我阅读了2篇关于定制器和这篇https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/文章的文档文章,但仍然没有任何线索,这就是我想要的实现:

例如,我希望"显示侧边栏"复选框,但此复选框应该是更多上下文指定。例如,当我将在主页上时,只有一个复选框为"显示侧栏默认"但是当我进入某个帖子时,我想要3个复选框:

  1. "显示侧边栏默认" - id =" show_sidebar"
  2. "在Post archive page"中显示侧栏 - id =" show_sidebar_archive_ {post_type}"
  3. "显示此帖子的侧边栏" - id =" show_sidebar_singular_ {post_id}"
  4. 因此,当我想要控制时使用这种特定的ID时,只需要active_callback,因为它只能显示/隐藏控件,当iframe中的URL发生变化时,我无法创建新的。

    可能有2个解决方案: 1.更好 - 当我能以某种方式通过上下文创建/删除控件时,这将是最好的解决方案。如果以某种方式使用自定义程序API,请给我一个提示 2.不好,但足够 - 至少有可能以某种方式重新加载整个/wp-admin/customize.php?url=用新点击的网址?这可能需要一段时间

    thx任何建议!

1 个答案:

答案 0 :(得分:0)

好的,我想出了第二个解决方案,这里是代码。它现在适合我。

'use strict';

(function ($) {

  /**
   * This is important fix for Theme Customizer
   * It will change whole customizer url, because we need to load
   * all controls ahan for new url, because of hierarchical options
   */
  if ( /\/customize\.php$/.test( window.location.pathname ) ) {
    wp.customize.bind( 'preview-ready', function() {
      var body = $( 'body' );
      body.off( 'click.preview' );
      body.on( 'click.preview', 'a[href]', function( event ) {
        var link, isInternalJumpLink;
        link = $( this );
        isInternalJumpLink = ( '#' === link.attr( 'href' ).substr( 0, 1 ) );
        event.preventDefault();

        if ( isInternalJumpLink && '#' !== link.attr( 'href' ) ) {
          $( link.attr( 'href' ) ).each( function() {
            this.scrollIntoView();
          } );
        }

        /*
         * Note the shift key is checked so shift+click on widgets or
         * nav menu items can just result on focusing on the corresponding
         * control instead of also navigating to the URL linked to.
         */
        if ( event.shiftKey || isInternalJumpLink ) {
          return;
        }
        //self.send( 'scroll', 0 );
        //self.send( 'url', link.prop( 'href' ) );

        var newUrl = link.prop( 'href' );
        var currentUrl = window.location.href;

        var customizeUrl = currentUrl.substring(0, currentUrl.indexOf("?url=") + 5) + newUrl;

        // Reload whole customizer for new url
        window.parent.location.replace(customizeUrl);
      });
    } );
  }
})(jQuery);
//# sourceMappingURL=customizer.js.map