标题内的wordpress排队脚本答案

【问题标题】：wordpress enqueue script inside the header标题内的wordpress排队脚本
【发布时间】：2021-03-22 22:03:07
【问题描述】：

我正在为 WordPress 创建一个插件，当我在插件主文件中使用以下代码时，它会在 <head> 中加载 js，它工作正常。

wp_enqueue_script ( 'custom-script', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-v4- rtl/4.6.0-1/js/bootstrap.bundle.min.jsf');

但是当我在函数中使用它时（例如 show_form() ）：

function show_form()
{
wp_enqueue_script ( 'custom-script', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-v4- rtl/4.6.0-1/js/bootstrap.bundle.min.js');
require_once 'form.php';
}

它在页面底部（</body> 之前）加载脚本。我的代码有什么问题？
只有当我的 form.php 加载时，我才需要在 <head> 中加入脚本。我知道我可以直接在 form.php 中加载脚本，但我需要通过 wp_enqueue_script 加载脚本

【问题讨论】：

标签： wordpress script enqueue

【解决方案1】：

当调用show_form() 时，您已经在执行路径中走得太远，无法返回并将代码插入头部。

您要加载的任何 JS 都应在 wp_enqueue_scripts 操作上触发。 wp_enqueue_script() 可用于确定代码是否加载在网站的页眉或页脚中。

如果有两个点您可以使用wp_enqueue_script() 插入代码，并且即使您没有指定它也被插入到页脚中，那是因为您在插入头脚本后调用了入队脚本。

您需要在页面加载之前确定表单是否显示在页面上，或者以整个站点都支持的方式使用您的 JS。

例子：

function wpse_enqueue_form_scripts() {
    if ( has_form() ) { // EXAMPLE... You need a way of determining this
        wp_enqueue_script( 'custom-script', 'js url...');
    }
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_form_scripts' );

【讨论】：

【解决方案2】：

您没有遵循最佳做法。

任何脚本都应通过wp_enqueue_scripts() 触发钩子添加到 Wordpress 触发序列中。

脚本和样式入队时触发。

来源@https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/

此外，当您查看 wp_enqueue_script() 函数 CODEX 页面时，您会发现它接受了一堆参数，包括 $in_footer 变量。

$in_footer

(bool) （可选）是否将脚本排入队列之前而不是 .默认false。

提醒一下，您还可以设置 $deps 变量。

$deps

(string[]) （可选）注册脚本的数组句柄此脚本依赖。默认值：array()。

例如 Bootstrap 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;
        };

};

【讨论】：