Question

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

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

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

Answer 1

这并不容易，但这就是你如何使用srcset响应Header图像（横幅）。

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

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

提取标题图片的附件ID

手动加载此附件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; ?>

在此示例中，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'          => '',
        '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标题图像添加到主题

1 个答案: