Блог

Я пытаюсь поставить в очередь скрипты и стили из CDN в WordPress, чтобы я мог использовать этот JSfiddle в нижнем колонтитуле моего кода:

https://jsfiddle.net/wcepbL45/

Я вижу, что 6 скриптов загружаются в исходном коде моей страницы, но JSfiddle, который я пытаюсь встроить в нижний колонтитул, не работает.

Я предполагаю, что некоторые из новых скриптов конфликтуют с оригинальными, или мне нужно поставить их в очередь в моем footer.php файл?

Итак, банкомат, мой 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');

//
  

Где я ошибаюсь?

Многочисленные ошибки здесь вам следует ограничить использование ваших скриптов всем, кроме панели администратора. Вы не проверяете, действительно ли 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 как компонент range plug and play @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' дескриптор.

В ответ на ваш последний комментарий мы можем сделать что-то вроде этого:

Для ваших скриптов 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) amp; (2) amp; (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 , например: (то же самое здесь, но с wp_enqueue_style )

(2) bootstrap-slider.css с зависимостью от (1),

(3) style.css с зависимостью от (1) и (2),