如何从术语Slug(同名)获取页面的特色图像

时间:2021-12-09 作者:Pete

我有一段代码(我已经插入到archive.php中),它用相同的slug在相应的帖子类别归档中显示页面的内容。

<?php $term = get_queried_object(); ?> <?php $page = get_posts([ \'name\' => $term->slug, \'post_type\' => \'page\']); if ( $page ){ echo $page[0]->post_content; } ?>

我想找到一种方法,我可以使用术语slug来显示页面的特色图像。

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

正如我在评论中所说,如果您指的是$page[0] 变量,那么您可以使用get_the_post_thumbnail() like so:(注意,我检查了$page[0] 在尝试使用之前设置)

// The HTML/formatting is entirely up to you..
if ( ! empty( $page ) && isset( $page[0] ) ) {
    echo get_the_post_thumbnail( $page[0] );
    echo \'<hr>\' . $page[0]->post_content;
}
有关使用该功能的更多详细信息,请查看文档,但对于更改或使用不同的缩略图大小(默认大小命名为post-thumbnail), 只需将第二个参数设置为注册图像大小的名称,例如。mediuma-custom-size. 例如。

echo get_the_post_thumbnail( $page[0], \'medium\' );
请注意,特色图片或帖子缩略图有自己的帖子类型attachment, 因此,如果要获取帖子缩略图或附件帖子的ID,可以使用get_post_thumbnail_id():

$thumb_post_id = get_post_thumbnail_id( $page[0] ); // get the post ID
$thumb_post    = get_post( $thumb_post_id );        // get the full post data

// For debugging purposes:
var_dump( $thumb_post_id, $thumb_post );
所以实际上,一旦你有了post数据(例如$page[0]$thumb_post 然后,您可以轻松获取该帖子的所有其他数据,如特色图片(如果有/适用)、标题、日期、自定义字段、类别等var_dump( $page[0] ); 然后您会看到各种post数据,但是,对于自定义字段和post对象中不直接可用的其他数据,您可以在单独的问题中提问。:)

其他注释

get_the_post_thumbnail() 使用wp_get_attachment_image() 这增加了srcsetsizes 用于使图像响应的属性(以便浏览器可以根据用户的设备选择要加载的正确图像)-请参阅Resolution switching: Different sizes 在MDN Web Docs网站上。

因此,在回答您的意见时:“请echo get_the_post_thumbnail( $page[0],\'medium\' ); 不工作;,它可能确实在工作,但浏览器根据上述属性相应地选择了不同的图像。

比如我的情况,echo get_the_post_thumbnail( $page[0], \'medium\' ) 是否输出了正确的图像URL(成为图像的src 属性)的medium 尺寸(300px宽):

<!-- I wrapped the srcset value for brevity -->
<img width="300" height="205"
    src="https://example.com/wp-content/uploads/2021/12/sample-image-300x205.jpg"
    ...
    srcset="https://example.com/wp-content/uploads/2021/12/sample-image-300x205.jpg 300w,
        https://example.com/wp-content/uploads/2021/12/sample-image-1024x701.jpg 1024w,
        https://example.com/wp-content/uploads/2021/12/sample-image-768x526.jpg 768w,
        https://example.com/wp-content/uploads/2021/12/sample-image-1536x1051.jpg 1536w,
        https://example.com/wp-content/uploads/2021/12/sample-image.jpg 1920w"
    sizes="(max-width: 300px) 100vw, 300px" />
但我的浏览器的视口宽度是360px,因此浏览器从srcset 属性-如果那里还有一个600px的图像,那么该图像将被用来代替768px。

不想要srcsetsizes 属性

嗯,这不是一个好主意,MDN Web文档还说,“我不知道。”使用此技术可以为移动用户节省大量带宽;,因此,我建议您继续使用该技术,即这两个属性。

但是,为了让您知道,您可以使用wp_get_attachment_image_src() 手动生成<img> 标记,这样您就可以完全控制HTML。例如。

$id   = get_post_thumbnail_id( $page[0] );
$data = wp_get_attachment_image_src( $id, \'medium\' );

if ( $data ) {
    echo \'<img src="\' . esc_url( $data[0] ) . \'" width="\' . $data[1] . \'" height="\' . $data[2] . \'" alt="">\';
}
还有get_the_post_thumbnail_url() 如果您只想获取URL。例如。

$url = get_the_post_thumbnail_url( $page[0], \'medium\' );

echo \'<img src="\' . esc_url( $url ) . \'" alt="">\';

相关推荐

获取POST slug并与菜单项slug匹配以更改css

我有一个基于特定类别帖子的自定义垂直菜单。我想将菜单项的slug与当前帖子的slug进行匹配,以应用css。具体来说,我想更改所选菜单项的背景。所选菜单项意味着,当用户单击菜单并加载页面时,应更改该菜单项的背景,表明用户处于该菜单项/帖子中。我认为,如果菜单项由帖子组成,那么帖子的slug和菜单项的slug应该是相同的。在html中,每个li标记都有菜单项ID<?php global $post; $post_slug = $post->post_name;&