WordPress 限制PC端的文章特色图片大小

twentytwentyfive 的特色图片在PC端太大 + 增加“编辑文章”简码

在 style.css 里限制PC端的文章特色图片大小

/* 仅桌面:单篇文章/页面的「特色图片」高度限制,整图可见(不裁切) */
@media (min-width: 782px) {
  body.single-post .wp-block-post-featured-image,
  body.page .wp-block-post-featured-image {
    max-height: 400px;
    overflow: hidden;           /* 重要:防止图片溢出容器 */
    aspect-ratio: unset !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body.single-post .wp-block-post-featured-image :where(img),
  body.page .wp-block-post-featured-image :where(img) {
    max-height: 100% !important; /* 让图片高度受容器限制 */
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    vertical-align: bottom;
  }
}

在 functions.php 里为单篇文章页脚添加“编辑文章”简码

// 在单篇文章页脚添加“编辑文章”简码[edit_post_link]
function edit_post_link_shortcode() {
    // 只有单篇文章/页面,且用户有编辑权限时才输出
    if ( is_singular() && current_user_can( 'edit_post', get_the_ID() ) ) {
        $edit_link = get_edit_post_link( get_the_ID() );
        if ( $edit_link ) {
            return '| <a href="' . esc_url( $edit_link ) . '" target="_blank">编辑文章</a>';
        }
    }
    return ''; // 不满足条件时不显示任何内容
}
add_shortcode( 'edit_post_link', 'edit_post_link_shortcode' );

发表回复