Как загружать разные CSS-файлы для разных страниц

Question

Как загружать разные CSS-файлы для разных страниц

8 янв. 2018 г., 14:44:13

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

Голосов: 3

У меня есть несколько разных страниц. У каждой из них разные CSS-файлы. В настоящее время все элементы head на этих страницах одинаковы, кроме ссылок на CSS. Мне нужно вынести эти элементы head в header.php, чтобы я мог подключать head с помощью get_header().

Как я могу загружать разные CSS-файлы для разных страниц? У меня около 20 разных страниц, поэтому загрузка файлов после проверки условий кажется мне неопрятным решением.
Есть ли способ лучше, чем этот?
Если возможно, предложите решение этой проблемы с помощью пользовательского плагина?

Страница 1:

<html lang="en">
<head>
     <link rel="stylesheet" href="css/one.css" />
     .......
 </head>

Страница 2:

<html lang="en">
<head>
     <link rel="stylesheet" href="css/two.css" />
     .......
 </head>

LogicalAnt

131

плагины разработка плагинов wp enqueue style wp head

Комментарии

Вы тестировали, действительно ли это полезно? Я предполагаю, что объединение файлов и их наличие в кеше будет быстрее, чем запрос 20 разных файлов

kero

8 янв. 2018 г. 14:46:10

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

Andrew 919 · Answer 1 · 2018-01-08T15:07:00Z

Это можно реализовать с использованием условных операторов внутри функции подключения стилей.

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'global', get_stylesheet_uri() );

    if ( is_page(5) ) {
      wp_enqueue_style( 'page-five', get_stylesheet_uri() . '/page-five-styles.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Если вам нужен более детальный контроль как над разметкой страницы, так и над подключаемыми CSS-файлами, вы можете использовать иерархию шаблонов WordPress и создать шаблон страницы или что-то более специфичное, например page-5.php. Вызов wp_enqueue_scripts непосредственно в этих файлах шаблонов гарантирует, что ресурсы будут загружаться только для соответствующих страниц.

Liam Stewart 997 · Answer 2 · 2018-01-09T02:16:36Z

Если вы хотите сделать это в своем шаблоне, вы можете выполнить следующее.

Подробнее о функции is_page вы можете узнать здесь: https://developer.wordpress.org/reference/functions/is_page/

<html lang="ru">
<head>
     <?php if ( is_page(1) ): //Замените это число на ID страницы ?> 
     <link rel="stylesheet" href="css/one.css" />
     <?php endif; if ( is_page(2) ): //Замените это число на ID страницы ?>
     <link rel="stylesheet" href="css/two.css" />
     <?php endif; ?>
 .......
</head>

Liam Stewart

997

9 янв. 2018 г. 02:16:36

Dharmishtha Patel 713 · Answer 3 · 2018-01-19T08:49:53Z

<html lang="ru">
    <head>
<?php global $post;
if( $post->ID == 346) { ?>
       <link rel="stylesheet" href="css/one.css" />
<?php } ?>
    elseif ( $post->ID == 342){ ?> 
         <link rel="stylesheet" href="css/two.css" />
         <?php } else{ //Измените этот номер на ID страницы ?>
         <link rel="stylesheet" href="css/three.css" />
         <?php } ?>
     .......
    </head>

Dharmishtha Patel

713

19 янв. 2018 г. 08:49:53