You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在WordPress图库每张图片下方添加左右分栏的两段文本?

实现WordPress图库自定义样式(图片+标题+右侧状态)

方法一:无插件代码实现

1. 给图片添加状态自定义字段

进入媒体库编辑目标图片,右侧找到「自定义字段」(没显示的话去顶部「屏幕选项」里勾选),添加新字段:

  • 键:image_status
  • 值:填写你需要的状态文本(比如“已发布”“待审核”)

2. 添加自定义短代码渲染图库

在主题的functions.php文件(或用代码片段插件)添加以下代码:

function custom_gallery_with_status($atts) {
    $atts = shortcode_atts(array(
        'ids' => '',
    ), $atts);
    
    $ids = explode(',', $atts['ids']);
    $output = '<div class="custom-gallery">';
    
    foreach($ids as $id) {
        $image = wp_get_attachment_image($id, 'medium');
        $title = get_the_title($id);
        $status = get_post_meta($id, 'image_status', true);
        
        $output .= '<div class="gallery-item">';
        $output .= $image;
        $output .= '<div class="gallery-item-meta">';
        $output .= '<span class="item-title">' . esc_html($title) . '</span>';
        $output .= '<span class="item-status">' . esc_html($status) . '</span>';
        $output .= '</div>';
        $output .= '</div>';
    }
    
    $output .= '</div>';
    return $output;
}
add_shortcode('custom_gallery', 'custom_gallery_with_status');

3. 添加CSS布局样式

在主题自定义CSS里添加:

.custom-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.gallery-item {
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}
.gallery-item img {
    width: 100%;
    height: auto;
}
.gallery-item-meta {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item-status {
    color: #2d7d9a;
    font-weight: bold;
}

使用方式

在文章/页面里插入短代码,替换成你的图片ID:
[custom_gallery ids="123,456,789"]

方法二:免费插件方案

1. Advanced Custom Fields (ACF)

  • 安装激活ACF插件,新建字段组:字段类型选「文本」,字段名设为image_status,规则设置为「附件」→「所有」,这样所有图片编辑页都会显示状态输入框。
  • 结合主题模板或短代码调用get_field('image_status', $attachment_id)来获取状态值,再配合CSS布局即可。
  • 这款免费图库插件支持自定义模板,可配合ACF添加状态字段,也能通过自带的自定义CSS功能调整布局,把状态文本放在标题右侧。

内容的提问来源于stack exchange,提问作者Elazar Halperin

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.02 18:08:27