Care este modalitatea corectă de a încărca mai multe fișiere CSS?

Question

Care este modalitatea corectă de a încărca mai multe fișiere CSS?

22 oct. 2014, 23:51:48

Vizualizări: 38.6K

Voturi: 8

Construiesc un site cu Bootstrap pe WordPress și trebuie să pot include mai multe foi de stil. Cu toate acestea, când le încarc după cum urmează, doar primul și al treilea stylesheet apar în sursa paginii. Am confirmat că toate cele trei fișiere sunt pe 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() );

Ce îmi scapă?

forrest

483

css wp enqueue style

Comentarii

înlocuiește '/wp-content/themes/mamies-wafers cu get_template_directory_uri(): trebuie să folosești URL-uri absolute.

gmazzap

23 oct. 2014 00:27:22

Toate răspunsurile la întrebare

Comentarii

După peste 3 ani, este încă recomandat să folosiți wp_register_style înainte de wp_enqueue_style?

Craig

7 feb. 2018 03:58:49

@Craig Cu siguranță.

Courtney Ivey

9 ian. 2019 01:02:35

Această soluție a funcționat pentru mine

foreach( glob( get_template_directory(). '/css/*.css' ) as $file ) {  
            $file = str_replace(get_template_directory(), '', $file);  
            echo ( get_template_directory_uri() . $file);  
            // $file conține numele și extensia fișierului  
            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 conține numele și extensia fișierului  
        wp_enqueue_script( $file . 'script', get_template_directory_uri() . $file);  
    }

Hunter Nelson

148

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

Aceasta este soluția pe care am conceput-o singur pentru încărcarea fișierelor CSS, pentru JS este destul de similar.

Zahari Kitanov

101

9 oct. 2017 00:36:12

Comentarii

Te rog să descrii ce face codul tău.

Max Yudin

9 oct. 2017 15:52:42

De asemenea, ce se întâmplă dacă OP nu are acces la DirectoryIterator? Ce se întâmplă dacă OP nu are nevoie să încarce fiecare fișier CSS dintr-un anumit director?

Max Yudin

9 oct. 2017 15:53:50

Codul meu preia toate numele de fișiere care sunt CSS dintr-un director dat și le încarcă în WordPress. Dacă OP nu are nevoie de ele, le poți elimina pur și simplu din director.

Zahari Kitanov

13 oct. 2017 14:22:18

"Și ce se întâmplă dacă OP nu are acces la DirectoryIterator?" Ei bine, asta sună ca o altă întrebare pentru un subiect diferit.

Zahari Kitanov

13 oct. 2017 14:28:14

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

Funcția wp_enqueue_style() utilizează următorul format și parametri:

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

În cazul tău, poți încerca următoarele:

<?php
/**
 * Metoda corectă de a încărca scripturi și stiluri
 */
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' );

Dacă intenționezi să minimizezi CSS-ul, este întotdeauna mai bine să utilizezi wp_register_style pentru fiecare fișier de stil înainte, și apoi să-l încarci.

<?php
/**
 * Metoda corectă de a înregistra și încărca scripturi și stiluri
 */    
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' );