这篇文章提出了我所遇到的与这个线程和这个线程中提出的有关样式表排队方法的最新变化有关的一些问题。
我遇到的问题是在一个一般用例场景中出现的,它使用了一个广泛使用且维护良好的父主题,该主题在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开发人员都做类似的事情。当然,这需要手动将样式表放入我的函数中,无论父主题是否已将其排入队列。
总结一下...
- 从儿童主题标准的角度出发,包含父主题正确地融入子主题样式的假设是否安全?
- 当子主题样式开始被插件覆盖时,删除优先级可能会给WordPress社区的一部分带来更多混乱。我们希望主题会覆盖样式,但插件不会那么多。
- 当将自定义样式表用于实际的子主题样式(假定将其放置在预定义的样式中
style.css
)时,有必要手动使该文件入队。就维护广泛的开发人员的连续性而言,鼓励手动将子样式表放入队列是否有意义,而不管可能存在重复项吗?