本教程详细介绍了如何在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代码：
- 主题的 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网站的用户交互和视觉呈现。
