CDN 脚本未在 WordPress 中排队

Question

我正在尝试在 Wordpress 中将脚本和样式从 CDN 排入队列，以便可以在代码的页脚中使用此 JSfiddle：

https://jsfiddle.net/wcepbL45/

我可以看到 6 个脚本正在我的页面源中加载，但我试图嵌入页脚的 JSfiddle 不起作用。

我猜一些新脚本与原来的脚本有冲突，还是我需要在我的 footer.php 文件中加入这些脚本？

所以 atm，我的 functions.php 有这个代码：

<?php

function load_stylesheets()
{
wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css',
    array(), false, 'all');
wp_enqueue_style('bootstrap');


    wp_register_style('style', get_template_directory_uri() . '/style.css',
    array(), false, 'all');
wp_enqueue_style('style');



}

add_action('wp_enqueue_scripts', 'load_stylesheets'); 




function include_jquery()
{
wp_deregister_script('jquery');

wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery-3.1.3.min.js', '', 1, true);



add_action('wp_enqueue_scripts', 'jquery');
}

add_action('wp_enqueue_scripts', 'include_jquery');



function loadjs()
{
wp_register_script('customjs', get_template_directory_uri() . '/js/scripts.js', '', 1, true);
wp_enqueue_script('customjs');

}

add_action('wp_enqueue_scripts', 'loadjs');



// Next 6 styles are new (I can see them when i view page source, but I think they are clashing with something, as the JSfiddle I'm trying to input isnt working.

wp_register_style( 'Bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style('Bootstrap');


wp_register_style( 'Bootstrap_Theme', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
wp_enqueue_style('Bootstrap_Theme');


wp_register_style( 'Bootstrap_Slider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.min.css' );
wp_enqueue_style('Bootstrap_Slider');


wp_register_script( 'jQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', null, null, true );
wp_enqueue_script('jQuery');


wp_register_script( 'Bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', null, null, true );
wp_enqueue_script('Bootstrap');

wp_register_script( 'Bootstrap_Slider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js', null, null, true );
wp_enqueue_script('Bootstrap_Slider');

//

我哪里错了？

Answer 1

这里有多个错误，您应该将脚本的使用限制在除管理面板之外的所有内容中。您没有检查 CDN 是否真的在工作，也没有后备。 get_template_directory_uri() 不应用于加载style.css 文件，而应使用get_stylesheet_uri()。您无缘无故地使用多个功能并加载。您对wp_register_style 和wp_register_style 的调用不在任何功能范围内。

我将只粘贴我用来加载和排队脚本和样式的内容，随意复制意大利面！希望对你有帮助，如果有，别忘了点赞哦。

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

    /**
    * Register then enqueue bootstrap bundle js (Bootstrap 5.x required)
    *
    * Check if CDN's url is valid, if not return fallback
    */
    $test_bootstrap_bundle_js = @fopen( 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js', 'r' );
    if ( $test_bootstrap_bundle_js !== false ) {
      wp_register_script( 'bootstrap_bundle_js', '//stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js' );
    } else {
      wp_register_script( 'bootstrap_bundle_js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js' );
    };
    wp_enqueue_script( 'bootstrap_bundle_js' );


    /**
    * Register then enqueue bootstrap css (Bootstrap 5.x required)
    *
    * Check if CDN's url is valid, if not return fallback
    */
    $test_bootstrap_css = @fopen( 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css', 'r' );
    if ( $test_bootstrap_css !== false ) {
      wp_register_style( 'bootstrap_css', '//stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' );
    } else {
      wp_register_style( 'bootstrap_css', get_stylesheet_uri() . '/assets/css/bootstrap.min.css' );
    };
    wp_enqueue_style( 'bootstrap_css' );

    /**
    * Register then enqueue style css
    */
    wp_register_style( 'style_css', get_stylesheet_uri(), array( 'bootstrap_css' ) );
    wp_enqueue_style( 'style_css' );

  };
}; ?>

编辑 1：阅读更多关于 wp_enqueue_script @https://developer.wordpress.org/reference/functions/wp_enqueue_script/

编辑 2：Bootstrap 5 作为范围即插即用组件@https://v5.getbootstrap.com/docs/5.0/forms/range/（与 Bootstrap 4 相同）

编辑 3：当您将脚本排入队列时，您可以设置限制脚本的加载和排入的依赖项

<?php
    /**
    * Register then enqueue script js
    */
    wp_register_script( 'script_js', get_template_directory_uri() . '/assets/js/script.js', array( 'bootstrap_bundle_js', 'jquery_js' ) );
    wp_enqueue_script( 'script_js' ); ?>

在wp_register_script 中，我们指定一个脚本数组来加载array( 'bootstrap_bundle_js', 'jquery_js' ) 之后的新脚本。它使用注册样式/脚本时定义的句柄wp_register_script( 'script_js', ... 这里'script_js' 是句柄。

Answer 2

针对您的上一条评论，我们可以这样做：

对于您的 JS 脚本：

(1)jquery.min.js, 例如： wp_enqueue_script( 'jquery_js', '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' );

(2) bootstrap.min.js 依赖于 (1)， 例如： wp_enqueue_script( 'bootstrap_js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array( 'jquery_js' ) );

(3) bootstrap-slider.min.js 依赖于 (1) & (2)， 例如： wp_enqueue_script( 'bootstrap_slider_js', '//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js', array( 'jquery_js', 'bootstrap_js' ) );

(4) script.js 依赖于 (1) & (2) & (3)， 例如： wp_enqueue_script( 'script_js', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery_js', 'bootstrap_js', 'bootstrap_slider_js' ) );

对于您的 CSS 脚本：

(1) bootstrap.min.css, eg:（此处相同，但使用 wp_enqueue_style）

(2) bootstrap-slider.css 依赖于 (1)，

(3) style.css 依赖于 (1) & (2)，