本教程详细介绍了如何在wordpress中创建并优化一个短代码，用于显示当前登录用户的名称。通过将用户名称封装在带有特定css类的html ``标签中，并结合`is_user_logged_in()`函数确保仅对登录用户显示，从而实现对用户名称文本的灵活css样式控制。
在WordPress开发中，我们经常需要根据当前用户的状态显示个性化信息，例如欢迎语中包含用户的显示名称。为了实现这一功能，并能灵活地通过CSS进行样式控制，我们可以创建一个自定义的短代码。本教程将引导您完成短代码的创建、优化以及相应的CSS样式化过程。
创建与优化WordPress短代码
WordPress短代码提供了一种简洁的方式，让用户无需编写复杂的PHP代码即可在文章、页面或小工具中插入动态内容。为了显示当前登录用户的名称并使其可被CSS样式化，我们需要编写一个PHP函数，并将其注册为短代码。
以下是优化后的短代码PHP代码：
/**
* 当前用户显示名称短代码。
* 仅在用户登录时显示其显示名称，并封装在带有CSS类的span标签中。
*/
function get_current_user_display_name() {
// 检查用户是否已登录。
if ( is_user_logged_in() ) {
// 获取当前用户对象。
$user = wp_get_current_user();
// 使用sprintf将显示名称封装在一个带有'user-display-name'类的span标签中。
return sprintf( '<span class="user-display-name">%s</span>', esc_html( $user->display_name ) );
}
// 如果用户未登录，则不返回任何内容。
return '';
}
// 注册短代码'current_user_display_name'，并将其与get_current_user_display_name函数关联。
add_shortcode( 'current_user_display_name', 'get_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>', ... )： 这是实现CSS样式化的关键。我们将用户的显示名称（%s占位符）封装在一个HTML <span> 标签中，并为其指定一个CSS类 user-display-name。这样，我们就可以通过这个类来精准地控制用户名称的样式。
- add_shortcode( 'current_user_display_name', 'get_current_user_display_name' )： 这行代码将我们的PHP函数注册为一个名为 current_user_display_name 的短代码。之后，您就可以在WordPress内容中使用 [current_user_display_name] 来调用此功能。
如何添加此代码：
将上述PHP代码添加到您的主题的 functions.php 文件中，或者创建一个自定义插件来管理此功能。推荐使用自定义插件，以便在更换主题时仍能保留此功能。
CSS样式化用户显示名称
一旦短代码被正确实现并输出了带有 user-display-name 类的 <span> 标签，我们就可以使用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: #e6f5ff; /* 背景颜色 */
border-radius: 3px; /* 圆角 */
}如何添加此CSS：
您可以将这些CSS规则添加到以下位置：
- 主题的 style.css 文件： 这是最常见的做法，但请注意，如果更新主题，这些更改可能会被覆盖。
- WordPress自定义器（Customizer）的“额外CSS”区域： 这是一个安全且方便的位置，更改不会因主题更新而丢失。
- 使用自定义CSS插件： 许多插件提供了一个界面来添加自定义CSS，方便管理。
使用短代码
在您的WordPress文章、页面、文本小工具或任何支持短代码的地方，只需输入：
欢迎您，[current_user_display_name]！
如果用户已登录，他们将看到类似“欢迎您，Admin！”（其中“Admin”将根据您定义的CSS样式显示）的效果。如果用户未登录，则短代码不会输出任何内容，只显示“欢迎您，！”。
注意事项
- 安全性： 在输出用户数据时，始终使用 esc_html() 或其他适当的转义函数，以防止跨站脚本（XSS）攻击。
- 用户体验： 考虑用户未登录时短代码的行为。当前实现是静默不输出，这通常是可接受的。如果您需要为未登录用户显示不同的内容（例如“请登录”），则需要修改 if ( is_user_logged_in() ) 块的 else 部分。
- 代码位置： 将短代码逻辑放在 functions.php 或自定义插件中，而不是直接修改主题的核心文件，以确保代码的持久性和可维护性。
- CSS优先级： 确保您的CSS规则具有足够的特异性，以覆盖主题或插件可能定义的默认样式。
总结
通过本教程，您学会了如何创建一个功能完善且可样式化的WordPress短代码，用于显示当前登录用户的名称。关键在于将用户名称封装在带有特定CSS类的HTML元素中，并结合登录状态检查，确保了功能的健壮性和样式化的灵活性。这种方法不仅提升了网站的个性化程度，也为前端开发者提供了强大的控制能力。
