Question

Oaky我对动态背景图像的反应也有疑问。

所以我所做的是主页，我为主标题图像创建了一个自定义图像上传器，以便用户可以为该页面更改它。但我想用css媒体查询根据屏幕大小加载图像大小。

然后我创建了一个herostyle.php文件并添加了以下代码：

<?php

   $absolute_path = explode('wp-content', $_SERVER['SCRIPT_FILENAME']);
   $wp_load = $absolute_path[0] . 'wp-load.php';
   require_once($wp_load);


   header("Content-type: text/css; charset: UTF-8");

   $heroImage       = get_post_meta( 6, 'main_header_image', true );
   $heroImageFull   = wp_get_attachment_image_src( $heroImage, 'herofull' );
   $heroImageDesk   = wp_get_attachment_image_src( $heroImage, 'herodesk' );
   $heroImageTab    = wp_get_attachment_image_src( $heroImage, 'herotab' );
   $heroImageMobile = wp_get_attachment_image_src( $heroImage, 'heromobile' );

?>

.home-hero {
    height: 500px;
    background-image: url(<?php echo $heroImageMobile[0]; ?>);
}

@media screen and (min-width: 768px) {
    .swb-hero {
        background-image: url(<?php echo $heroImageTab[0]; ?>);
    }
}


@media screen and (min-width: 1024px) {
    .swb-hero {
        background-image: url(<?php echo $heroImageDesk[0]; ?>);
    }
}

@media screen and (min-width: 1600px) {
    .swb-hero {
        background-image: url(<?php echo $heroImageFull[0]; ?>);
    }
}

然后我在functions.php文件中添加了这个样式表，代码如下：

function my_new_styles() {
    wp_enqueue_style( 'hero', get_template_directory_uri() . '/src/sass/herostyle.php', null, null );
}
add_action( 'wp_enqueue_scripts', 'my_new_styles' );

所以我正在做的是上传的图像是2400px宽，然后我使用我的functions.php中的以下代码用WordPress创建四个响应图像：

add_image_size( 'herofull', 2400, 4000, false);
add_image_size( 'herodesk', 1600, 4000, false);
add_image_size( 'herotab', 1000, 4000, false);
add_image_size( 'heromobile', 800, 4000, false);

所以我想我的问题是，这是一个好的做法，只是为了让用户能够改变和背景图像。我希望它也能做出回应。我不愿意为移动设备提供2400px宽的图像。如果我用CSS执行此操作，那么用户就无法更改它，并且我不想为此使用内联CSS和PHP。

有人知道这有什么好处吗？这个问题有更好的解决方案吗？我不喜欢这件事的一件事是在网站上添加了另一个样式表，我应该关心吗？

感谢您就此问题提供任何帮助/建议！

使用WordPress的动态响应背景图像

0 个答案: