Wordpress 将响应式 srcset 标题图像添加到主题

Posted 2023-02-25

【中文标题】Wordpress 将响应式 srcset 标题图像添加到主题

【英文标题】：Wordpress add responsive srcset header image to theme

【发布时间】：2016-10-09 00:32:53

【问题描述】：

WP 在 4.4 版中为缩略图和帖子图像引入了对 srcset 的支持。但我找不到使页眉响应的方法。这是我嵌入页眉的方式：

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

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

【问题讨论】：

更新：我可以使用 wp_get_attachment_image_srcset( get_post_thumbnail_id(), 'size' ); 获取图像 ID 的 srcset。问题：我找不到获取标题图像 ID 的方法。此处描述的方法似乎不再起作用：nickohrn.com/2013/09/get-attachment-id-wordpress-header-image/…

【参考方案1】：

这并不容易，但这是您使用 srcset 使标题图像（横幅）响应的方式。

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

解决方案：我们从不使用 WP header_image(); 函数，而只是将自定义标题用作我们随后手动嵌入的图像的“上传器”：

提取Header图片的附件ID 手动加载此附件 ID 的 src 和 srcset

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" >
<?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”以强制使用与我们添加的图像大小相同的纵横比。

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' );