我正在处理一个商业主题,我正在对其进行一些风格更改。具体来说,父主题显示我要修改的菜单。该菜单的代码为:
<div class="mobile-navigation hidden-md hidden-lg">
<div id="close-menu-moblie">
<a href="#">
<i class="icon-close icons"></i>
</a>
</div>
<div class="mobile-menu-container">
<ul id="menu-menu-movil" class="nav-menu mobile-menu">
<li id="menu-item-4723" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-4723 active">
<a href="/" aria-current="page">La Familia</a>
</li>
<li id="menu-item-4724" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4724">
<a href="/tierras.html">La Tierra</a>
</li>
所以我创建了一个子主题,并在其
style.css
文件:
#menu-menu-movil li > a {
font-weight: 500;
font-family: Poppins, Arial, sans-serif;
}
不可能:网站会忽略我的更改。当我检查HTML时,我看到浏览器正在应用来自父主题的CSS指令,这些指令针对不同的类:
.mobile-navigation .nav-menu > li > a {
font-size: 16px;
color: #1a1a1a;
font-weight: bold;
text-transform: capitalize;
}
所以我认为,这是一个与CSS指令冲突的问题,以及它们的特殊性水平或其他什么。。。但是我尝试在WP Admin中打开CSS编辑器
"Appearance / Customise / Additional CSS"并将我的更改粘贴到那里。。。而且他们工作。
这让我思考:Wordpress从所有可能的地方加载CSS是否有默认顺序?(“附加CSS”、子主题、父主题…)。我似乎记得有,但在谷歌上搜索了一段时间后,我什么也没找到。或者我的问题最终是关于CSS的特殊性?
SO网友:Jacob Peattie
WordPress不指定样式表的加载顺序。当主题和插件对样式进行排队时,它们可以通过两种方式告诉WordPress何时加载样式:
第一种方法是在另一个样式表上声明依赖关系。通过将这些依赖项的句柄作为第三个参数传递给wp_enqueue_style()
. 在本例中child-style
样式表将始终在parent-theme
:
wp_enqueue_stylesheet( \'child-style\', get_stylesheet_uri(), [ \'parent-style\' ] );
另一种方法是设置回调函数的优先级,在该函数中将资产挂接到
wp_enqueue_scripts
具有
add_action()
. 在本例中,样式表由
parent_enqueue_assets()
将在样式表排队之前由
child_enqueue_assets()
:
add_action( \'wp_enqueue_scripts\', \'parent_enqueue_assets\', 10 );
add_action( \'wp_enqueue_scripts\', \'child_enqueue_assets\', 15 );
请注意,数字越小优先级越高,并且
10
如果未显式声明优先级,则为默认优先级。
您遇到的问题可能是由于父主题和子主题都将其样式表排入队列,而没有声明依赖项或显式设置优先级。当这种情况发生时,样式表都按照代码运行的顺序以优先级10排队,子主题的代码在父主题的代码之前运行。
对于您的问题,最直接的解决方案可能只是增加将子主题资产排队的函数的优先级(我的意思是降低优先级)。