php - 如何避免动态 wordpress 样式中的内联 css？

Question

我正在开发一个 Wordpress 主题，允许客户上传他们自己的页眉背景图片。但我不希望为移动用户加载图像。以下是目前对我有用的:

<div class="header" style="
    @media (min-width: 676px) { 
        background-image: linear-gradient(to right, rgba(1, 1, 1, 0.7), rgba(1, 1, 1, 0.1) 35%), 
        url('<?php header_image(); ?>'); 
    }
">

这行得通，但是有很多内联样式。有没有办法避免有这么多内联 css？这是我尝试过但无效的另一种方法:

function header_image_style() {

    $header_image = header_image();

    return "<style type='text/css'>
                .header{
                    background-image: 
                    linear-gradient(to right, rgba(1, 1, 1, 0.7), rgba(1, 1, 1, 0.1) 35%), 
                    url('".$header_image."');
                }
            </style>";
}

此方法仅在调用 header_image_style(); 时将 $header_image url 输出到页面，而忽略所有其他 css。实现我正在做的事情的最佳实践方法是什么？

Answer 1

检查这个函数wp_is_mobile检测超过 95% 的设备。有很好的经验。至于我工作正常