如何使用wp_enqueue_style()使样式入队


9

我正在开发一个主题。我将代码(如下)添加到中header.php。但是我将其发布到WP主题存储库中,并且正在审核中,审阅者通知我使用wp_enqueue_style()/ 使其成为样式wp_enqueue_script()。但是不明白如何用函数来实现它。我已经看到了wp_enqueue_style();Codex中的指令,但是不明白如何将整个代码及其条件放入其中。

<style type="text/css">
<?php
// If the menu presents, then CSS loads

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>
  • 如何?

Answers:


16

这是您可以做的:

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

1
为什么不将条件放在wp_enqueue_scripts回调中?这些都不需要放在文档头中。
Chip Bennett

1
我没想到,编辑正在进行中
Mike Madern

+1。我编辑,以取代get_bloginfo( 'stylesheet_directory' )get_template_directory_uri()。对样式表目录的引用应保留给“儿童主题”。
Chip Bennett

很好。它在这里解决了我。谢谢迈克。我将此线程添加到Codex inshALLAH中。谢谢。
Mayeenul Islam 2013年

1

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' );    
    }    
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.