制作插件时的JS/CSS更新

时间：2018-12-07 作者：Waterbarry

我对编写自己的插件还比较陌生，有些东西我想不出来，似乎在任何地方都找不到答案。如果这看起来很明显，请道歉。

我的插件有js和css文件，它们被称为：

echo \'<link rel="stylesheet" type="text/css" href="\'.plugin_dir_url( __FILE__ ) .\'treatment-slider-9.css"/>\';

echo \'<script type="text/javascript" src="\'.plugin_dir_url( __FILE__ ) .\'auto-seo-scroller-16.js"></script>\';

每次我更新文件时，我发现我必须重命名它并调用新文件，因为更新没有反映在网站上。

我没有使用任何缓存插件，在不同的浏览器中似乎都是一样的，比如隐姓埋名。

1 个回复

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

这不是WordPress的问题。这就是浏览器缓存样式和脚本的方式，这样就不需要再次下载它们。重命名文件意味着浏览器将其视为新文件并重新下载。

话虽如此，WordPress确实提供了一种绕过这个问题的方法。

但首先，您应该使用适当的函数将脚本和样式表正确地排队，wp_enqueue_script() 和wp_enqueue_stylesheet(). 请参见relevant section 更多信息，请参阅主题手册。

使用这些函数时，可以使用第4个参数添加?ver= 参数设置为具有脚本版本号的URL。每当此参数更改时，浏览器都会将其视为新文件并重新下载。

因此，您可以像这样将资产排队：

wp_enqueue_style( 
    \'treatment-slider\', 
    plugins_url( \'treatment-slider.css\', __FILE__ ), 
    [], 
    \'9\'
);
wp_enqueue_script( 
    \'auto-seo-scroller\', 
    plugins_url( \'auto-seo-scroller.js\', __FILE__ ), 
    [], 
    \'16\' 
);

因此，现在您只需将“9”和“16”更改为不同的数字，就可以告诉浏览器有一个新版本。

然而，在开发过程中，更改的速度可能会使每次更新这个数字都像重命名文件一样令人沮丧。在这种情况下，您可以使用filemtime() 函数将文件的上次修改时间用作版本号。您只需将文件的路径传递给函数：

wp_enqueue_style( 
    \'treatment-slider\', 
    plugins_url( \'treatment-slider.css\', __FILE__ ), 
    [], 
    filemtime( plugin_dir_path( __FILE__ ) . \'treatment-slider.css\' )
);

wp_enqueue_script( 
    \'auto-seo-scroller\', 
    plugins_url( \'auto-seo-scroller.js\', __FILE__ ), 
    [], 
    filemtime( plugin_dir_path( __FILE__ ) . \'auto-seo-scroller.js\' )
);

标签： plugin-development 小码农

小码农CODE

制作插件时的JS/CSS更新

相关推荐