admin管理员组文章数量:1322862
I am building a Bootstrap site on WordPress and need to be able include multiple stylesheets. However, when I enqueue them as follows, only the first and third style sheets show up in the page source. I have confirmed that all three files are on the server.
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() );
What am I missing?
I am building a Bootstrap site on WordPress and need to be able include multiple stylesheets. However, when I enqueue them as follows, only the first and third style sheets show up in the page source. I have confirmed that all three files are on the server.
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() );
What am I missing?
Share Improve this question edited Sep 20, 2020 at 19:30 Jesse Nickles 7357 silver badges19 bronze badges asked Oct 22, 2014 at 20:51 forrestforrest 4833 gold badges7 silver badges16 bronze badges 1 |3 Answers
Reset to default 18The wp_enqueue_style()
function uses the following format and parameters:
wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' );
In your case, you could try the following:
<?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' );
If you plan on minifying your CSS, it's always best to use wp_register_style
for each stylesheet first, and then enqueue it.
<?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' );
This worked for me
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);
}
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' );
This is what I've devised on my own for loading CSS files, for JS is pretty much similar.
本文标签: What is the correct way to enqueue multiple CSS files
版权声明:本文标题:What is the correct way to enqueue multiple CSS files? 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742108401a2421130.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
'/wp-content/themes/mamies-wafers
withget_template_directory_uri()
: you need to use absolute urls. – gmazzap Commented Oct 22, 2014 at 21:27