如何将我的子样式表*排在*每个父样式表/语句之后?

时间:2012-05-05 作者:Gregory

我用奇普·贝内特写得很好的酒神学主题作为我自己孩子主题的父母。

在我的发展过程中,我发现人们在书写儿童主题时,在控制风格方面存在一些挑战。

我刚刚发现我的主要风格。在<;中的每个其他样式表链接或语句之前加载css文件;压头(>;,这就解释了为什么我在重写某些父样式时遇到困难。

对该问题的进一步研究表明,各种父样式表和样式可以在<;压头(>);在三个地方;add_action(\'wp_print_styles\', , add_action(\'wp_enqueue_scripts\', , 然后add_action(\'wp_head\', .

为了保持简单,我计划创建两个样式表。第一种主要风格。css的工作表只包括@import url() 命令,需要加载Oenology的主样式表。

第二个样式表将包含my Child规则。为了确保它是在所有其他规则之后加载的,我将使用add_action( \'wp_head\', .

这听起来合理吗?还是有更好(更正确)的方法?

顺便问一下,有人知道什么“/父主题/样式吗。css?MRPreviewRefresh=723表示

更新wp\\u enqueue\\u style()在wp\\u head()中似乎不起作用。

干杯,格雷戈里

3 个回复
最合适的回答,由SO网友:Chip Bennett 整理而成

仅供参考,这个问题可能接近too localized, 因为它是特定于葡萄酒学主题的。

也就是说,我认为你有问题了:葡萄酒学将两种样式表列在一起:

  1. style.css, 直接在文档头中(因此在文档头之前wp_head() 已启动)

  2. {varietal}.css, 在wp_enqueue_scripts, 具有优先权11, 在里面functions/dynamic-css.php:

     /**
      * Enqueue Varietal Stylesheet
      */
     function oenology_enqueue_varietal_style() {
    
         // define varietal stylesheet
         global $oenology_options;
         $oenology_options = oenology_get_options();
         $varietal_handle = \'oenology_\' . $oenology_options[\'varietal\'] . \'_stylesheet\';
         $varietal_stylesheet = get_template_directory_uri() . \'/varietals/\' . $oenology_options[\'varietal\'] . \'.css\';
    
         wp_enqueue_style( $varietal_handle, $varietal_stylesheet );
     }
     // Enqueue Varietal Stylesheet at wp_print_styles
     add_action(\'wp_enqueue_scripts\', \'oenology_enqueue_varietal_style\', 11 );
    
品种样式表,其中应用了;“皮肤”;,优先排队11, 为了确保基本样式表,style.css, 加载第一个,品种样式表加载第二个,以产生正确的级联。

因此,如果需要覆盖品种样式表,只需将第二个样式表排在品种样式表之后即可;i、 e.优先级至少为12 或更高。

编辑,为更一般的问题提供更一般的答案:

为了覆盖父主题样式表队列,您需要知道两件事:

将样式表排入队列的动作挂钩,将回调添加到挂钩函数的优先级(wp_enqueue_script()/wp_enqueue_style()) 可以在init 挂钩和wp_print_scripts/wp_print_styles 挂钩。(要执行的语义正确的钩子wp_enqueue_*() 功能当前为wp_enqueue_scripts.) This list includes the following actions (其中,这些只是常见的嫌疑人):

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts/wp_print_styles
(请注意wp_enqueue_scripts, wp_print_styles, 和wp_print_scripts all fire inside of wp_head, at a specific priority.

因此,为了覆盖父主题样式表,您需要执行以下操作之一:

  • De-enqueue 父主题样式表,通过wp_dequeue_style( $handle )

  • Remove the Parent Theme callback 这让风格更加时尚,通过remove_action( $hook, $callback )

  • Use the CSS cascade to override 父主题样式表,通过挂接子主题样式表wp_enqueue_style() 调用优先级较低的同一钩子,或调用优先级较高的钩子。

    对于最后一个选项,如果父主题使用:

    add_action( \'wp_enqueue_scripts\', \'parent_theme_enqueue_style\', $priority );
    
    。。。然后子主题将使用:

    add_action( \'wp_enqueue_scripts\', \'child_theme_enqueue_style\', {$priority + 1} );
    

SO网友:Gregory

要保证我的风格在级联中拥有最终发言权,唯一的方法就是在末尾加入它们<;压头(>);通过wp\\U头部挂钩。wp\\U排队在wp\\U头内不起作用,所以我不得不直接回显链接:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    echo \'<link rel="stylesheet" href="\'.$base.\'/style-gregory.css" type="text/css" media="all">\';
    return;
}
add_action( \'wp_head\', \'gregory_enqueue_stylesheets\', 18 );
最后,我可以相对轻松地设置我的风格,而无需使用高水平的特异性,或者!仅作为最后手段使用的重要规则

WP需要一个更好的排队系统每个样式,无论是文件链接还是内联样式,都应该通过相同的挂钩传递,从而允许优先级确定它们的顺序。出于调试目的,如果钩子还以注释形式输出每个样式的优先级值,这将非常有用

更新我已经能够保持对子主题中样式的控制,同时保持父主题的原始级联(使用主样式表、子样式表和一些样式语句),方法是将我的样式表一分为二,如问题所述。我不再使用wp\\u head()钩子,而是使用适当的、标准的wp\\u enqueue\\u scripts()钩子和高序数,以确保最后加载样式表。

my Child主题的默认样式表:

/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/

@import url("/wp-content/themes/oenology/style.css");
将我的主样式表排入队列的函数:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    wp_enqueue_style( \'style-gregory\', $base.\'/style-gregory.css\' );
    return;
}
add_action( \'wp_enqueue_scripts\', \'gregory_enqueue_stylesheets\', 18 );
然而,在我的样式表之后有一些WP生成的样式语句(即,不是父主题),我必须考虑使用高特异性css规则来覆盖与我相关的规则,或者寻找钩子来禁用它们,尤其是主体。自定义背景规则。

谢谢大家的评论。

干杯,格雷戈里

SO网友:mrwweb

您应该始终使用wp_enqueue_style() 加载样式表,函数应连接到wp_enqueue_scripts 钩住头部的滑道。我怀疑你没有把它挂在那里,所以你有问题。(自WP 3.3起,如果wp_enqueue_style() 连接到任何其他内容,它会在打开WP\\U调试时发出通知)。

结束