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

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 入队

更新代码

 <?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，如 jquery、bootstrap 等，始终首选 CDN。

Answer 2

尝试这样的事情。

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

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