如何使用“wp_style_add_data”将样式表正确排入 Wordpress 页面模板？

Question

我已经学会了如何使用 wp_style_add_data 为 Internet Explorer 的早期版本添加样式表——这是理想的，因为它只会覆盖必要的 CSS 规则，其余部分来自我的 style.css。

除了我的page.php 之外，我还有一个名为full-page.php 的第二页模板，除了对标题的一些更改和其他一些小差异之外，它几乎相同。

因为我的模板几乎相同，当我可以做类似于wp_style_add_data 函数的事情来只重写我需要更改的那些时，编写两个长样式表似乎有点过头了。

我尝试使用wp_style_add_data 将我的页面模板的样式表排入队列。这实际上可行，并且可以采用我添加到style.css 的任何样式，前提是它们在full-page.css 中还不是不同的样式。

这是我使用的代码：

if (is_page_template('page-templates/full-page.php'))  

    { wp_enqueue_style( 'theme_style', get_stylesheet_uri() );
      wp_enqueue_style( 'theme-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'theme_style' ) ); 
      wp_style_add_data( 'theme-full-page' );

} 

else { wp_enqueue_style( 'theme_style', get_stylesheet_uri() );

wp_enqueue_style( 'theme_style_ie8', get_stylesheet_directory_uri() . '/css/ie8.css', array( 'theme_style' ) ); 
wp_style_add_data( 'theme_style_ie8', 'conditional', 'IE 8' );

但是，它也会出现以下错误消息。

Warning
: Missing argument 3 for wp_style_add_data(), called in /var/sites/l/lucieaverillphotography.co.uk/public_html/wp-content/themes/lucieaverillphotography/functions.php on line 31 and defined in
/var/sites/l/lucieaverillphotography.co.uk/public_html/wp-includes/functions.wp-styles.php
on line
223

我认为这是因为我删除了告诉它仅在用户在 IE 8 上查看网站时才生效的部分，但我一直在研究可以添加的内容，但一直未能找到答案。

任何帮助将不胜感激。

更新： ––––––––––––––––––––––––––––––––––––––– ––––––––––––––––––––––––––––––––––––––––––––

我想我已经设法解决了这个问题，因为它现在似乎正在工作 - 我在 style.css 中所做的任何更改都会影响另一个样式表 full-page.css，除非我在 full-page.css 中指定其他内容。

查看代码，这是写出它的正确/最佳方式吗？这似乎有点冗长，我不得不重复很多样式表名称，但它似乎也有效。我知道使用 PHP 做事通常有不同的方法，我担心在构建主题时会导致后续问题。

if (is_page_template('page-templates/full-page.php'))

{ wp_enqueue_style( 'theme_style', get_stylesheet_uri() );

  wp_enqueue_style( 'theme-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'theme_style' ) ); 
  wp_style_add_data( 'theme-full-page', 'title', 'theme-full-page' );
} 

Answer 1

您已经将样式入队，wp_style_add_data() 不会入队，它会将元数据添加到已入队的样式中，并且此函数不允许空参数。见下文。

if (is_page_template('page-templates/full-page.php')) { 
      wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() );
      wp_enqueue_style( 'lucieaverillphotography-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'lucieaverillphotography_style' ) ); 
      //wp_style_add_data( 'lucieaverillphotography-full-page' );  --> not needed & cannot be used without required inputs

} 

但是.....您可以将所有 css 合并到一个文件中并在所有页面上将其作为默认值调用（如果需要，请调用 ie8 特定样式表....），这样它就可以被浏览器缓存和之后第一次访问，您的 css 加载速度更快...复习 CSS 特异性和 ids/ 类，从长远来看，它将为您节省大量工作！

如果您希望对 css 进行特定于模板的更改，您有几个选择

1. 如果 CSS 更改在文章/页面中，通常会有一个该页面唯一的 id/class 集（或自己添加）。

2. 将自定义 css 直接添加到模板中（它可以在页面中的任何位置使用，不会受到标准的欢迎，但目前您可以将 css 规则放在样式标签内的任何位置

3. 将自定义类添加到正文标记的标题中，例如 >

然后，您可以在模板中专门定位 css... 例如

 .page-id-2 header{ display: none;} //-->use chrome inspector to see what classes are outputted on each template