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

时间：2014-11-09 作者：dMcClintock

这篇文章提出了一些我遇到的问题，这些问题与中提出的样式表排队方法的最新更改有关this thread 和this thread.

我遇到的问题是在一个通用用例场景中出现的，它使用了一个广泛使用且维护良好的父主题，特别是WP 4.0安装中的子主题。我的孩子主题的功能。php仅包含wp_enqueue_style 功能为detailed in the Codex.

请注意，虽然下面引用的代码特定于此主题，但其中大部分使用了父主题使用的当前编码约定。此外，我所关注的领域很可能与目前在野外建立的大量父主题重复。此外，无论使用哪个父主题，这些问题都适用于通用级别

问题1：两个排队

The Recommended Setup:

父主题正在使用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 根据最近的codex更改对样式进行排队：

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\' 是my childtheme的样式表，由父主题函数排队id=\'dm-child-style-css\' 是我的子主题的样式表，由我的子主题函数排队

The Results:

乍一看，一切都很好<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，因此我不得不在我的子主题中的函数中添加一个优先级编号(see previous discussion regarding priority number).

然而，由于我的函数只将父主题的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\' />

现在，我不得不将我的孩子主题风格也排在队列中，以确保它移回队列的最前面，从而导致the aforementioned issue twoqueueing（新术语？lol）的子主题css。

The Deprecated Setup:

修改了子主题中的函数：

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

The Results:

在中生成以下订单<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\' />

尽管在我的函数中包含子样式表导致它两次排队，但在父主题将为我们正确地将子样式表排队的假设下，这比编码更好。根据分配给每个排队样式的ID，父主题似乎将其排队，而不是WP Core中的任何内容。

My Shivm:

虽然我很难建议这是推荐的方法（而且我相信比我有更多编码经验的开发人员会对这个解决方案感到不满），但我将父主题的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\' );
}

The Results:

这解决了手头的问题，导致：

<!-- 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：重新定位的子样式表

(It seems hard to believe this hasn\'t come up in another thread, though I didn\'t see any specific ones when looking...if I missed it, feel free to bring it to my attention.)

我never 使用默认值style.css 在我的主题样式的子主题根目录中-它显然必须在那里，但我的所有实际样式都是从SCSS编译而来的。css文件位于/css/目录中。虽然我意识到这并不是儿童主题开发的普遍标准，但我认识的大多数严肃的WordPress开发人员都会做类似的事情。当然，这需要在我的函数中手动将该样式表排队，而不管父主题是否将其排队。

总而言之style.css), 需要手动将该文件排队。就在广泛的开发人员之间保持连续性而言，鼓励手动将子样式表排队，而不管可能的重复，这难道没有意义吗

1 个回复

SO网友:Pieter Goosen

QUESTION 1

Is it safe to include the assumption that parent themes properly enqueue the child theme styles, from the standpoint of child theme standards?

General rule of thumb, yes. But, you should never assume. Most disasters and failures in live are due to assumptions or facts based on an assumption

FACTS WITHOUT ASSUMPTIONS

A child theme\'s functions.php is loaded first, then the parent\'s functions.php. This ensures that the the parent theme\'s main stylesheet is loaded before the child theme\'s main stylesheet from the updated code in the codex
Lets look at the bundled theme, twentytwelve. The magic happens here wp_enqueue_style( \'twentytwelve-style\', get_stylesheet_uri() );. This is how the main stylesheet is enqueued. When the theme is active as a parent theme, the style.css will be loaded from the parent theme as get_stylesheet_uri() will be pointed to the parent directory\'s style.css.
When you switch to a child theme, get_stylesheet_uri() "changes" its path to point to the child theme\'s style.css, meaning now that instead that wp_enqueue_style( \'twentytwelve-style\', get_stylesheet_uri() ); loading the parent style.css, it now loads the child style.css
All other styles from the parent theme are loaded as per normal in the order that they written

POTHOLES

Inline styles and stylesheets that are added directly to your header template. I have done some testing on this issue. If the parent stylesheet is not enqueued using wp_enqueue_scripts and directly loaded in the header, then the child theme\'s main stylesheet is loaded first. As a workaround here, I have previously recommended to copy the header.php of the parent to the child theme and removing those calls. You will then have to enqueueu both the parent and child theme styles and any other stylesheets that was directly loaded in the header.php as decribed in the OP depreciated function
I have came across this once or twice where styles (and scripts) are directly loaded in the header, and because of this the call to wp_head is omitted. This will make you enqueue action fail silently, so your styles will simply not show up.
Wrong priorities set. It is not necessary to set priorities is either parent and child actions when you hook your enqueueu functions. When both have the same default priority, the rule of first come, first served apply. This will ensure that the loading order is correct

NOTE TO PARENT THEME AUTHORS

The proper accepted method to add styles and scripts to a theme is through the wp_enqueue_scripts action hook. Never add styles and scripts directly in the header template, and don\'t set any priority in your action when hooking your function

Always also load the main stylesheet as follows:

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

This will ensure that the child\'s main stylesheet is loaded when a child theme is in use

YOUR RESPONSIBILTY AS A CHILD THEME AUTHOR

Take your time and work through the parent theme. Know your parent theme, make sure you are comfortable with the theme structures and how functions and hooks are used in the theme. You cannot create a successful child theme if you don\'t have inside knowledge of how the parent theme works. It is your responsibilty to make sure that styles and scripts are properly loaded in order for your code to work as expected.
Always make the parent theme author alert of any code you are not happy with. For instance, if the author added his styles directly to the header, make him alert of that and make him aware that this is the wrong way of doing it, and ask him to correct this in a future release

QUESTION 2

Removing the priority could potentially create more confusion for part of the WordPress community, when child theme styles start getting overwritten by a plugin. We expect themes to overwrite styles, but not so much with plugins

Unfortunately there are no direct method to safegaurd against this. The point of fact here is, plugin styles should never overwrite default theme styles without the consent of the end user. In my opinion, this is just bad practice or neglet from the plugin author. I would suggest that in a case like this, contact the plugin author and make him alert about this

You also always have the option to dequeue and deregister a style (and script) that you don\'t need, or which you need to change the priority of and requeueing and reregistering them as in your code above (which is perfectly fine). Just a note on your shivm, it is best practice to dequeue and to deregister a style and script.

QUESTION 3

When using a custom stylesheet for the actual child theme styles (as supposed to putting them in the predefined style.css), manually enqueueing that file becomes necessary. In terms of maintaining continuity across a wide spectrum of developers, wouldn\'t it make sense to encourage manually enqueueing the child stylesheet regardless of the possible duplicate?

I don\'t think there is any direct black and white answer to this issue. I would answer by saying, do what you are comfortable with as long as it is within a certain guideline which governs the action.

Stylesheets are not there to add functionality, but are there to add visual experience to the user. Styles are also directly send as-is to the browser were it is processed. Wordpress plays no role here.

Based on this fact, I really don\'t see any threatening red flags in loading a stylesheet twice. This might cost a few miliseconds in performance though. To be honest, apart from this, I\'m not really sure how are duplicates handled across diffirent browsers. This is something that you as a reader can go and test

IMHO, duplicates are never good and should always be avoided. I would suggest that if you really want to manually enqueue the child\'s main stylesheet for what ever reason, you should make use of your code in your shivm. Dequeue and deregister the duplicate added by default and then requeueing the stylesheet as normal.

Just one thing to remember as well, the enqueue and register functions have a $dependancy parameter that you can also make use of. So it is easy to load a secondary stylesheet and making it dependant on the main stylesheet of your child theme

IN CONCLUSION

Since the recent update of the codex, the feedback has been amazing and I would like to thank everyone\'s feedback on this. I would like to encourage everyone to participate in any type of feedback to this question in particular. If you have anything to add or comment on, please do.

结束

小码农CODE

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

问题1：两个排队

问题2：重新定位的子样式表

总而言之style.css), 需要手动将该文件排队。就在广泛的开发人员之间保持连续性而言，鼓励手动将子样式表排队，而不管可能的重复，这难道没有意义吗

QUESTION 1

QUESTION 2

QUESTION 3

IN CONCLUSION

相关推荐

WordPress Codex的本地副本？