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

问题描述

我正在尝试根据屏幕大小在导航栏上显示和隐藏一些选项。我已经在 VisualStudio Code 中编写了我的代码并且它工作正常，但是当我将自定义 CSS 放在我的主题的自定义部分（使用故意空白）的附加 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 文件并删除注释来使其工作。我们怀疑问题是由 CSS 代码无法读取视口引起的。当我们将它添加到 HTML 文件时，它确实在头部的元标记中提到了视口，它起作用了。

解决方法

使用 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 );