获取定制器预览窗口的当前帖子ID

时间：2018-03-23 作者：dgwyer

是否有任何方法可以通过customizer API获取有关预览窗口中显示的当前页面的信息？

我需要获取关于初始自定义程序加载的页面信息，以及每当单击预览窗口中的链接时，例如，如果它是存档页面，或者是单一的帖子和帖子ID等。

我试图通过查看预览页面的body类来获取页面信息，但这并不太有效。每次单击预览窗口中的链接时，都会显示上一页的CSS类：

wp.customize.bind( \'ready\', function() {
    api.previewer.bind( \'ready\', function() {
        var previewBodyClass = document.querySelector(\'#customize-preview iframe\').contentWindow.document.querySelector(\'body\').className;
        var previewBodyClassArr = previewBodyClass.split(" ");
        console.log(previewBodyClassArr);
    } );
} );

无论如何，这种方法有点像黑客。我希望页面信息能够传递给定制器API以供使用。

1 个回复

最合适的回答,由SO网友:dgwyer 整理而成

我通过在每次预览窗口刷新整页或URL更改时（以及在初始自定义程序加载时）从预览窗口向自定义程序面板发送自定义事件来实现这一点。

我可以通过此事件发送有关当前页面的任何所需数据。目前，我仍然只关注body类，但毫无疑问，我会在当前页面上更新这些内容，以包含更全面的信息（通过本地化数据）。

绑定到自定义事件允许我在customizer面板中显示/隐藏控件，还可以根据当前页面和某些帖子元字段（如果我们在单篇帖子上）显示通知（非常有用）。

下面是从预览窗口发送带有body类数据的自定义事件，然后通过customizer面板绑定到该事件的基本代码。

自定义预览窗口JS：

( function( $, api ) {
  \'use strict\';

  $( function() {
    api.preview.bind( \'active\', function() {
      var bodyClass = document.querySelector(\'body\').className,
          bodyClassArr = bodyClass.split(" ");

      api.preview.send( \'custom-event\', bodyClassArr );
      console.log(\'Sent!\');
    } );
  } );
}( jQuery, wp.customize ) );

自定义程序面板JS：

( function( $, api ) {
    \'use strict\';

    wp.customize.bind( \'ready\', function() {
        wp.customize.previewer.bind( \'custom-event\', function( data ) {
            console.log(\'Data from preview window: \', data);
        } );
    } );
}( jQuery, wp.customize ) );

输出：

结束

标签： theme-customizer 小码农

小码农CODE

获取定制器预览窗口的当前帖子ID

相关推荐