Wordpress在主題中添加響應式srcset標題圖像

WP在4.4版本中爲縮略圖和後期圖像引入了對srcset的支持。但我找不到一種方法來使頁面標題響應。這裏是我嵌入頁標題：Wordpress在主題中添加響應式srcset標題圖像

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

這會將頭圖像中的SRC（其可以在後端>設計>自定義被上傳）。但我寧願包含此圖像的所有自定義圖像大小（我在functions.php中添加的），並將它們放入屬性的一個srcset屬性中。但是頭部似乎只有一個尺寸？

來源

2016-06-08 Fabian Sebastian

更新：我可以使用'wp_get_attachment_image_srcset（get_post_thumbnail_id（）， '尺寸'）; '獲取圖像ID的srcset。問題：我無法找到獲取標題圖像ID的方法。這裏描述的方法似乎不再有效：http://nickohrn.com/2013/09/get-attachment-id-wordpress-header-image/#comment-165155 –

這不是一件容易的事情，但這是您如何使標題圖片（橫幅）響應srcset。

ps .:請解決這個，wordpress！響應頭文件應該是srcset更新的一部分。

解決方法：我們從來不使用WP header_image();功能，而僅僅只是使用了自定義標題爲「上載」爲我們的形象，我們再手動嵌入：

提取頭圖像的attachement ID
手動負載src和這個attachement ID的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" 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 ×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');

來源

2016-06-15 12:36:14

Wordpress在主題中添加響應式srcset標題圖像

回答

相關問題