WordPress站点PHP echo输出添加CSS类样式不生效问题求助

代码错误原因 #

• PHP语法错误：你写的echo语句中，($current_user->display_name ) 和后面的'</p>'之间缺少字符串连接符.，触发PHP解析报错
• CSS类名使用错误：class="CSS Style"中的空格会被浏览器识别为两个独立类CSS和Style，如果要使用单个类名，建议用横线/下划线连接，例如user-name
• 安全遗漏：直接输出用户字段未做转义处理，存在XSS安全风险

修复后的完整功能代码 #

<?php 
if ( is_user_logged_in() ) {
    $current_user = wp_get_current_user();
    if ( ($current_user instanceof WP_User) ) {
        // 输出带自定义类的用户名
        echo '<p class="user-name">' . esc_html( $current_user->display_name ) . '</p>';
        // 输出带自定义类的头像，get_avatar第5个参数可传入额外类名
        echo get_avatar( $current_user->ID, 38, '', '用户头像', array('class' => 'user-avatar') );
    }
}
?>

自定义CSS样式示例 #

你可以在WordPress主题的自定义CSS面板，或者style.css文件中添加对应样式，示例如下：

/* 用户名样式 */
.user-name {
    color: #333;
    font-size: 16px;
    margin: 0 10px 0 0;
    display: inline-block;
    vertical-align: middle;
}
/* 头像样式 */
.user-avatar {
    border-radius: 50%;
    vertical-align: middle;
}

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