本教程详细指导如何在wordpress中创建并使用一个自定义短代码，以动态显示当前登录用户的显示名称。通过将用户名称包裹在带有特定css类的zuojiankuohaophpcnspan>标签中，文章还演示了如何利用css对该显示名称进行样式美化，确保输出内容仅在用户登录时可见，并提供了完整的php和css代码示例。
引言：动态显示WordPress用户名称
在WordPress网站开发中，经常需要个性化地向用户展示其信息，例如在欢迎消息或侧边栏中显示当前登录用户的名称。通过自定义短代码（Shortcode），我们可以轻松实现这一功能，并进一步利用CSS对其进行视觉美化，以适应网站的整体设计风格。本文将详细介绍如何创建这样一个短代码，并提供相应的CSS美化方案。
创建自定义WordPress短代码
为了在WordPress中动态显示当前登录用户的显示名称，我们需要编写一个PHP函数，并将其注册为短代码。这个函数将负责检查用户是否登录，获取其显示名称，并将其封装在一个带有特定CSS类的HTML <span>标签中，以便后续进行样式控制。
短代码核心逻辑
以下是创建此短代码的PHP代码：
/**
* 当前用户显示名称短代码。
* 仅在用户登录时显示其名称，并包裹在带有CSS类的<span>标签中。
*/
function get_current_user_display_name() {
// 1. 检查用户是否已登录
if ( is_user_logged_in() ) {
// 2. 获取当前用户对象
$user = wp_get_current_user();
// 3. 将用户显示名称包裹在带有CSS类"user-display-name"的<span>标签中
// sprintf函数用于格式化字符串，将$user->display_name插入到%s的位置
return sprintf( '<span class="user-display-name">%s</span>', $user->display_name );
}
// 4. 如果用户未登录，则不返回任何内容
return;
}
// 5. 注册短代码：将'current_user_display_name'关联到get_current_user_display_name函数
add_shortcode( 'current_user_display_name', 'get_current_user_display_name' );代码解析
- is_user_logged_in(): 这是WordPress的一个条件标签，用于判断当前访问者是否已登录。只有当用户登录时，短代码才会执行后续逻辑并返回内容。
- wp_get_current_user(): 这个函数返回一个包含当前用户信息的WP_User对象。我们可以通过访问其属性（如$user->display_name）来获取用户数据。
- sprintf('<span class="user-display-name">%s</span>', $user->display_name): 这一行是实现CSS美化的关键。它将$user->display_name（用户的显示名称）插入到一个HTML <span> 标签中。这个<span>标签被赋予了user-display-name这个CSS类。有了这个类，我们就可以在CSS中精确地选择并美化这个名称。
- return;: 如果用户未登录，函数将直接返回空值，确保页面上不会出现不必要的内容。
- add_shortcode('current_user_display_name', 'get_current_user_display_name'): 这是WordPress短代码API的核心函数。它将字符串'current_user_display_name'注册为一个短代码，并指定当WordPress解析到[current_user_display_name]时，应调用get_current_user_display_name函数来生成内容。
在WordPress中使用短代码
将上述PHP代码添加到您的WordPress主题的functions.php文件或通过自定义插件加载后，您就可以在WordPress的任何支持短代码的地方使用它了。
立即学习“前端免费学习笔记（深入）”；
- 在文章或页面编辑器中： 只需在古腾堡编辑器中添加一个“短代码”块，然后输入 [current_user_display_name]。
- 在文本小工具中： 如果您的主题支持，可以在小工具区域添加一个“文本”或“自定义HTML”小工具，并输入 [current_user_display_name]。
- 在主题文件中： 如果需要在主题模板文件中直接输出用户名称，可以使用 echo do_shortcode('[current_user_display_name]');。
通过CSS美化用户名称
现在，我们已经确保用户名称被包裹在一个带有.user-display-name类的<span>标签中。这意味着我们可以使用CSS来控制它的外观。
理解CSS选择器与HTML结构
最初尝试的CSS代码 .display_current_user_display_name 没有生效，是因为它试图匹配一个名为display_current_user_display_name的HTML类，而我们的PHP代码实际上生成的是一个带有user-display-name类的<span>标签。因此，正确的CSS选择器应该是.user-display-name。
CSS样式示例
您可以将以下CSS代码添加到您的主题的style.css文件、通过WordPress后台的“外观” -> “自定义” -> “额外CSS”区域，或者通过其他CSS管理插件添加。
.user-display-name {
color: #0073aa; /* 设置文字颜色为WordPress蓝色 */
font-family: 'Lato', sans-serif; /* 设置字体为Lato或通用无衬线字体 */
font-size: 18px; /* 设置字体大小 */
font-weight: bold; /* 设置字体加粗 */
text-transform: capitalize; /* 首字母大写 */
padding: 2px 5px; /* 添加内边距 */
background-color: #e0f2f7; /* 设置背景色 */
border-radius: 3px; /* 添加圆角 */
display: inline-block; /* 确保内联块级显示，以便应用背景和内边距 */
}您可以根据自己的设计需求调整这些CSS属性，例如更改颜色、字体、大小、背景等。
实施注意事项与最佳实践
- 代码放置位置： 建议将PHP短代码添加到您的子主题的functions.php文件中。如果直接修改父主题的functions.php，在主题更新时您的修改将会丢失。对于更复杂的项目，可以考虑创建一个简单的自定义插件来管理这类功能性代码。
- 未登录用户的处理： 短代码已内置逻辑，如果用户未登录，它将不会输出任何内容，这通常是期望的行为。如果您希望在用户未登录时显示“访客”或“请登录”等信息，可以在if ( is_user_logged_in() )的else分支中添加相应的return语句。
- CSS选择器优先级： 如果您发现CSS样式没有生效，可能是由于其他CSS规则具有更高的优先级。您可以使用浏览器开发者工具检查元素的计算样式，找出冲突的规则，并可能需要使用更具体的选择器或!important（谨慎使用）来覆盖它们。
- 性能： 这个短代码的逻辑非常简单，对网站性能几乎没有影响。
总结
通过上述步骤，您已经成功创建了一个WordPress短代码，能够动态显示当前登录用户的显示名称，并利用CSS对其进行美化。这种方法不仅功能强大，而且易于维护和扩展，是提升WordPress网站用户体验的有效手段。记住，理解PHP短代码的机制和CSS选择器的原理是实现此类定制功能的基础。
