在 Wordpress TwentySeventeen 中，需要 CSS（PHP 不起作用）根据设备类型交换 header 图片

Question

我需要 CSS 来根据浏览器 window 的 "current" 宽度在 TwentySeventeen 主题中交换 header 图像。

注意：PHP 将不起作用，因为它仅在加载时运行。如果用户更改设备的方向，加载后，PHP 将不会检测到该更改，因为 PHP 已经完成。解决方案必须是 CSS，因为它是实时的并且会在页面加载后检测更改。

交换图像之一位于：http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg

仅供参考，我可以制作自己的网站，从头开始开发，几乎可以做任何事情。但是在处理 Wordpress 时，我不知道如何交换这些原本简单的图像。

我尝试了两种不同的 PHP 修复，然后才意识到 PHP 不会在页面加载后检测到更改。我包括我尝试过的选项之一。

这个选项似乎没有效果。

@media screen and ( max-width: 425px ){ 
  .page-id-155 .ewf-header-image-option{
      background-image: url("http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg");
      max-height: 150px;
      background-position: 49% 0px;
  }
}

我的 header 图片是推荐尺寸，在笔记本电脑或台式机上运行良好。但是当在 phone 或 pad 上查看时，它包含溢出屏幕左右边缘的图形文本。我已经创建了几个足够的替代图像。但是当设备处于移动状态时，我无法让它们交换。

Answer 1

这是一个基于 CSS 的解决方案，它将 header 图像与调整后的变体

叠加在一起

.wp-custom-header::before {
    content: "";
    display: block;
    position: relative;
    z-index: 1;
    padding-bottom: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
    }

@media (max-width: 450px) {
    .wp-custom-header::before {
            background-image: url(http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg);
    }
}

它有点不优雅，因为它加载图像而不显示它们，所以这是一个基于 HTML 的解决方案 template-parts > header > header-img.php

<!--Replaces: <?php the_custom_header_markup(); ?> -->
<div id="wp-custom-header" class="wp-custom-header">
    <picture>
        <source media="(min-width: 1024px)" srcset="http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-head-1024x614.jpg">
        <source media="(min-width: 450px)" srcset="http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-head-768x460.jpg">
        <source media="(min-width: 300px)" srcset="http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg">
        <img src="http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-head.jpg" alt="RV Inspector Pro - Certified RV &amp; Motorhome Inspections" sizes="100vw">
    </picture>
</div>

请注意，这两个选项都会覆盖 WP 本身中的 header 设置，因此如果您想更改 header 图片，则必须手动更新 URL。

在 Wordpress TwentySeventeen 中，需要 CSS（PHP 不起作用）根据设备类型交换 header 图片

Need CSS (PHP won't work) to swap header images, based on device type, in Wordpress TwentySeventeen

css

wordpress

mobile

header

twentyseventeen