如何让 Wordpress 在 CSS 中读取我的媒体查询？

Posted 2023-03-06

【中文标题】如何让 Wordpress 在 CSS 中读取我的媒体查询？

【英文标题】：How do I make Wordpress read my media queries in CSS?

【发布时间】：2021-07-06 17:30:58

【问题描述】：

我正在尝试根据屏幕大小在导航栏上显示和隐藏一些选项。我已经在 VisualStudio Code 中编写了我的代码，它工作正常，但是当我将自定义 CSS 放在我的主题的自定义部分（使用 Intentionally Blank）的附加 CSS 选项下时，它没有。 我已经尝试了很多在此站点上类似问题中提出的解决方案，但都没有奏效。

我的 CSS 代码的其余部分都可以正常工作，因此查找 CSS 文件应该不是问题。

这是我的代码：

当屏幕变小时，我会删除标签并将它们移动到名为“更多”的下拉菜单中

.custom 
    font:'Arial';


.logo 
    height: 100px;
    width: auto;
    margin: 7px;


.nav-link 
    color: black;



/*Custom breakpoints navbar*/
/*Display none for the items in the navbar*/
@media only screen and (max-width: 940px) 
    .nav-info 
        display: none;
    


@media only screen and (max-width: 910px) 
    .nav-recipes 
        display: none;
    


@media only screen and (max-width: 815px) 
    .nav-market 
        display: none;
    


@media only screen and (max-width: 730px) 
    .nav-gaming 
        display: none;
    


/*Display of the "more" dropdown menu*/
@media only screen and (min-width: 940px) 
    .nav-more 
        display: none;
    


/*Display of content in the "more" dropdown menu*/
@media only screen and (min-width: 910px) 
    .dd-recipes 
        display: none;
    


@media only screen and (min-width: 815px) 
    .dd-market 
        display: none;
    


@media only screen and (min-width: 730px) 
    .dd-gaming 
        display: none;
    


/*Mobile display*/

@media only screen and (max-width: 730px) 
    .col-title 
        display: none;
    


@media only screen and (max-width: 730px) 
    .logo 
        height: 60px !important;
        margin: 3px !important;
    

但是，我不认为代码有什么问题，因为当我在本地运行它时它工作得很好。

有谁知道在这种情况下该怎么办？问题可能是由我使用的主题引起的吗？

编辑：我尝试过但没有成功的其他方法是将负责网站响应能力的代码放在不同的 css 文件中。如何让 html 代码找到 css 文件？

编辑 2：我们通过将其放入 HTML 文件并删除 cmets 来使其工作。我们怀疑问题是由 CSS 代码无法读取视口引起的。当我们将它添加到 HTML 文件中时，它确实在头部的元标记中提到了视口，它起作用了。

【参考方案1】：

使用 WP wp_head 动作挂钩。使用这个钩子你可以简单地在标题中添加 CSS。检查下面的代码。代码进入您的活动主题 fucntions.php 文件。

function add_custom_css()
    ?>
    <style type="text/css">
        .custom 
            font:'Arial';
        

        .logo 
            height: 100px;
            width: auto;
            margin: 7px;
        

        .nav-link 
            color: black;
        


        /*Custom breakpoints navbar*/
        /*Display none for the items in the navbar*/
        @media only screen and (max-width: 940px) 
            .nav-info 
                display: none;
            
        

        @media only screen and (max-width: 910px) 
            .nav-recipes 
                display: none;
            
        

        @media only screen and (max-width: 815px) 
            .nav-market 
                display: none;
            
        

        @media only screen and (max-width: 730px) 
            .nav-gaming 
                display: none;
            
        

        /*Display of the "more" dropdown menu*/
        @media only screen and (min-width: 940px) 
            .nav-more 
                display: none;
            
        

        /*Display of content in the "more" dropdown menu*/
        @media only screen and (min-width: 910px) 
            .dd-recipes 
                display: none;
            
        

        @media only screen and (min-width: 815px) 
            .dd-market 
                display: none;
            
        

        @media only screen and (min-width: 730px) 
            .dd-gaming 
                display: none;
            
        

        /*Mobile display*/

        @media only screen and (max-width: 730px) 
            .col-title 
                display: none;
            
        

        @media only screen and (max-width: 730px) 
            .logo 
                height: 60px !important;
                margin: 3px !important;
            
        
    </style>
    <?php


add_action( 'wp_head', 'add_custom_css', 10, 1 );

【讨论】：

@Knoquer Bonk 我的回答有帮助吗？