Question

使用 Astra 主题，我无法在前端使用 jQuery。它不断记录 Uncaught ReferenceError: jQuery is not defined at VM105:23。实际上假设 Wordpress 配备了 jQuery，但我无法弄清楚为什么我在控制台中收到“未定义”错误消息。

为了添加jQuery，我只写了如下代码，没有效果：

    function addjq () {
      wp_enqueue_script('jquery', plugin_dir_url(__FILE__) . '/in/jq.js', array('jquery'), null, false);
    }
    add_action('wp_enqueue_scripts', 'addjq');

我在一个小部件中使用这个部分，它不包括 jquery 到前端。它实际上提出了Uncaught ReferenceError。问题是否与我的 jquery 文件网址有关，还是我需要解决的核心问题。你能帮我解决这个问题吗，让我知道如何在插件jquery中使用widget。以下 jQuery 代码抛出该控制台错误：

jQuery(document).ready(function() {
   // Some Code Goes Here...
  })

我还尝试向脚本标记添加 src 属性，并引入 jQuery。 RESULT：错误消失了，但没有运行 jQuery 代码。连我都做不了一个简单的console.log()。

提前致谢...

Answer 1

问题实际上出在我编写的 jQuery 代码上。

    jQuery(document).ready(function() {
      // Some Code Goes Here...
    })

看看完整的片段：

    public function doSomethingSpecific() {
        ?>
            <script type="text/javascript" >
                              
                    jQuery(document).ready(function() {
                      console.log('Hello World!');
                    })

                }

            </script>
        <?php
    }

由于上述函数没有正确入队，而且实际上应该在 jQuery 加载之前一直运行，所以我收到了 Uncaught ReferenceError: jQuery is not defined at VM105:23 错误。所以我解决问题的方法是等待页面完全加载，然后调用代码。因此，我将上面显示的 jQuery 段更改为以下内容，这很好。问题解决了，绝对不需要排队 'jQuery'。

    public function webcamcapchur() {
        ?>
            <script type="text/javascript" >
                window.onload = function doLoadThePage(event) {
                    jQuery(document).ready(function() {
                      console.log('Hello World!');
                    })
                }

            </script>
        <?php
    }

Answer 2

知识

默认情况下，jQuery 是注册。它在管理端仅排队。

为了满足每个人的需求，Wordpress 核心 jQuery 版本不是最新的。

<头>

脚本名称	处理	需要依赖	脚本版本	许可
jQuery	`jquery`	json2（用于 AJAX 调用）	`1.12.4`	MIT +（MIT 或 BSD）

来源@wp_enqueue_script() function CODEX page

对于最新的 Wordpress 版本 (WP > 3.8)，jQuery 迁移版本已经到位。运行最新的 jQuery 3.5.1

<头>

处理	WordPress 中的路径
`jquery-migrate`	/wp-includes/js/jquery/jquery-migrate.js（`v1.10.2` WP `3.8`）

如果您想将自己的版本加入队列，通常的做法是在前端取消注册核心 jQuery 版本。

<?php
if( ! is_admin() ) {
  wp_deregister_script( 'jquery' );
}; ?>

你的错误

wp_enqueue_script('jquery', plugin_dir_url(__FILE__) . '/in/jq.js', array('jquery'), null, false);

在这里，您几乎是在要求 jQuery 将自己排在自己身后。您定义了一个 jquery 句柄（它已被 jQuery 核心使用）。并且您指定 array( 'jquery' ) / ... jquery 不应在 jquery 之前入队。

我们能做什么？

好吧，假设我们将使用我们自己的 jQuery 以确保我们使用的是最新版本。我们使用 wp_deregister_script() 注销 jQuery 核心，我们将使用 CDN 从 jQuery website 获取我们的最新版本。我们可以使用 @fopen 设置回退系统。我们可以将所有必要的属性（如 integrity 键和 crossorigin 或 preload prefetch 属性）附加到新的脚本标记中，以确保全局性能。

add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if( ! is_admin() ) {

    /**
    * Deregister Wordpress jquery core version
    * @link https://developer.wordpress.org/reference/functions/wp_deregister_script/
    */
    wp_deregister_script( 'jquery' );

    /**
    * Register then enqueue jquery_js
    * @link https://developer.wordpress.org/reference/functions/wp_register_script/
    * @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    *
    * Check if CDN's url is valid, if not return fallback
    * @link https://www.php.net/manual/en/function.fopen.php
    *
    * Add rel='preload' <link> and required attributes to jquery_js
    * Filters the HTML link tag of an enqueued style & add required attributes
    * @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
    */
    $test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
    if( $test_jquery_js !== false ) {
      wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', true );
    } else {
      wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
    };
    wp_enqueue_script( 'jquery_js' );
    add_filter( 'script_loader_tag', 'data_jquery_js', 10, 3 );
    function data_jquery_js( $tag, $handle, $src ) {
      if( $handle === 'jquery_js' ) {
        $integrity = 'sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=';
        $tag = str_replace(
          array(
            "<script",
            "></script>",
          ),
          array(
            "<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
            "integrity='" . $integrity . "' crossorigin='anonymous' async></script>",
          ),
          $tag
        );
      };
      return $tag;
    };

  };
};

Wordpress 小部件中缺少 jQuery

2 个答案:

知识

你的错误

我们能做什么？