WordPress 短代码与CSS：显示并样式化当前用户显示名

本教程详细介绍了如何在wordpress中创建一个自定义短代码，用于安全地显示当前登录用户的显示名称，并将其封装在一个带有特定css类的html `` 标签中。文章将指导读者如何编写php代码以实现这一功能，并进一步说明如何利用css对该显示名称进行样式化，确保输出内容结构清晰且易于通过样式表控制，从而提升网站的用户体验和视觉一致性。

在WordPress网站开发中，有时我们需要在页面或文章中显示当前登录用户的名称。为了实现这一功能并对其进行灵活的样式控制，我们可以结合使用WordPress短代码（Shortcode）和CSS。本教程将引导您完成从创建短代码到应用CSS样式的整个过程。

1. 创建显示用户名的WordPress短代码

首先，我们需要编写PHP代码来创建一个短代码。这个短代码将负责获取当前登录用户的显示名称，并将其包裹在一个带有特定CSS类的HTML <span> 标签中。这样做的好处是，我们可以通过这个唯一的CSS类来精确地控制用户名的显示样式。

请将以下PHP代码添加到您的主题的 functions.php 文件中，或者如果您正在开发一个插件，则将其添加到您的插件文件中：

/**
 * 当前用户显示名称短代码。
 * 仅在用户登录时显示其名称，并将其包裹在一个带有CSS类的<span>标签中。
 */
function get_current_user_display_name() {

    // 检查用户是否已登录。这是确保安全性和良好用户体验的关键一步。
    if ( is_user_logged_in() ) {
        // 获取当前用户对象
        $user = wp_get_current_user();

        // 使用sprintf格式化字符串，将用户显示名称插入到带有CSS类的<span>标签中。
        // 'user-display-name' 是我们自定义的CSS类名。
        return sprintf( '<span class="user-display-name">%s</span>', esc_html( $user->display_name ) );
    }

    // 如果用户未登录，则不返回任何内容。
    return '';
}
// 注册短代码，使其可以通过 [current_user_display_name] 在内容中调用。
add_shortcode( 'current_user_display_name', 'get_current_user_display_name' );

代码解析：

立即学习“前端免费学习笔记（深入）”；

• is_user_logged_in(): 这个函数是WordPress提供的，用于判断当前访问者是否已经登录。只有当用户登录时，我们才执行后续操作，这提高了安全性。
• wp_get_current_user(): 如果用户已登录，此函数会返回一个包含当前用户所有信息的对象。
• $user->display_name: 从用户对象中获取用户的显示名称。
• esc_html(): 这是一个重要的安全函数，用于转义HTML特殊字符，防止跨站脚本攻击（XSS）。
• sprintf( '<span class="user-display-name">%s</span>', ... ): 这个函数用于创建格式化的字符串。它将用户的显示名称 $user->display_name 插入到 <span class="user-display-name">...</span> 结构中。这里的 user-display-name 是我们为用户名定义的CSS类名。

2. 通过CSS样式化用户显示名

在短代码中，我们特意为用户显示名称添加了一个CSS类 user-display-name。现在，我们可以利用这个类来定义其外观样式。

您可以通过以下方式添加CSS代码：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

• 主题的 style.css 文件： 这是最常见的方式。
• WordPress 定制器 (Customizer)： 导航到“外观” -> “定制” -> “额外 CSS”。
• 子主题的 style.css 文件： 推荐使用子主题，以确保主题更新时您的自定义样式不会丢失。

以下是一个示例CSS代码块，您可以根据自己的设计需求进行修改：

.user-display-name {
    color: #0073aa; /* 设置文本颜色为WordPress蓝色 */
    font-family: 'Lato', sans-serif; /* 设置字体 */
    font-size: 18px; /* 设置字体大小 */
    font-weight: bold; /* 设置字体粗细 */
    text-transform: capitalize; /* 将首字母大写 */
    padding: 2px 5px; /* 添加内边距 */
    background-color: #e0f2f7; /* 设置背景颜色 */
    border-radius: 3px; /* 添加圆角 */
}

注意事项：

• 类名匹配： 确保您的CSS选择器 .user-display-name 与PHP代码中 <span> 标签的 class 属性值完全匹配。原始问题中遇到的问题正是因为CSS选择器与实际输出的HTML类名不一致。
• CSS优先级： 如果您的样式没有生效，可能是由于其他CSS规则具有更高的优先级。您可以使用浏览器的开发者工具检查元素的计算样式，找出冲突的规则。

3. 短代码使用方法

完成PHP代码和CSS样式的设置后，您就可以在WordPress的任何内容区域（如文章、页面、小工具中的文本块）中使用这个短代码了。

只需在您希望显示用户名称的地方输入：

[current_user_display_name]

当页面加载时，WordPress会自动执行 get_current_user_display_name() 函数，并将其返回的HTML（带有样式化的用户显示名）插入到短代码的位置。

最佳实践与注意事项

• 代码位置： 对于主题特定的功能，将PHP代码放入子主题的 functions.php 文件是最佳实践。如果功能是独立且可复用的，建议创建一个自定义插件。
• 安全性： 始终使用 esc_html() 或其他适当的转义函数来处理从数据库或用户输入中获取的数据，以防止安全漏洞。
• 用户体验： 考虑用户未登录时的情景。本教程中的短代码在用户未登录时不会显示任何内容，这是一个合理的默认行为。您可以根据需要修改代码，例如显示“访客”或提示用户登录。
• CSS类名： 选择描述性强且不易与其他插件或主题CSS冲突的类名。

总结

通过本教程，您已经学会了如何在WordPress中创建一个自定义短代码，用于安全地显示当前登录用户的显示名称，并利用CSS对其进行样式化。这种方法提供了极大的灵活性，让您能够轻松地在网站的任何位置集成动态的用户信息，并确保其与网站的整体设计风格保持一致。遵循这些步骤和最佳实践，您将能够有效地增强您的WordPress网站的用户交互和视觉呈现。

以上就是WordPress 短代码与CSS：显示并样式化当前用户显示名的详细内容，更多请关注php中文网其它相关文章！