Question

我正在从头开发自定义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

但毕竟我得到了这个结果，这意味着他们没有被加载：

Answer 1

问题您注册了一个脚本，但没有入队。

<强>解决方案：如果你是注册，那么你必须入队。 wp_enqueue_style（） - 用于css入队 wp_enqueue_script（） - 对于JS enqueue

更新了代码

 <?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'),
));
?>

<强>建议

总是喜欢用于css和js的CDN，如jquery，bootstrap等。

Answer 2

尝试这样的事情。

在您的模板中添加css文件，如下所示......

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

如何将css样式表和js文件调用到自定义WordPress主题中

2 个答案: