Как правильно подключить несколько CSS файлов?

Question

Как правильно подключить несколько CSS файлов?

22 окт. 2014 г., 23:51:48

Просмотры: 38.6K

Голосов: 8

Я разрабатываю сайт на WordPress с использованием Bootstrap и мне нужно подключить несколько таблиц стилей. Однако, когда я подключаю их следующим образом, в исходном коде страницы отображаются только первый и третий файлы стилей. Я проверил, что все три файла присутствуют на сервере.

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

Что я делаю не так?

forrest

483

css wp enqueue style

Комментарии

замените '/wp-content/themes/mamies-wafers на get_template_directory_uri(): необходимо использовать абсолютные URL-адреса.

gmazzap

23 окт. 2014 г. 00:27:22

Все ответы на вопрос

Комментарии

Прошло более 3 лет, всё ещё рекомендуется использовать wp_register_style перед wp_enqueue_style?

Craig

7 февр. 2018 г. 03:58:49

@Craig Определённо.

Courtney Ivey

9 янв. 2019 г. 01:02:35

Это сработало для меня

foreach( glob( get_template_directory(). '/css/*.css' ) as $file ) {
            $file = str_replace(get_template_directory(), '', $file);
            echo ( get_template_directory_uri() . $file);
            // $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 содержит имя и расширение файла
        wp_enqueue_script( $file . 'script', get_template_directory_uri() . $file);
    }

Hunter Nelson

148

2 янв. 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' );

Это то, что я разработал самостоятельно для загрузки CSS файлов, для JS реализация очень похожа.

Zahari Kitanov

101

9 окт. 2017 г. 00:36:12

Комментарии

Пожалуйста, опишите, что делает ваш код.

Max Yudin

9 окт. 2017 г. 15:52:42

Также, что если у автора вопроса нет доступа к DirectoryIterator? Что если автору не нужно подключать каждый CSS-файл из определенной директории?

Max Yudin

9 окт. 2017 г. 15:53:50

Мой код собирает все имена файлов с расширением CSS из заданной директории и загружает их в WordPress. Если автору вопроса они не нужны, их можно просто удалить из директории.

Zahari Kitanov

13 окт. 2017 г. 14:22:18

"А что, если у OP нет доступа к DirectoryIterator?" Ну, это звучит как другой вопрос для отдельной темы.

Zahari Kitanov

13 окт. 2017 г. 14:28:14

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

Функция wp_enqueue_style() использует следующий формат и параметры:

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

В вашем случае можно попробовать следующее:

<?php
/**
 * Правильный способ подключения скриптов и стилей
 */
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
/**
 * Правильный способ регистрации и подключения скриптов и стилей
 */    
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' );