如何将 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

尝试这样的事情。

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

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

Answer 2

问题您正在注册脚本但未入队。

解法： 如果您正在注册，那么您必须排队。 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 文件调用到自定义 WordPress 主题中

How to call css stylesheets and js files into a custom WordPress theme

javascript

css

php

wordpress

custom-wordpress-pages