¿Cuál es la forma correcta de encolar múltiples archivos CSS?

Question

¿Cuál es la forma correcta de encolar múltiples archivos CSS?

22 oct 2014, 23:51:48

Vistas: 38.6K

Votos: 8

Estoy construyendo un sitio con Bootstrap en WordPress y necesito poder incluir múltiples hojas de estilo. Sin embargo, cuando las encolo de la siguiente manera, solo la primera y tercera hoja de estilos aparecen en el código fuente de la página. He confirmado que los tres archivos están en el servidor.

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() );

¿Qué me estoy perdiendo?

forrest

483

css wp enqueue style

Comentarios

reemplaza '/wp-content/themes/mamies-wafers con get_template_directory_uri(): necesitas usar URLs absolutas.

gmazzap

23 oct 2014 00:27:22

Todas las respuestas a la pregunta

Comentarios

Después de más de 3 años, ¿sigue siendo recomendable usar wp_register_style antes de wp_enqueue_style?

Craig

7 feb 2018 03:58:49

@Craig Definitivamente.

Courtney Ivey

9 ene 2019 01:02:35

Esto funcionó para mí

// Recorre todos los archivos CSS en el directorio /css/ del tema
foreach( glob( get_template_directory(). '/css/*.css' ) as $file ) {
    // Elimina la ruta completa del tema para obtener la ruta relativa
    $file = str_replace(get_template_directory(), '', $file);
    // Muestra la URL completa del archivo CSS (para depuración)
    echo ( get_template_directory_uri() . $file);
    // Registra y encola el estilo CSS usando wp_enqueue_style()
    // El identificador del estilo se genera concatenando el nombre del archivo con 'style'
    wp_enqueue_style( $file.'style', get_template_directory_uri() . $file);
}

// Recorre todos los archivos JavaScript en el directorio /js/ del tema
foreach( glob( get_template_directory(). '/js/*.js' ) as $file ) {
    // Elimina la ruta completa del tema para obtener la ruta relativa
    $file = str_replace(get_template_directory(), '', $file);
    // Registra y encola el script JavaScript usando wp_enqueue_script()
    // El identificador del script se genera concatenando el nombre del archivo con 'script'
    wp_enqueue_script( $file . 'script', get_template_directory_uri() . $file);
}

Hunter Nelson

148

2 ene 2019 22:54:20


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

Esto es lo que he ideado por mi cuenta para cargar archivos CSS, para JS es bastante similar.

Zahari Kitanov

101

9 oct 2017 00:36:12

Comentarios

Por favor describe qué hace tu código.

Max Yudin

9 oct 2017 15:52:42

También, ¿qué pasa si OP no tiene acceso a DirectoryIterator? ¿Y si OP no necesita que todos los archivos CSS de un directorio particular sean encolados?

Max Yudin

9 oct 2017 15:53:50

Mi código está tomando todos los nombres de archivos que son CSS de un directorio dado y cargándolos en Wordpress. Si OP no los necesita, simplemente puede eliminarlos del directorio.

Zahari Kitanov

13 oct 2017 14:22:18

"Además, ¿qué pasa si el OP no tiene acceso a DirectoryIterator?" Bueno, eso suena como otra pregunta para un tema diferente.

Zahari Kitanov

13 oct 2017 14:28:14

Courtney Ivey 1.02K · Accepted Answer · 2014-10-23T00:23:39Z

La función wp_enqueue_style() utiliza el siguiente formato y parámetros:

wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' );

En tu caso, podrías probar lo siguiente:

<?php
/**
 * Forma correcta de encolar scripts y estilos
 */
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' );

Si planeas minificar tu CSS, siempre es mejor usar wp_register_style para cada hoja de estilos primero, y luego encolarla.

<?php
/**
 * Forma correcta de registrar y encolar scripts y estilos
 */    
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' );