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

Question

我正在尝试根据屏幕大小在导航栏上显示和隐藏一些选项。我已经在 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 文件中时，它确实在头部的元标记中提到了视口，它起作用了。

Answer 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 );