如何在WordPress中向javascript标记添加自定义属性?

时间:2012-04-27 作者:Brideau

我希望启用CloudFlare的RocketLoader功能,为我的Wordpress站点异步加载Javascript。然而,问题是,有一个插件我想正常加载。

从技术角度来看,根据https://www.cloudflare.com/wiki/Rocket_Loader, 我只需要更改任何想要忽略的脚本标记,就可以data-cfasync="false" 属性如下:<script data-cfasync="false" src="/javascript.js"></script>

不幸的是,我似乎不知道如何为Wordpress自动加载的插件做到这一点。

有什么想法吗?

1 个回复
SO网友:fuxia

以下解决方案假设您的插件正在使用wp_enqueue_script() 将脚本插入HTML代码。如果没有,它们就被设计破坏了,我们无法更改脚本标记。

此代码与中的代码类似this answer, 事实上,它几乎是一个复制品…

首先,列出两个您希望rocket loader脚本忽略或不忽略的所有脚本URI。然后填充$optimize 以及$ignore 以下脚本中包含这些URI的数组。

function rocket_loader_attributes( $url )
{
    $optimize = array (
        \'http://example.com/nr1.js\',
        \'http://example.com/nr2.js\'
    );
    $ignore = array (
        \'http://example.com/nr3.js\',
        \'http://example.com/nr4.js\'
    );

    if ( in_array( $url, $optimize ) )
    { // this will be optimized
        return "$url\' data-cfasync=\'true";
    }

    if ( in_array( $url, $ignore ) )
    { // this will be ignored
        return "$url\' data-cfasync=\'false";
    }

    return $url;
}
add_filter( \'clean_url\', \'rocket_loader_attributes\', 11, 1 );
您可以使用此代码创建插件,或者–次佳选项–将其添加到主题的functions.php.

结束