Wordpress将响应式srcset标题图像添加到主题 [英] Wordpress add responsive srcset header image to theme

问题描述

WP在4.4版中为缩略图和Post图像引入了对srcset的支持。但我找不到一种方法来使页面标题响应。以下是我嵌入页眉的方法：

 < img src =<？php header_image（）？> ALT =  > 
  

这会加载标题图像（可以在后端>设计>自定义中上传）强> SRC 即可。但我宁愿包含此图像的所有自定义图像大小（我在functions.php中添加）并将它们放在 srcset 属性中。但是标题似乎只有一个尺寸？

解决方案

这不容易，但这就是你的制作方法标题图像（横幅）响应srcset。

ps：请修复此问题，wordpress！响应式标题应该是srcset更新的一部分。

解决方案：我们从不使用WP header_image（）; 函数，但只是使用自定义标题作为我们然后手动嵌入的图像的上传器：

1. 提取附件ID标题图片


2. 手动加载此附件ID的src和srcset

标题.php

 <？php 
 //提取标题附件ID 
 $ data = get_theme_mod（'header_image_data'）; 
 $ data = is_object（$ data）？ get_object_vars（$ data）：$ data; 
 $ header_id = is_array（$ data）&& isset（$ data ['attachment_id']）？ $ data ['attachment_id']：false; 
 if（$ header_id）：
 //手动设置图像源
 $ src = wp_get_attachment_image_src（$ header_id，'thumbnail-head'）[0]; 
 $ srcset = wp_get_attachment_image_srcset（$ header_id，'thumbnail-head'）; ？> 
< img id =masthead-bgsrc =<？php echo $ src？> srcset =<？php echo $ srcset？> sizes =100vwalt => 
<？php endif; ？> 
  

在此示例中 thumbnail-head 是我的目标图像大小和宽高比。您可以使用任何您想要的尺寸（需要具有固定的宽高比）。我们现在必须将此图像大小添加到functions.php文件中。为了获得更大尺寸的缩略图（嵌入srcset），你还需要为functions.php添加更多尺寸：

functions.php

  add_image_size（'thumbnail-head'，450,300，true）; 
 add_image_size（'thumbnail-head-2x'，900,600，true）; 
 add_image_size（'thumbnail-head-4x'，1800,1200，true）; 
  

我的缩略图尺寸为450 x 300像素（3：2宽高比）。所以我添加了2x和4x版本。不要忘记通过插件重建缩略图。

最后，将自定义标题图像的尺寸设置为缩略图的最大版本非常重要。这是因为WP将图像缩小到这个尺寸，并根据此缩小图像创建其他尺寸。在这种情况下，在functions.php中搜索自定义标题，并将宽度和高度设置为1800和1200.我们还禁用flex-width和flex-height以强制使用与我们添加的图像大小相同的宽高比。 / p>

functions.php

  function fs_custom_header_setup （）{
 add_theme_support（'custom-header'，apply_filters（'fs_custom_header_args'，array（
'default-image'=>''，
'head-text'=> false，
'default-text-color'=>'ffffff'，
'width'=> 1800，
'height'=> 1200，
'flex -width'=> false，
'flex-height'=> false，
'wp-head-callback'=>'fs_header_style'，
）））; 
} 
 add_action（'after_setup_theme'，'fs_custom_header_setup'）; 
  

WP introduced support for srcset in version 4.4 for Thumbnails and Post images. But I can't find a way to make the page header responsive. Here is how I embed the Page header:

<img src="<?php header_image() ?>" alt="">  

This loads the header image (which can be uploaded in the backend > Design > Customise) in an src. But I'd rather include all custom image sizes (that I added in functions.php) of this image and put them in an srcset attribute. But there seems to be only one size for the header?

解决方案

It won't be easy, but this is how you make Header images (banner) responsive with a srcset.

ps.: Please fix this, wordpress! Responsive Headers should be part of the srcset update.

Solution: We never use the WP header_image(); function, but instead only just use the custom header as an "Uploader" for our image that we then embed manually:

1. Extract the attachement ID of the Header image
2. Manually load src and srcset of this attachement ID

header.php

<?php
// Extract header attachement ID
$data = get_theme_mod('header_image_data');
$data = is_object($data) ? get_object_vars($data) : $data;
$header_id = is_array($data) && isset($data['attachment_id']) ? $data['attachment_id'] : false;
if($header_id) :
    // Set image sources manually
    $src = wp_get_attachment_image_src( $header_id, 'thumbnail-head' )[0];
    $srcset = wp_get_attachment_image_srcset( $header_id, 'thumbnail-head' ); ?>
    <img id="masthead-bg" src="<?php echo $src ?>" srcset="<?php echo $srcset ?>" sizes="100vw" alt="">
<?php endif; ?>

In this example thumbnail-head is my destination image size and aspect ratio. You can use whatever size you want (needs to have a fixed aspect ratio). We now have to add this image size to the functions.php file. In order to get larger sizes of this thumbnail (to embed in the srcset) you also have to add more sizes to the functions.php:

functions.php

add_image_size( 'thumbnail-head', 450, 300, true );   
add_image_size( 'thumbnail-head-2x', 900, 600, true );   
add_image_size( 'thumbnail-head-4x', 1800, 1200, true ); 

My thumbnail size is 450 x 300 pixel (3:2 aspect ratio). So I added a 2x and 4x version. Don't forget to rebuild thumbnails via plugin.

Finally it's important to set the dimensions of the custom header image to the largest version of your thumbnail. This is because WP cuts the image down to this size and creates the other sizes afterwords based on this cut down image. In this case search for your custom header in the functions.php and set width and height to 1800 and 1200. We also disable "flex-width" and "flex-height" to force the same aspect ratio as our added image sizes.

functions.php

function fs_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'fs_custom_header_args', array(
        'default-image'          => '',
        'header-text'            => false,
        'default-text-color'     => 'ffffff',
        'width'                  => 1800,
        'height'                 => 1200,
        'flex-width'             => false,
        'flex-height'            => false,
        'wp-head-callback'       => 'fs_header_style',
    ) ) );
}
add_action( 'after_setup_theme', 'fs_custom_header_setup' );

这篇关于Wordpress将响应式srcset标题图像添加到主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！