为什么wordpress找不到我的javascript文件？为什么我的 javascript 文件没有刷新？答案

【问题标题】：Why is my javascript file not found by wordpress? and why doesn't my javascript file refresh?为什么wordpress找不到我的javascript文件？为什么我的 javascript 文件没有刷新？
【发布时间】：2016-11-01 00:41:50
【问题描述】：

我通过wp_enqueue_script() 向 wordpress 主题添加了自定义 javascript 功能。

我把我的文件放在theme-folder/js/my-javascript.js

但它不会被 wordpress 找到！我会在 wordpress 插入的 html 源代码中看到脚本标记，但单击它会将我带到“未找到页面”。我环顾四周，看看这是否是一些缓存问题。关闭缓存，还是没有。

最后，我最终将 my-javascript.js 文件放在了主题文件夹的根目录中，而不是“js”文件夹。现在我的 js 文件被找到并加载了。

但现在有一个我不明白的新问题.. 我会编辑我的文件，但更改不会反映！每次进行更改时，我都必须更改 js 文件的文件名，还要在我的 enqueue 脚本函数中重命名文件……我只是想完成这项任务。

那么为什么会这样呢？该网站托管在 Dreamhost 上，我怀疑他们使用的是一键式安装程序。 Dreamhost 会自己做某种缓存吗？这就是为什么？

我笨吗？还是 wordpress 不知何故知道我讨厌它？

编辑：

这就是我加载脚本的方式以及我如何让它工作，但是为什么我的脚本在我进行更改时不会刷新，为什么当我将它放在主题的“js”文件夹中时它不工作？

/* Add floater script */
function add_floater_div_script(){  
    /* wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);  */
    if ( is_page(1208) ) {  
       wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), '', true);  
    }             
}  
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );

编辑： 将代码从“array (”更改为“array(”，因为有人认为这是一个问题。我自己做了一个快速检查，PHP 对这个空间没问题，所以这不解释我试图解决的奇怪的 wordpress 行为。

【问题讨论】：

对我来说似乎是缓存问题。尝试将版本号添加到您的 wp_enqueue_script()。它应该看起来像 wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array ( 'jquery' ), '1.2', true);
你确定？我还尝试通过 url 直接访问 javascript 文件并更改 wordpress 在 = 字符之后添加的最后一个数字。
hxxp://wordpress-site.org/wp-content/themes/my-theme/custom-floater-8.js?ver=4.6.1 我试图删除“?ver= 4.6.1" 部分并直接访问文件。也试过修改数字，还是不行。

标签： wordpress

【解决方案1】：

是的，缓存真的很烦人，虽然硬重新加载应该可以解决问题，但我们不能指望客户端每次都这样做。并且 WordPress 添加了一种方法来解决这个问题:)

wp_enqueue_script 接受第 4 个参数作为版本号...

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

所以每次更新后更新版本...

为了开发，只要设置为time()...这样每次都会重新加载，从不缓存...

wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), time(), true);

您的代码将如下所示...

/* Add floater script */
function add_floater_div_script(){  
    /* wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);  */
    if ( is_page(1208) ) {  
       wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), time(), true);
    }             
}  
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );

请务必从生产版本中删除 time()。 或者你的文件永远不会被浏览器缓存……只要在开发完成后设置你的主题版本，这样每个新版本都会更新JS。

【讨论】：

我认为这是最好的答案，但还没有尝试过。我会选择它，因为奖励赏金的时间限制已经不多了。我已经完成了 wordpress 的工作，所以我真的没有动力进入他们的 FTP 并进行测试，但会将此添加到我的笔记中，并且下次肯定会尝试。这似乎是有道理的，因为我在其他框架上遇到过这个问题。编辑：也因为通过 time() 生成唯一脚本版本号的解决方案。
不缓存你的脚本是一个糟糕的主意顺便说一句——它每次都会不必要地加载脚本，并延长网站的加载时间。请记住，谷歌也会根据页面速度来确定页面的排名；）您也尝试过我们的任何建议吗？如果有人发现您的问题，您应该选择一个真正适用于未来参考的...
嗨@dingo_d...谷歌不会检查这种缓存，对于谷歌来说它只是另一个永远不会运行的脚本的URL，这是由浏览器完成的（那种缓存v r尽量避免在开发期间在这里）。将time() 作为版本传递是开发人员的一种常见做法，以避免在软件开发过程中缓存脚本……一切都完成后……删除time() 非常重要，这样浏览器就可以缓存脚本，使网站更快对于用户 ;)

【解决方案2】：

尝试将您的入队操作包装在一个函数中，您将在 functions.php 中调用 after_setup_theme 钩子

<?php
add_action( 'after_setup_theme', 'yourtheme_theme_setup' );

if ( ! function_exists( 'yourtheme_theme_setup' ) ) {
    function yourtheme_theme_setup() {
        add_action( 'wp_enqueue_scripts', 'yourtheme_scripts' );
    }
}

if ( ! function_exists( 'yourtheme_scripts' ) ) {
    function yourtheme_scripts() {
        if ( is_page( 1208 ) ) {
            wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array( 'jquery' ), '', true );
        }
    }
}

还要确保您位于 id 为 1208 的页面上，以查看是否实际加载了脚本（因为有条件）。

然后执行一次硬刷新 (Ctrl+Shift+R)。

【讨论】：

为什么要检查函数是否不存在？
只是一个安全预防措施，它不是强制性的，而是防止意外调用相同函数两次的好方法。它主要推荐用于插件，但我知道他们在主题森林上需要这个，所以它一直困扰着我......
好的，我今晚要试试这个，看看是不是这样。
这不是必需的...只有当我们想从插件中覆盖（或删除）主题的挂钩/功能时，我们才需要这样做...

【解决方案3】：

我看到的最常见的问题是您将文件排入队列的方式出现错误。你可以在你的functions.php文件中发布代码，让JS文件入队吗？请务必同时参考 codex 和其他开发人员材料：https://developer.wordpress.org/themes/basics/including-css-javascript/

为了将来参考，它应该看起来像这样：

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/my-javascript.js');

编辑：在 OP 发布他们的代码后，我看到他们在数组后有一个空格，这会导致错误，这是正确的代码：

function add_floater_div_script() {
  if ( is_page( 1208 ) ) {  
      wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array( 'jquery' ), '1.0.0', true );
  }
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );

【讨论】：

我已经编辑了问题并包含了我的入队代码。请看一下，看看我做错了什么。我已经看过开发者资料了。
@8oh8 好的，看起来你在数组之后只有一个空格——我将编辑我的答案以显示正确的代码，但它应该是数组（'jquery'）而不是数组（'jquery'）
嗨 bezierer，运行测试，当数组和左括号之间有空格时，PHP 不会引发解析错误。我会编辑我的帖子，以免其他人有同样的想法。
他正在将文件排入队列...这是导致问题的缓存...应该通过在每次编辑后更新版本号来解决...在开发中...time() 可以设置为每次重新加载的版本；）

【解决方案4】：

add_action('wp_enqueue_scripts', 'load_scripts', 12);
function load_scripts() {
    wp_enqueue_script('filename', get_template_directory_uri() . '/js/filename.js', array(), '1.0.0', true );
}

这是在wordpress中导入js的正确方法..

【讨论】：

【解决方案5】：

防止缓存加载的资源文件（如 Javascript 文件）的一种非常简单的方法是在要包含的文件名之后添加一个随机值，如下所示：

       wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js' . '?' . rand(), array('jquery'), '', true);

PHP 函数

rand()

生成一个随机数，并在“？”之后附加到文件名中作为查询字符串。这会在每次加载网页时强制重新加载文件。

对于生产版本当然可以忽略它。

【讨论】：

【解决方案6】：

有时问题可能很简单，因为 enqueue_script 名称的重复声明。

  wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/custom-floater- 
  8.js', array('jquery'), '', true);

 ...

  wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/custom-floater- 
  8.js', array('jquery'), '', true);

例如，不要使用两次相同的名称“自定义脚本”。第二个将不会加载。

【讨论】：