将多个css文件入队的正确方式是什么？

时间：2014-10-22 作者：forrest

我正在WordPress上建立一个引导网站，需要能够包含多个样式表。然而，当我按如下方式将它们排队时，页面源中只显示第一个和第三个样式表。我已经确认这三个文件都在服务器上。

wp_enqueue_style( \'mamies-wafers-bootstrap-min\',  \'/wp-content/themes/mamies-wafers/css/bootstrap.min.css\' );
wp_enqueue_style( \'mamies-wafers-carousel\',  \'/wp-content/themes/mamies-wafers/css/carousel.css\' );
wp_enqueue_style( \'mamies-wafers-style\', get_stylesheet_uri() );
我错过了什么？

3 个回复
最合适的回答,由SO网友:Courtney Ivey 整理而成

这个wp_enqueue_style() 函数使用以下格式和参数：

wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = \'all\' );
在您的情况下，您可以尝试以下操作：

<?php
/**
 * Proper way to enqueue scripts and styles
 */
function namespace_theme_stylesheets() {
    wp_enqueue_style( \'mamies-wafers-bootstrap-min\',  get_template_directory_uri() .\'/css/bootstrap.min.css\', array(), null, \'all\' );
    wp_enqueue_style( \'mamies-wafers-carousel\',  get_template_directory_uri() .\'/css/carousel.css\', array(), null, \'all\' );
    wp_enqueue_style( \'mamies-wafers-style\', get_stylesheet_uri(), \'\', null, \'all\' );
}
add_action( \'wp_enqueue_scripts\', \'namespace_theme_stylesheets\' );
如果您计划缩小CSS，最好使用wp_register_style 首先对每个样式表进行排序，然后将其排队。

<?php
/**
 * Proper way to register and enqueue scripts and styles
 */    
function namespace_theme_stylesheets() {
    wp_register_style( \'mamies-wafers-bootstrap-min\',  get_template_directory_uri() .\'/css/bootstrap.min.css\', array(), null, \'all\' );
    wp_register_style( \'mamies-wafers-carousel\',  get_template_directory_uri() .\'/css/carousel.css\', array(), null, \'all\' );
    wp_register_style( \'mamies-wafers-style\', get_stylesheet_uri(), \'\', null, \'all\' );
    wp_enqueue_style( \'mamies-wafers-bootstrap-min\' );
    wp_enqueue_style( \'mamies-wafers-carousel\' );
    wp_enqueue_style( \'mamies-wafers-style\' );
}
add_action( \'wp_enqueue_scripts\', \'namespace_theme_stylesheets\' );

SO网友:Hunter Nelson

这对我有用

foreach( glob( get_template_directory(). \'/css/*.css\' ) as $file ) {
            $file = str_replace(get_template_directory(), \'\', $file);
            echo ( get_template_directory_uri() . $file);
            // $file contains the name and extension of the file
            wp_enqueue_style( $file.\'style\', get_template_directory_uri() . $file);
        }



    foreach( glob( get_template_directory(). \'/js/*.js\' ) as $file ) {
        $file = str_replace(get_template_directory(), \'\', $file);
        // $file contains the name and extension of the file
        wp_enqueue_script( $file . \'script\', get_template_directory_uri() . $file);
    }

SO网友:Alreadytakenindeed


function wpdocs_theme_name_scripts() {

    $cssFolderPath = dirname(__FILE__)."/check_for_additional_path_to_be_added/";

    $fileNames = array();
    foreach (new DirectoryIterator($cssFolderPath) as $file) {

        $filetype = pathinfo($file, PATHINFO_EXTENSION);

        if ($file->isFile() && $filetype == "css") {

            array_push($fileNames, $file->getFilename());
        }
    }

    foreach ($fileNames as $name){
        wp_enqueue_style( $name, "/wp-content/plugin_or_theme_cssPath/".$name );
    }
}
add_action( \'wp_enqueue_scripts\', \'wpdocs_theme_name_scripts\' );
这是我自己设计的加载CSS文件的方法，因为JS非常相似。

结束
标签： css   wp-enqueue-style   小码农  

相关推荐

对标题图像使用css而不是html img标记的好处

我只想知道使用css{background image url（）；}是否有任何好处在设置标题时，在html中使用img标记。我在wordpress多站点安装中使用Genesis框架，默认情况下，在admin>appearance>header中上载图像时，它将其设置为CSS{background image url（）；}在我创建（并学习创建）自己的子主题时，我发现当用户自定义主题时，在html中使用img会更好，因为：如果用户不想上传标题，则不会有空白。站点标题空间已准备好用于上载标题。响