Qual è il modo corretto di accodare multipli file CSS?

Question

Qual è il modo corretto di accodare multipli file CSS?

22 ott 2014, 23:51:48

Visualizzazioni: 38.6K

Voti: 8

Sto costruendo un sito Bootstrap su WordPress e ho bisogno di includere più fogli di stile. Tuttavia, quando li accodo come segue, solo il primo e il terzo foglio di stile appaiono nel codice sorgente della pagina. Ho verificato che tutti e tre i file sono presenti sul 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() );

Cosa mi sta sfuggendo?

forrest

483

css wp enqueue style

Commenti

sostituisci '/wp-content/themes/mamies-wafers con get_template_directory_uri(): devi utilizzare URL assoluti.

gmazzap

23 ott 2014 00:27:22

Tutte le risposte alla domanda

Commenti

Dopo più di 3 anni, è ancora consigliato usare wp_register_style prima di wp_enqueue_style?

Craig

7 feb 2018 03:58:49

@Craig Assolutamente sì.

Courtney Ivey

9 gen 2019 01:02:35

Questo ha funzionato per me

foreach( glob( get_template_directory(). '/css/*.css' ) as $file ) {  
            $file = str_replace(get_template_directory(), '', $file);  
            echo ( get_template_directory_uri() . $file);  
            // $file contiene il nome e l'estensione del 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 contiene il nome e l'estensione del file  
        wp_enqueue_script( $file . 'script', get_template_directory_uri() . $file);  
    }

Hunter Nelson

148

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

Questo è quello che ho ideato da solo per caricare i file CSS, per JS è piuttosto simile.

Zahari Kitanov

101

9 ott 2017 00:36:12

Commenti

Per favore descrivi cosa fa il tuo codice.

Max Yudin

9 ott 2017 15:52:42

Inoltre, cosa succede se OP non ha accesso a DirectoryIterator? E se OP non ha bisogno di caricare ogni file CSS da una directory specifica?

Max Yudin

9 ott 2017 15:53:50

Il mio codice prende tutti i nomi dei file CSS da una directory specificata e li carica in Wordpress. Se OP non ne ha bisogno, puoi semplicemente rimuoverli dalla directory.

Zahari Kitanov

13 ott 2017 14:22:18

"Inoltre, cosa succede se OP non ha accesso a DirectoryIterator?" Beh, questa sembra un'altra domanda per un argomento diverso.

Zahari Kitanov

13 ott 2017 14:28:14

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

La funzione wp_enqueue_style() utilizza il seguente formato e parametri:

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

Nel tuo caso, potresti provare quanto segue:

<?php
/**
 * Metodo corretto per caricare script e stili
 */
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' );

Se prevedi di minificare il tuo CSS, è sempre meglio utilizzare wp_register_style per ogni foglio di stile prima, e poi caricarlo.

<?php
/**
 * Metodo corretto per registrare e caricare script e stili
 */    
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' );