如何向通过wp_LOCALIZE_SCRIPT()添加的脚本标记添加额外属性

时间:2020-09-02 作者:iSaumya

所以wp_localize_script() 在脚本中添加自定义数据非常棒。这些数据会添加到HTML中,如:

<script id=\'woocommerce_some-js-extra\' type="text/javascript">
var wc_some_params = {"key":"sdfsfsdfs","use_iframes":"1","images_dir":"https:\\/\\/dadadasdad.com\\/wp-content\\/plugins\\/woocommerce-some-gateway\\/assets\\/images"};
</script>
这一切都很好。但问题是如果我想add an extra attributescript 标记,而不是这样显示:

<script id=\'woocommerce_some-js-extra\' type="text/javascript">

如果我想这样展示:

<script id=\'woocommerce_some-js-extra\' data-cfasync="false" type="text/javascript">

这就是我面临的问题所在。我真的没有办法再多加一点data-cfasync="false" 属性设置为该内联脚本标记。起初,我尝试使用script_loader_tag 但问题是,当我执行以下操作时:

add_filter( \'script_loader_tag\', function( $tag, $handle ) {
    if( $handle === \'woocommerce_somesubmit\' ) {
    return str_replace( \' type\', \' data-cfasync="false" type\', $tag );
  } else {
    return $tag;
  }
}, 10, 2 );
它指向通过以下方式添加的脚本wp_enqueue_script() 并且不指向通过以下方式添加的内联脚本wp_localize_script(). 因此,它不是将该属性添加到内联脚本,而是使用src 在里面。

我想知道是否有人知道要添加/修改script 通过添加标签wp_localize_script(). 我搜索了很多,甚至检查了WordPress的核心代码,但仍然找不到解决这个问题的方法。此外,我在这个问题上没有发现类似的问题。我们将非常感谢您的帮助。

Edit/Explanation: 这里提到的答案是:How do I add custom attributes to javascript tags in Wordpress? 不适用于此问题,因为该答案显示了如何向加载外部脚本的脚本标记添加额外属性src. 但是wp_localize_script() 添加内部javascript,而不指向任何外部javascript。这个clean_url 答案中显示的方法也可以使用script_loader_tag 如果你知道脚本的句柄。

但请注意,这里我们正在寻找一种方法,通过wp_localize_script() 没有任何src 归因于它。

1 个回复
SO网友:flux

我还发现Cloudflare Rocket Loader在这种情况下会导致javascript错误。当。js文件被标记为忽略,但内联js无法如此标记,当脚本尝试访问异步加载的内联数据时,会出现未定义的错误。

详细介绍的方法How to intercept already localized scripts 仅允许您更改本地化脚本标记中的数据。一、 e:

var wc_some_params = {...}
它不允许您访问外部<script></script> 标签。添加data-cfasync="false" 属性,并重载了print_extra_script() 函数以过滤完整标记。

1。使用新筛选器创建WP\\u脚本的子类

/**
* Extends WP_Scripts class to filter inline script tags added via wp_localize_script().
*/
class WP_Filterable_Scripts extends WP_Scripts {

    private $type_attr;

    /**
    * Executes the parent class constructor and initialization, then copies in the 
    * pre-existing $wp_scripts contents
    */
    public function __construct() {
        parent::__construct();

        if (
            function_exists( \'is_admin\' ) && ! is_admin()
            &&
            function_exists( \'current_theme_supports\' ) && ! current_theme_supports( \'html5\', \'script\' )
        ) {
            $this->type_attr = " type=\'text/javascript\'";
        }

        /**
        * Copy the contents of existing $wp_scripts into the new one.
        * This is needed for numerous plug-ins that do not play nice.
        *
        * https://wordpress.stackexchange.com/a/284495/198117
        */
        if ( $GLOBALS[\'wp_scripts\'] instanceof WP_Scripts ) {
            $missing_scripts = array_diff_key( $GLOBALS[\'wp_scripts\']->registered, $this->registered );
            foreach ( $missing_scripts as $mscript ) {
                $this->registered[ $mscript->handle ] = $mscript;
            }
        }
    }

    /**
     * Adapted from wp-includes/class.wp-scripts.php and added the
     * filter `wp_filterable_script_extra_tag`
     *
     * @param string $handle
     * @param bool $echo
     *
     * @return bool|mixed|string|void
     */
    public function print_extra_script( $handle, $echo = true ) {
        $output = $this->get_data( $handle, \'data\' );
        if ( ! $output ) {
            return;
        }

        if ( ! $echo ) {
            return $output;
        }

        $tag = sprintf( "<script%s id=\'%s-js-extra\'>\\n", $this->type_attr, esc_attr( $handle ) );

        /**
        * Filters the entire inline script tag.
        *
        * @param string $tag    <script type="text/javascript" id="plug-js-extra">...</script>
        * @param string $handle Script handle.
        */
        $tag = apply_filters( \'wp_filterable_script_extra_tag\', $tag, $handle );

        // CDATA is not needed for HTML 5.
        if ( $this->type_attr ) {
            $tag .= "/* <![CDATA[ */\\n";
        }

        $tag .= "$output\\n";

        if ( $this->type_attr ) {
            $tag .= "/* ]]> */\\n";
        }

        $tag .= "</script>\\n";

        echo $tag;

        return true;
    }
}

2。创建新的可筛选的$wp\\u scripts对象可以实例化新的wp\\u filterable\\u scripts类:

add_action( \'init\', function () {
    $fscripts              = new WP_Filterable_Scripts;
    $GLOBALS[\'wp_scripts\'] = $fscripts;
}, 100 );

3。过滤标记以在需要时添加数据cfasync属性,我想保留一个要标记的句柄的黑名单,所以这里使用了一个regex数组。匹配的任何句柄都将获得data-cfasync="false" 在排队的js文件上插入标记as well as内联脚本。

function add_cfasync( $tag, $handle ) {
    $attr    = "data-cfasync=\'false\' ";
    $filters = array(
        \'/^hoverintent.*$/\',
        \'/^admin-bar$/\',
        \'/^jquery.*$/\',
        \'/.*event.*$/\',
        \'/^query-monitor$/\',
        \'/^wpmenucart-ajax-assist$/\',
    );

    if ( ! is_admin() ) {
        foreach ( $filters as $exclude_regex ) {
            if ( preg_match( $exclude_regex, $handle ) != false ) {
                $tag = str_replace( \'<script \', \'<script \' . $attr, $tag );
            }
        }
    }

    return $tag;
}
add_filter( \'wp_filterable_script_extra_tag\', \'add_cfasync\', 0, 2 );
add_filter( \'script_loader_tag\', \'add_cfasync\', 0, 2 );
如果您只想修改wp\\u localize\\u script()内联线,请删除第二个add\\u筛选器行。

Blacklisting the necessary handles has resolved all my Rocket Loader errors in Wordpress.

编辑

I have subsequently found that filtering solelywp\\u localize\\u script()内联脚本足以消除我的Wordpress站点上的所有Rocket Loader javascript错误

add_filter( \'wp_filterable_script_extra_tag\', \'add_cfasync\', 0, 2 );
在我的例子中,只要某些本地化脚本cfasync="false". YMMV。

相关推荐

喜欢和不喜欢使用JavaScript的功能

我想添加Like & Dislike 我的自定义帖子类型中的功能,称为game.我在我的帖子页脚中放置了喜欢和不喜欢的图标链接。Desired Behaviour:当用户单击like图标时,我想检查他是否已经投了赞成票,如果没有,则在post meta内创建或更新post-like-count meta键,用户meta也是如此。Problem:问题是,当用户单击like按钮时,我必须在JavaScript中处理它,但我不知道如何调用set_post_meta($post->ID)