WordPress：单独显示指定自定义字段的键名与值

核心实现方式 #

通过WordPress原生函数get_post_meta()单独获取每个自定义字段的值，根据字段类型（纯文本/URL）输出对应的HTML结构，再通过自定义CSS实现差异化样式。

代码示例 #

在主题的WooCommerce模板文件（如single-product.php、content-single-product.php或自定义模板片段）中插入以下代码，替换示例中的元键为你实际使用的字段键名：

1. 纯文本类型字段（如“是否包含电池”）

<?php
// 替换your_meta_key_battery为实际的自定义字段键名
$battery_status = get_post_meta( get_the_ID(), 'your_meta_key_battery', true );
// 仅当字段有值时输出内容
if ( ! empty( $battery_status ) ) {
    echo '<div class="custom-field battery-item">';
    echo '<span class="field-key">是否包含电池：</span>';
    echo '<span class="field-value">' . esc_html( $battery_status ) . '</span>';
    echo '</div>';
}
?>

2. URL类型字段（如“完整工程图纸”）

<?php
// 替换your_meta_key_drawing为实际的自定义字段键名
$drawing_url = get_post_meta( get_the_ID(), 'your_meta_key_drawing', true );
// 验证URL有效性后输出链接
if ( ! empty( $drawing_url ) && filter_var( $drawing_url, FILTER_VALIDATE_URL ) ) {
    echo '<div class="custom-field drawing-item">';
    echo '<span class="field-key">完整工程图纸：</span>';
    echo '<a href="' . esc_url( $drawing_url ) . '" rel="nofollow noreferrer" class="field-value field-link">' . esc_html( $drawing_url ) . '</a>';
    echo '</div>';
}
?>

自定义样式 #

在主题的style.css或自定义CSS编辑器中添加样式，针对不同字段实现差异化展示：

/* 通用字段容器样式 */
.custom-field {
    margin: 10px 0;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

/* 字段键名样式 */
.field-key {
    font-weight: bold;
    color: #333;
    display: inline-block;
    width: 160px;
}

/* 纯文本字段值样式 */
.battery-item .field-value {
    color: #666;
}

/* URL链接样式 */
.drawing-item .field-link {
    color: #0073aa;
    text-decoration: none;
}

.drawing-item .field-link:hover {
    text-decoration: underline;
}

注意事项 #

• 用esc_html()、esc_url()过滤输出内容，避免XSS安全风险
• 通过! empty()判断字段是否有值，防止空内容占位
• 每个字段可单独定义HTML结构和CSS类，完全按需定制样式

内容的提问来源于stack exchange，提问作者guynumber6