WordPress加载css文件的默认顺序是什么?

时间:2021-09-03 作者:PaulJ

我正在处理一个商业主题,我正在对其进行一些风格更改。具体来说,父主题显示我要修改的菜单。该菜单的代码为:

 <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的特殊性?

1 个回复
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排队,子主题的代码在父主题的代码之前运行。

对于您的问题,最直接的解决方案可能只是增加将子主题资产排队的函数的优先级(我的意思是降低优先级)。

相关推荐

是否在上传文件夹中动态保存自定义css文件?

当我们在自定义CSS的WordPress中自定义主题时,它会创建后端自定义CSS文件,我必须完成这些我无法公开理解的任务:动态将此CSS保存在上载文件夹中的文件中</然后从文件中呈现自定义CSS。(这是在上面的第一步中动态生成的。)</将其从HTML标题部分中删除。否则,自定义CSS将呈现两次。有人能帮忙吗