Как вызвать таблицы стилей css и файлы js в пользовательскую тему WordPress

Я разрабатываю собственную тему WordPress с нуля, и теперь у меня возникла проблема с загрузкой файлов css и js. Я искал везде, чтобы увидеть, как я могу загрузить эти файлы, и я сделал это в своем файле functions.php:

    <?php 
function catalog(){
    wp_enqueue_style('bootstrap', get_template_directory_uri() . 'css/bootstrap.min.css');
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array( 'jquery' ) );
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ) );
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array( 'jquery' ) );
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/offcanvas.js', array( 'jquery' ) );
    wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts','catalog');
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu'),
));
?>

Так что я не знаю, что на самом деле происходит не так, потому что я все проверил, и все выглядит нормально. Вот моя структура папок:

theme_folder
            css
                  bootstrap.min.css
            images
            js
                  bootstrap.min.js
                  imagesloaded.pkgd.min.js
                  jquery.js
                  masonry.pkgd.min.js
                  offcanvas.js

Но после всего этого я получаю в результате это, что означает, что они не были загружены:

принтскрин


javascript wordpress php css custom-wordpress-pages
person Community    schedule 26.12.2016    source источник
comment
Поправьте меня, если я ошибаюсь, так как я довольно давно работал с темой WordPress, не хотите ли вы использовать wp_register_script, а затем запустить wp_enqueue_script? Опять же, это только из головы, я могу быть совершенно неправ.   -  person Dustin Snider    schedule 26.12.2016

Ответы (2)


arrow_upward
2
arrow_downward

Проблема. Вы регистрируете скрипт, но не ставите его в очередь.

Решение. Если вы зарегистрированы, вам нужно поставить в очередь. wp_enqueue_style() — для постановки в очередь css wp_enqueue_script() — для постановки в очередь JS

Обновленный код

 <?php 
function catalog(){
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_enqueue_script( 'custom-script-bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script-imgesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script-jquery', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script-masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'custom-script-offcanvas', get_template_directory_uri() . '/js/offcanvas.js', array( 'jquery' ) );
}
add_action('wp_enqueue_scripts','catalog');
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu'),
));
?>

Рекомендация

Всегда отдавайте предпочтение CDN для css и js, таких как jquery, bootstrap и т. д.

person Vasim Shaikh    schedule 26.12.2016
comment
Вы также должны использовать разные имена, а не одни и те же custom-script во всех wp_enqueue_script() вызовах. - person RRikesh; 26.12.2016
comment
Да почему бы и не предпочтительнее - person Vasim Shaikh; 26.12.2016
comment
В противном случае будет поставлен в очередь только последний файл javascript с таким именем. - person RRikesh; 26.12.2016
comment
Проверьте еще раз, пожалуйста. - person Vasim Shaikh; 26.12.2016
comment
не удаляйте этот style.css. Это тема, а не плагин. - person Vasim Shaikh; 26.12.2016
comment
о.. извините.. я не проверял это - person Vasim Shaikh; 26.12.2016

arrow_upward
0
arrow_downward

Попробуйте что-то вроде этого.

добавьте файл css в свой шаблон, как показано ниже...

<link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/bootstrap.min.css">
person Pravin Vavadiya    schedule 26.12.2016