Как подключить стили с помощью wp_enqueue_style()

Question

Как подключить стили с помощью wp_enqueue_style()

5 мар. 2013 г., 16:02:59

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

Голосов: 11

Я разрабатываю тему. Я добавил код (ниже) в header.php. Но когда я разместил его в репозитории тем WP для проверки, рецензент сообщил мне, что нужно подключать стили с помощью wp_enqueue_style()/wp_enqueue_script(). Но я не могу понять, как реализовать это с помощью функции. Я видел документацию по wp_enqueue_style(); в Codex, но не могу понять, как использовать весь этот код с условиями.

<style type="text/css">
<?php
// Если меню присутствует, тогда загружаются CSS стили

if ( has_nav_menu( 'secondary' ) ) {
?>
.sec-menu{
width: 100%;
background: #333;
height: 26px;
font-size:16px;
text-transform:uppercase;
}
<?php } ?>
<?php
if ( has_nav_menu( 'primary' ) ) {
?>
#access{
background-color: #333;
height: 26px;
}
<?php } ?>
<?php
if ( !has_nav_menu( 'primary' ) && !has_nav_menu( 'secondary' ) ) {
?>
.sec-menu,
#access{
border-bottom: 2px solid #333;
}
<?php } ?>
</style>

КАК СДЕЛАТЬ?

Mayeenul Islam

12.9K

wp enqueue style

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

Комментарии

Почему бы не разместить условные конструкции внутри коллбэка wp_enqueue_scripts? Всё это не должно находиться в шапке документа.

Chip Bennett

5 мар. 2013 г. 17:01:10

Я не подумал об этом, правка уже в процессе

Mike Madern

5 мар. 2013 г. 17:05:24

+1. Я отредактировал, заменив get_bloginfo( 'stylesheet_directory' ) на get_template_directory_uri(). Ссылки на директорию стилей следует оставить для Дочерних Тем.

Chip Bennett

5 мар. 2013 г. 17:19:38

Отлично и хорошо. Это помогло мне здесь. Спасибо, Майк. Я добавлю эту ветку в Кодекс, иншАллах. Спасибо.

Mayeenul Islam

8 мар. 2013 г. 12:30:03

Добавление второго файла style.css для архивов страниц категорий.

add_action( 'wp_enqueue_scripts', 'wpsites_second_style_sheet' );
function wpsites_second_style_sheet() {
    if ( is_category() ) {
       wp_register_style( 'second-style', get_template_directory_uri() .'css/second-style.css', array(), '20130608');
       wp_enqueue_style( 'second-style' );    
    }    
}

Brad Dalton

6.97K

8 июн. 2013 г. 16:23:55

Mike Madern 3.95K · Accepted Answer · 2013-03-05T16:12:32Z

Вот что вы можете сделать:

1 - Поместите CSS в отдельный файл и сохраните его в директории вашей темы.
2 - Добавьте следующий код в ваш файл functions.php:

function wpse_89494_enqueue_scripts() {
  if ( has_nav_menu( 'secondary' ) ) {
    wp_enqueue_style( 
      'wpse_89494_style_1', 
      get_template_directory_uri() . '/your-style_1.css' 
    );
  }
  if ( has_nav_menu( 'primary' ) ) {
    wp_enqueue_style( 
      'wpse_89494_style_2', 
      get_template_directory_uri() . '/your-style_2.css' 
    );
  }
  if ( ! has_nav_menu( 'primary' ) && ! has_nav_menu( 'secondary' ) ) {
    wp_enqueue_style( 
      'wpse_89494_style_3', 
      get_template_directory_uri() . '/your-style_3.css' 
    );
  }
}

add_action( 'wp_enqueue_scripts', 'wpse_89494_enqueue_scripts' );