如何为WordPress的current_user_display_name短代码输出添加CSS样式

问题原因 #

你当前的短代码直接输出纯文本用户名，没有附带任何带CSS类的HTML标签包裹，你写的.display_current_user_display_name类选择器找不到对应的页面元素，所以样式无法生效。

解决步骤 #

• 第一步：修改短代码的PHP函数，给输出内容加上带指定类的HTML包裹标签

// [current_user_display_name]
function display_current_user_display_name () {
    $user = wp_get_current_user();
    // 未登录用户可返回空或者自定义提示文本
    if ( ! is_user_logged_in() ) {
        return '';
    }
    $display_name = esc_html( $user->display_name );
    // 用行内span标签包裹输出内容，绑定你需要的CSS类
    return '<span class="display_current_user_display_name">' . $display_name . '</span>';
}
add_shortcode('current_user_display_name', 'display_current_user_display_name');

• 第二步：调整CSS（可选兼容性优化）
  你原来的CSS规则基本可用，仅建议把font-weight: regular改为标准值font-weight: 400，适配更多浏览器：

.display_current_user_display_name {
    color:#ffffff;
    font-family:lato;
    font-size:16px;
    font-weight:400;
}

• 第三步：生效操作
  修改完成后将PHP代码放入主题的functions.php文件或者自定义代码片段插件，CSS代码放入WordPress后台「外观-自定义-额外CSS」中，清理站点缓存和浏览器缓存后样式即可生效。

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