时间戳

首页 > 解决方案 > 标题内的wordpress排队脚本

wordpress - 标题内的wordpress排队脚本

问题描述

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

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 加载脚本

标签： wordpressscriptenqueue

解决方案

您没有遵循最佳实践。

任何脚本都应该通过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;
        };

};

推荐阅读