如何自定义WordPress发布缩略图（） _WordPress自定义页面

如何覆盖WordPress中缩略图的默认” 自然” 大小？我的functions.php和CSS无法正常工作。这会使图像模糊。

文章图片
Functions.php

// Enable support for Post Thumbnails on posts and pages. add_theme_support('post-thumbnails'); set_post_thumbnail_size( 450, 250, true );

Style.css：

/*Featured image thumbnail */ .attachment-post-thumbnail, .size-post-thumbnail, .wp-post-image { width: 450px !important; height: 250px !important; }

Page-blog.php(自定义博客页面)：

< article id="post-< ?php the_ID(); ?> " < ?php post_class(); ?> > < h2 class=""> < a class="blog-title" href="http://www.srcmini.com/< ?php the_permalink(); ?>"> < ?php the_title(); ?> < /a> < /h2> < div class="entry-content"> < ?php if ( has_post_thumbnail ) { the_post_thumbnail(); } the_excerpt(); ?> < /div> < /article>

【如何自定义WordPress发布缩略图（）】在Google Dev Tools中, HTML呈现如下。请注意, 它附加了默认的150 x 150(我没有用这种方式进行硬编码)：

< div class="entry-content"> < img width="150" height="150" src="http://localhost:8888/wordpress/wp-content/uploads/2018/02/feature_nothavingit-150x150.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" srcset="http://localhost:8888/wordpress/wp-content/uploads/2018/02/feature_nothavingit-150x150.jpg 150w, http://localhost:8888/wordpress/wp-content/uploads/2018/02/feature_nothavingit-45x45.jpg 45w" sizes="(max-width: 150px) 100vw, 150px">

#1 更好的做法是通过方法get_the_post_thumbnail_url()使用缩略图的URL。你只需要使用下一个结构, 就可以制作任何自定义缩略图。并且请确保你还有一张具有所需分辨率的附加图像。为了在所有分辨率下正确工作, 最佳实践是使用< picture> < / picture> 选择器。

$thumbnail_url = get_the_post_thumbnail_url(the_ID(), 'post-thumbnails'); < div class="entry-content"> < img src='http://www.srcmini.com/< ?php echo $thumbnail_url; ?>'> < /div>