WordPress中动态显示用户名称并应用CSS样式教程

本教程详细介绍了如何在wordpress中创建并优化一个短代码，用于动态显示当前登录用户的名称。通过将用户名称包裹在带有特定css类的html ``标签中，我们能够轻松地利用css对其进行样式化，同时确保仅在用户登录时才显示该信息，从而提升网站的交互性和用户体验。

在WordPress开发中，经常需要根据当前登录用户的身份，在网站的特定位置显示其名称。虽然WordPress短代码提供了一种便捷的方式来插入动态内容，但如果短代码的输出仅为纯文本，那么直接对其应用CSS样式会变得困难。本教程将指导您如何创建一个功能完善且易于样式化的短代码，以动态显示当前登录用户的名称。

核心短代码实现与优化

为了实现对用户显示名称的CSS样式化，我们需要确保短代码的输出不仅仅是纯文本，而是包裹在一个带有特定CSS类的HTML元素中。同时，为了良好的用户体验和安全性考虑，只在用户登录时才显示其名称是最佳实践。

以下是优化后的PHP短代码实现：

/**
 * 获取当前用户显示名称的短代码。
 * 短代码：[current_user_display_name]
 */
function get_current_user_display_name() {

    // 检查用户是否已登录。
    if ( is_user_logged_in() ) {
        $user = wp_get_current_user(); // 获取当前用户对象

        // 使用 sprintf 格式化输出，将用户显示名称包裹在带有 CSS 类 'user-display-name' 的 span 标签中
        return sprintf( '<span class="user-display-name">%s</span>', esc_html( $user->display_name ) );
    }

    // 如果用户未登录，则不返回任何内容。
    return ''; // 返回空字符串而不是 null，以避免潜在的HTML输出问题
}
add_shortcode( 'current_user_display_name', 'get_current_user_display_name' );

代码解析：

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

1. get_current_user_display_name() 函数： 这是短代码的回调函数，当WordPress解析到 [current_user_display_name] 短代码时，会执行此函数。
2. is_user_logged_in()： 这是一个WordPress内置函数，用于检查当前访问者是否已登录。只有当用户登录时，短代码才会继续执行并显示名称。
3. wp_get_current_user()： 获取当前登录用户的 WP_User 对象，其中包含了用户的各种信息，包括 display_name（显示名称）。
4. sprintf( 'zuojiankuohaophpcnspan class="user-display-name">%s</span>', esc_html( $user->display_name ) )：
   • 这是实现样式化关键的一步。它将 $user->display_name 的值插入到一个HTML <span> 标签中。
   • class="user-display-name" 为这个 <span> 标签指定了一个CSS类，我们后续将通过这个类来应用样式。
   • esc_html() 函数用于对用户显示名称进行HTML实体编码，防止潜在的XSS攻击，提高安全性。
5. add_shortcode( 'current_user_display_name', 'get_current_user_display_name' )： 将 get_current_user_display_name 函数注册为 current_user_display_name 短代码的回调函数。

CSS样式化方法

一旦短代码被优化以输出带有 user-display-name 类的 <span> 标签，我们就可以轻松地使用CSS来对其进行样式化。

以下是一个CSS样式示例，您可以根据自己的设计需求进行调整：

NameGPT名称生成器

免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。

0

查看详情

.user-display-name {
    color: #0073aa;          /* 设置文字颜色为WordPress蓝色 */
    font-family: 'Lato', sans-serif; /* 设置字体，注意引入字体 */
    font-size: 18px;         /* 设置字体大小 */
    font-weight: bold;       /* 设置字体粗细 */
    background-color: #f0f0f0; /* 设置背景色 */
    padding: 5px 10px;       /* 内边距 */
    border-radius: 4px;      /* 圆角边框 */
    display: inline-block;   /* 使其表现为块级元素，但仍在一行内 */
    margin-left: 5px;        /* 左外边距 */
}

如何应用CSS：

1. 子主题的 style.css 文件： 这是最推荐的方法。在您的WordPress子主题的 style.css 文件中添加上述CSS代码。这样可以确保在主题更新时，您的自定义样式不会丢失。
2. WordPress自定义器： 登录WordPress后台，导航到“外观” -> “自定义” -> “额外CSS”。在此处粘贴您的CSS代码。这种方法简单方便，且更新主题时样式不会丢失。
3. 自定义插件： 如果您正在开发一个自定义插件，可以将CSS代码通过 wp_enqueue_scripts 钩子加载到前端。

使用方法与注意事项

使用短代码：

在WordPress文章、页面、小工具或任何支持短代码的地方，直接插入 [current_user_display_name] 即可。当用户登录并访问该页面时，他们将看到自己的显示名称，并应用了您定义的CSS样式。

放置PHP代码：

• 子主题的 functions.php 文件： 将上述PHP短代码添加到您的WordPress子主题的 functions.php 文件中。这是最常见且推荐的做法，因为它能确保您的代码在主题更新后依然有效。
• 自定义插件： 对于更复杂的项目或希望短代码功能独立于主题，您可以创建一个简单的自定义插件来包含这段PHP代码。

注意事项：

• 安全性： esc_html() 函数已用于防止XSS攻击，确保用户显示名称中的任何潜在恶意脚本都被正确编码。
• 用户体验： 短代码只在用户登录时显示名称，这符合大多数场景的需求。如果需要未登录用户显示其他信息（如“访客”），您可以在 else 分支中添加相应的逻辑。
• 缓存： 如果您的网站使用了缓存插件，请在修改代码后清除缓存，以确保新的短代码和样式能够立即生效。
• 代码可读性： 保持函数和变量命名清晰，添加注释，有助于日后的维护和协作。

总结

通过本教程，您已经学会了如何在WordPress中创建一个功能强大且易于样式化的短代码，用于动态显示当前登录用户的名称。关键在于将输出包裹在一个带有特定CSS类的HTML元素中，并结合 is_user_logged_in() 进行条件判断。掌握这种方法，您不仅可以更好地控制网站内容的展示，还能提升用户界面的个性化和交互性。

以上就是WordPress中动态显示用户名称并应用CSS样式教程的详细内容，更多请关注php中文网其它相关文章！