您没有遵循最佳实践。
任何脚本都应该通过wp_enqueue_scripts()
触发钩子添加到 Wordpress 触发序列中。
当脚本和样式入队时触发。
此外,当您查看wp_enqueue_script()
函数 CODEX 页面时,您会看到它接受一堆参数,包括一个$in_footer
变量。
$in_footer
( bool
) (可选)是否将脚本排入队列之前而不是 . 默认false
。
提醒一下,您还可以设置一个$deps
变量。
$deps
( string[]
) (可选)注册脚本的数组句柄此脚本依赖。默认值:array()
。
例如引导程序4.6.0
(在您的情况下)入队的正确方法是将依赖项添加到 Jquery 并将它们都加载到页脚中,而不是标题中。大多数时候,在 DOM 完全加载之前,任何相关的 js 操作都是不必要的。在下面的示例中,我将在页脚中将 Jquery 和 Bootstrap 排入队列,但您始终可以更改true
为false
.
当您使用 CDN 时,您应该检查源是否可用并且在本地等待后备。您还应该包括完整性和跨域属性。
add_action( 'wp_enqueue_scripts', 'plugin_scripts' );
function plugin_scripts() {
/**
* Deregister Wordpress jquery core version.
* @link https://developer.wordpress.org/reference/functions/wp_deregister_script/
*/
wp_deregister_script( 'jquery' );
/**
* Register then enqueue jquery_js (Bootstrap 4.6.x required).
* @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 prefetch' <link> and required attributes to bootstrap_bundle_js.
* Filters the HTML link tag of an enqueued style & add required attributes.
* @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$url_jquery_js = 'https://code.jquery.com/jquery-3.5.1.slim.min.js';
$ver_jquery_js = '3.5.1-slim-min';
$tst_jquery_js = @fopen( $url_jquery_js, 'r' );
$hnd_jquery_js = 'jquery_js';
if ( $tst_jquery_js !== false )
wp_register_script( $hnd_jquery_js, $url_jquery_js, [], $ver_jquery_js, true );
else
wp_register_script( $hnd_jquery_js, trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.slim.min.js', [], $ver_jquery_js, true );
wp_enqueue_script( $hnd_jquery_js );
add_filter( 'script_loader_tag', 'data_jquery_js', 10, 3 );
function data_jquery_js( $tag, $handle, $src ) {
if ( $handle === 'jquery_js' ) {
$integrity = 'sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj';
$tag = str_replace(
[ "<script",
"></script>", ],
[ "<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous'></script>", ],
$tag
);
};
return $tag;
};
/**
* Register then enqueue bootstrap_bundle_js (Bootstrap 4.6.x required).
* @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 prefetch' <link> and required attributes to bootstrap_bundle_js.
* Filters the HTML link tag of an enqueued style & add required attributes.
* @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$url_bootstrap_bundle_js = 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js';
$ver_bootstrap_bundle_js = '4.6.0';
$tst_bootstrap_bundle_js = @fopen( $url_bootstrap_bundle_js, 'r' );
$hnd_bootstrap_bundle_js = 'bootstrap_bundle_js';
if ( $tst_bootstrap_bundle_js !== false )
wp_register_script( $hnd_bootstrap_bundle_js, $url_bootstrap_bundle_js, [ 'jquery_js', ], $ver_bootstrap_bundle_js, true );
else
wp_register_script( $hnd_bootstrap_bundle_js, trailingslashit( get_template_directory_uri() ) . 'assets/js/bootstrap.bundle.min.js', [ 'jquery_js', ], $ver_bootstrap_bundle_js, true );
wp_enqueue_script( $hnd_bootstrap_bundle_js );
add_filter( 'script_loader_tag', 'data_bootstrap_bundle_js', 10, 3 );
function data_bootstrap_bundle_js( $tag, $handle, $src ) {
if ( $handle === 'bootstrap_bundle_js' ) {
$integrity = 'sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns';
$tag = str_replace(
[ "<script",
"></script>", ],
[ "<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous'></script>", ],
$tag
);
};
return $tag;
};
};