如何解决Wordpress 小部件中缺少 jQuery
使用 Astra 主题，我无法在前端使用 jQuery。它不断记录 Uncaught ReferenceError: jQuery is not defined at VM105:23。实际上假设 wordpress 配备了 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()。
提前致谢...
解决方法
问题实际上出在我编写的 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
}
知识
默认情况下，jQuery 是注册。它在管理端仅排队。
为了满足每个人的需求，Wordpress 核心 jQuery 版本不是最新的。
| 脚本名称 | 处理 | 需要依赖 | 脚本版本 | 许可 |
|---|---|---|---|---|
| jQuery | jquery |
json2（用于 AJAX 调用） | 1.12.4 |
MIT +（MIT 或 BSD） |
对于最新的 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',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;
};
};
};
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
