如何在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布局即可。
2. Envira Gallery Lite
- 这款免费图库插件支持自定义模板,可配合ACF添加状态字段,也能通过自带的自定义CSS功能调整布局,把状态文本放在标题右侧。
内容的提问来源于stack exchange,提问作者Elazar Halperin
相关产品推荐
相关产品推荐

