本教程详细介绍了如何在wordpress中创建一个自定义短代码，用于安全地显示当前登录用户的显示名称，并将其封装在一个带有特定css类的html “ 标签中。文章将指导读者如何编写php代码以实现这一功能，并进一步说明如何利用css对该显示名称进行样式化，确保输出内容结构清晰且易于通过样式表控制，从而提升网站的用户体验和视觉一致性。
在WordPress网站开发中，有时我们需要在页面或文章中显示当前登录用户的名称。为了实现这一功能并对其进行灵活的样式控制，我们可以结合使用WordPress短代码（Shortcode）和CSS。本教程将引导您完成从创建短代码到应用CSS样式的整个过程。
1. 创建显示用户名的WordPress短代码
首先，我们需要编写PHP代码来创建一个短代码。这个短代码将负责获取当前登录用户的显示名称，并将其包裹在一个带有特定CSS类的HTML 标签中。这样做的好处是，我们可以通过这个唯一的CSS类来精确地控制用户名的显示样式。
请将以下PHP代码添加到您的主题的 functions.php 文件中，或者如果您正在开发一个插件，则将其添加到您的插件文件中：
/** * 当前用户显示名称短代码。 * 仅在用户登录时显示其名称，并将其包裹在一个带有CSS类的标签中。 */function get_current_user_display_name() { // 检查用户是否已登录。这是确保安全性和良好用户体验的关键一步。 if ( is_user_logged_in() ) { // 获取当前用户对象 $user = wp_get_current_user(); // 使用sprintf格式化字符串，将用户显示名称插入到带有CSS类的标签中。 // 'user-display-name' 是我们自定义的CSS类名。 return sprintf( '%s', 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( ‘%s’, … ): 这个函数用于创建格式化的字符串。它将用户的显示名称 $user->display_name 插入到 … 结构中。这里的 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代码中 标签的 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中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1330270.html
微信扫一扫 
支付宝扫一扫 
