使用修订的Codex方法使父主题主题样式表排队的问题


9

这篇文章提出了我所遇到的与这个线程这个线程中提出的有关样式表排队方法的最新变化有关的一些问题。

我遇到的问题是在一个一般用例场景中出现的,它使用了一个广泛使用且维护良好的父主题,该主题在WP 4.0安装中特别适合儿童主题。我的孩子主题的functions.php仅包含Codex中详细介绍wp_enqueue_style功能。

请注意,尽管以下引用的代码专用于此主题,但其中许多代码使用父主题使用的当前编码约定。此外,我关注的领域很可能可以复制到当前大量流行的父主题中。同样,这些提出的问题在通用级别上均适用,无论使用哪个父主题。

问题1:双向排队

推荐的设置:

父主题是使用wp_enqueue_scripts挂钩使样式和脚本入队,相关部分如下:

add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
    wp_register_style( 'avia-style' ,  $child_theme_url."/style.css", array(),  '2', 'all' );
    wp_enqueue_style( 'avia-base');
    if($child_theme_url !=  $template_url) { wp_enqueue_style( 'avia-style'); }
}

我的孩子主题在functions.php最近的法典更改中加入样式:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}

请注意以下代码所使用的ID:

  • id='dm-parent-style-css' 是父主题的样式表,由我的子主题函数排队
  • id='avia-style-css' 是我的子主题的样式表,由父主题函数排队
  • id='dm-child-style-css' 是我的孩子主题的样式表,由我的孩子主题函数排队

结果:

乍一看,一切都很好,<head>显示以下顺序:

<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />

安装插件后,入队顺序现在更改如下:

<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->

最终,我需要在子插件之后加载子主题的css,因此我被迫在子主题中的函数中添加了优先级编号(请参阅有关优先级编号的先前讨论)

因为我的函数仅使父主题的css入队,所以结果是现在父主题 css移到了末尾,而子主题的css则比以前更加困难。

<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />

现在,我也不得不诉诸于使我的子主题样式入队,以确保其移回到该行的最前面,从而导致前述的对子主题css进行两次排队(新术语?大声笑)的问题。

不建议使用的设置:

修改后的儿童主题功能:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}

结果:

在中产生以下顺序<head>

<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />

即使将子样式表包含在我的函数中导致两次入队,恕我直言,在假设父主题将为我们正确排入我们的子样式表的假设下,IMHO优于编码。根据分配给每种已排队样式的ID,似乎父主题已将其排队,而WP Core中没有任何内容。

我的Shivm:

尽管我几乎不建议采用这种方法(并且我相信具有比我自己更多的编码经验的开发人员会在此解决方案中gro吟),但我将父主题的ID(用于使子主题的样式排入队列)从我自己的队列上方排队。在我的孩子主题的功能文件中,如下所示:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
    wp_dequeue_style( 'avia-style' );
    wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}

结果:

这解决了眼前的问题,导致:

<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />

当然,这需要知道父主题使用的ID-需要一些更通用的东西才能用作标准的子主题开发方法。

问题2:重新放置的子样式表

(似乎很难相信这不会出现在另一个线程中,尽管我在查看时没有看到任何特定的线程...如果我错过了,请随时引起我的注意。)

从来没有style.css在子主题根目录中使用默认样式作为主题样式-显然它必须存在,但是我所有的实际样式都是从SCSS编译为/ css /目录中的.css缩小文件。尽管我意识到这不是儿童主题开发的通用级别的“预期规范”,但我认识的大多数认真的WordPress开发人员都做类似的事情。当然,这需要手动将样式表放入我的函数中,无论父主题是否已将其排入队列。

总结一下...

  1. 从儿童主题标准的角度出发,包含父主题正确地融入子主题样式的假设是否安全?
  2. 当子主题样式开始被插件覆盖时,删除优先级可能会给WordPress社区的一部分带来更多混乱。我们希望主题会覆盖样式,但插件不会那么多。
  3. 当将自定义样式表用于实际的子主题样式(假定将其放置在预定义的样式中style.css)时,有必要手动使该文件入队。就维护广泛的开发人员的连续性而言,鼓励手动将子样式表放入队列是否有意义,而不管可能存在重复项吗?

我敢肯定,关于如何构建儿童-父母-主题关系的争论。我认为仅假设有关父主题的内容并不安全。我个人更喜欢在子主题中手动加载样式。但是,这些是您需要针对儿童主题的性质做出的决定,并明确传达这些决定。如果子主题只是为了简单的视觉调整,则加载子样式表的父主题可能就可以了。但是,如果父主题是框架,那么我将转向加载样式表的子主题。
Seamus Leahy 2014年

Answers:


5

问题1

从儿童主题标准的角度出发,包含父主题正确地融入子主题样式的假设是否安全?

一般的经验法则,是的。但是,您永远不要假设。多数灾难和现场故障都是由于假设或基于假设的事实造成的

事实不加假设

  • 首先加载子主题的functions.php,然后加载父主题的functions.php。这样可以确保从法典中的更新代码中,将父主题的主样式表加载到子主题的主样式表之前

  • 让我们看看捆绑的主题,十二十二。魔术发生在这里wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );。这就是将主样式表放入队列的方式。当主题作为父主题处于活动状态时,get_stylesheet_uri()将从指向父目录的style.css 的父主题加载style.css。

  • 当您切换到子主题时,get_stylesheet_uri()“更改”其路径以指向子主题的style.css,这意味着现在wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );加载父style.css 而不是加载父style.css

  • 父主题中的所有其他样式均按照其编写顺序按常规加载

泡菜

  • 内联样式和样式表直接添加到标题模板中。我已经对此问题进行了一些测试。如果未使用父样式表将其排入队列wp_enqueue_scripts,而是直接将其加载到标题中,则将首先加载子主题的主样式表。作为此处的解决方法,我以前建议将父级的header.php复制到子级主题并删除这些调用。然后,您必须将父主题样式和子主题样式以及直接在header.php中加载的任何其他样式表入队(如OP 贬值功能所述)

  • 我遇到过这样的一两次,其中样式(和脚本)直接加载到标题中,因此wp_head省略了对它的调用。这将使您的入队操作默默地失败,因此您的样式将不会显示出来。

  • 优先级设置错误。挂接入队函数时,不必将优先级设置为父操作和子操作。当两者具有相同的默认优先级时,将遵循先到先得的规则。这样可以确保加载顺序正确

父主题作者注意

将样式和脚本添加到主题的正确方法是通过wp_enqueue_scripts动作挂钩。切勿直接在标题模板中添加样式和脚本,并且在挂钩函数时不要在操作中设置任何优先级

还要始终按以下方式加载主样式表:

wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

这将确保在使用子主题时加载子主样式表

您作为儿童主题作者的责任

  • 花些时间来完成父主题。了解您的父主题,确保您熟悉主题结构以及在主题中如何使用函数和挂钩。如果您不了解父主题的工作原理,则无法创建成功的子主题。您有责任确保正确加载样式和脚本,以使代码按预期工作。

  • 始终使父主题作者对您不满意的任何代码发出警报。例如,如果作者将其样式直接添加到标题中,则使他警觉并意识到这是错误的方法,并请他在以后的版本中更正此样式

问题2

当子主题样式开始被插件覆盖时,删除优先级可能会给WordPress社区的一部分带来更多混乱。我们希望主题会覆盖样式,但插件不会那么多

不幸的是,没有直接的方法可以防止这种情况发生。这里的重点是,未经最终用户的同意,插件样式永远不能覆盖默认主题样式。在我看来,这只是插件作者的不良做法或小事。我建议在这种情况下,与插件作者联系,并让他对此保持警惕

您还可以选择取消并注销不需要的样式(和脚本),或者您需要更改其样式的优先级,然后重新排队并重新注册它们(如上代码所示)(这很好)。只需对shivm进行注释,最好的方法是出队注销样式和脚本。

问题3

当对实际的子主题样式使用自定义样式表时(假定将其放入预定义的style.css中),则需要手动使该文件入队。就维护广泛的开发人员的连续性而言,鼓励手动将子样式表放入队列是否有意义,而不管可能存在重复项吗?

我认为这个问题没有直接的黑白答案。我想回答的是,只要您在某个指导行为的准则之内,就做自己喜欢的事情。

样式表不是用来添加功能的,而是用来为用户增加视觉体验的。样式也可以直接按原样发送到浏览器,进行处理。WordPress在这里不起作用。

基于这个事实,在两次加载样式表时,我真的看不到任何危险的危险信号。但是,这可能会花费几毫秒的时间。老实说,除此之外,我不确定如何在不同的浏览器中处理重复项。这是您作为读者可以测试的东西

恕我直言,重复永远都不好,应该始终避免。我建议,如果您出于某种原因确实希望手动将孩子的主样式表放入队列,则应在shivm中使用您的代码。使默认添加的重复项出队并注销,然后照常重新排入样式表。

同样要记住的一件事是,入队和注册功能都有一个$dependancy您也可以使用的参数。因此,很容易加载辅助样式表并使之依赖于子主题的主样式表

结论

自从最近更新了食典以来,反馈令人赞叹,我想感谢大家对此的反馈。我想鼓励大家特别是对此问题的任何反馈。如果您有任何要添加或评论的内容,请这样做。


彼得,谢谢您的彻底答复。今天被淹没了,但基于您所说的话,我有一些想法,希望今天晚上晚些时候补充。
dMcClintock 2014年

请这样做。我真的很想听听对此的其他想法。我的答案是根据测试得出的意见,因此肯定不是alpha和omega。期待您的见解:-)
Pieter Goosen 2014年
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.