谢谢Jabob，很抱歉回答得太晚。我花了一点时间来理解和测试。我缺乏wordpress和php知识。这篇短文帮助了我，也帮助了我使用了ACF（高级自定义字段）：https://awesomeacf.com/responsive-images-wordpress-acf/
I could completly manage the srcset and sizes of the main image of my articles (single.php).
But not the thumbnails of each articles in my blog page (taxonomy.php)
我做了一些与您在第二个和第三个代码中编写的内容非常接近的事情，并且成功了。alt属性只能在我不理解的情况下不起作用。以下是我所做的：
在功能中。php：
function responsive_feature_image($image_id,$image_size,$max_width){
function remove_max_srcset_image_width( $max_width ) {
$max_width = 1350;
return $max_width;
}
add_filter( \'max_srcset_image_width\', \'remove_max_srcset_image_width\' );
// check the image ID is not blank
if($image_id != \'\') {
// set the default src image size
$image_src = wp_get_attachment_image_url( $image_id, $image_size );
// set the srcset with various image sizes
$image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );
// generate the markup for the responsive image
echo \'src="\'.$image_src.\'" srcset="\'.$image_srcset.\'" sizes="(max-width: 449px) 120vw, (max-width: 767px) 576px, (max-width: 1365px) calc( 100vw - 60px - 55% ), \'.$max_width.\'"\';
}
}
单件。php：
<?php $img = get_field(\'image_principale\'); ?>
<div class="feature-image">
<?php if( $img ): ?>
<img <?php responsive_feature_image($img,\'featured-blog\',\'719px\'); ?> alt="<?php echo $img[\'alt\']; ?>" />
<?php else: ?>
<img src="<?php echo get_template_directory_uri() ?>/dist/images/article/feature-image-default.jpg" alt="Illustration de l\'article">
<?php endif; ?>
</div>
不幸的是，我无法找到如何在文件分类法中为我的博客页面的缩略图图像实现同样的效果。php。缩略图通过过滤器菜单按类别排序。这说明代码要复杂得多。以防万一你能再帮我一些。
下面是在分类法中如何调用缩略图。php：
<?php $displayCurrentCat = get_field(\'display_articles-in-page_by_category\', $term); ?>
<?php if(!$displayCurrentCat && $children): ?>
<nav class="filter_by_category">
<ul>
<?php if( $children ): ?>
<li>Filtrer les articles </li>
<li data-filter="all" class="actif">
<a href="#">Toutes les catégories</a>
</li>
<?php foreach( $children as $child ): ?>
<?php $child_term = get_term($child) ?>
<li data-filter="<?php echo $child_term->term_id; ?>" >
<a href="#"><?php echo $child_term->name; ?></a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</nav>
<?php endif; ?>
<div class="all_the_articles tdm__posts <?php if(!$displayCurrentCat){ echo\'filtr-container\'; } ?>">
<?php if($displayCurrentCat): ?>
<div class="tdm__grid tdm__grid--5">
<?php render_term_thumbnails($term); ?>
</div>
<?php else: ?>
<?php if( $children ): ?>
<?php foreach( $children as $child ): ?>
<?php $child_term = get_term($child) ?>
<div class="filtr-item" data-category="<?php echo $child_term->term_id; ?>" data-sort="value">
<div class="nom_categorie tdm__posts__cat" >
<h2><?php echo $child_term->name; ?></h2>
</div>
<div class="tdm__grid tdm__grid--5">
<?php render_term_thumbnails($child); ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
下面是函数中的内容。php：
function render_content_thumbnail($id){
$img = get_the_img(get_field("thumbnail", $id), "thumbnail-blog");
if(!$img){
$img = \'<img src="\'.get_template_directory_uri() . \'/dist/images/default_thumb.png" class="attachment-thumbnail-blog size-thumbnail-blog" alt="default \'.get_the_title($id).\'">\';
}
$title = get_field(\'titre_court\', $id) ? get_field(\'titre_court\', $id) : get_the_title($id);
echo \'
<article class="reveal tdm__post tdm__post--\'.$id.\' \'.get_field(\'couleur\', $id).\'">
<a class="tdm__post__link" href="\'.get_permalink($id).\'">
<span class="tdm__post__thumbnail">\'.$img.\'</span>
<span class="tdm__post__title">\'.$title.\'</span>
</a>
</article>\';
}
function render_term_thumbnails($term){
$t = get_term($term);
$args = array(
\'post_type\' => \'article\',
\'orderby\' => \'menu_order\',
\'order\' => \'ASC\',
\'tax_query\' => array(
array(
\'taxonomy\' => \'categorie\',
\'field\' => \'slug\',
\'terms\' => $t->slug
),
),
);
$tdmQuery = new WP_Query( $args );
while ( $tdmQuery->have_posts() ) : $tdmQuery->the_post();
render_content_thumbnail( get_the_id() );
endwhile;
wp_reset_postdata();
}
function render_term_menu($term){
$t = get_term($term);
$args = array(
\'post_type\' => \'article\',
\'orderby\' => \'menu_order\',
\'order\' => \'ASC\',
\'tax_query\' => array(
array(
\'taxonomy\' => \'categorie\',
\'field\' => \'slug\',
\'terms\' => $t->slug
),
),
);
$tdmQuery = new WP_Query( $args );
while ( $tdmQuery->have_posts() ) : $tdmQuery->the_post();
render_content_menu( get_the_id() );
endwhile;
wp_reset_postdata();
}
function get_the_img($att_id, $size, $diapo = false){
if( $att_id ){
$imgSrc = wp_get_attachment_image_src($att_id, $size);
$srcset = wp_get_attachment_image_srcset($att_id, $size);
$sizes = wp_get_attachment_image_sizes($att_id, $size);
if(function_exists( \'get_rocket_option\' ) && get_rocket_option( \'lazyload\' ) && !is_user_logged_in() ){
$i = \'<img width="\'.$imgSrc[1].\'" class="-is-lazy" height="\'.$imgSrc[2].\'" data-lazy-src="\'.$imgSrc[0].\'" alt="\'.$imgSrc[3].\'" data-lazy-srcset="\'.$srcset.\'" sizes="\'.$sizes.\'">\';
}else {
$i = \'<img width="\'.$imgSrc[1].\'" height="\'.$imgSrc[2].\'" src="\'.$imgSrc[0].\'" alt="\'.$imgSrc[3].\'" srcset="\'.$srcset.\'" sizes="\'.$sizes.\'">\';
}
$legend = wp_get_attachment_caption($att_id);
$credit = get_field(\'credit\', $att_id);
$i = $diapo ? sprintf( \'<div class="effet_photo">%1$s</div>\', $i ) : $i;
$i = $legend || $diapo || $credit ? sprintf( \'%1$s<p class="description_photo">%2$s<span>%3$s</span></p>\', $i, $legend, $credit ) : $i;
return $i;
}
}
