WordPress短代码：显示与CSS美化当前用户名称-php教程-PHP中文网

WordPress短代码：显示与CSS美化当前用户名称

心靈之曲

发布： 2025-11-07 11:54:19

原创

850人浏览过

WordPress短代码：显示与CSS美化当前用户名称

本教程详细指导如何在wordpress中创建并使用一个自定义短代码，以动态显示当前登录用户的显示名称。通过将用户名称包裹在带有特定css类的zuojiankuohaophpcnspan>标签中，文章还演示了如何利用css对该显示名称进行样式美化，确保输出内容仅在用户登录时可见，并提供了完整的php和css代码示例。

引言：动态显示WordPress用户名称

在WordPress网站开发中，经常需要个性化地向用户展示其信息，例如在欢迎消息或侧边栏中显示当前登录用户的名称。通过自定义短代码（Shortcode），我们可以轻松实现这一功能，并进一步利用CSS对其进行视觉美化，以适应网站的整体设计风格。本文将详细介绍如何创建这样一个短代码，并提供相应的CSS美化方案。

创建自定义WordPress短代码

为了在WordPress中动态显示当前登录用户的显示名称，我们需要编写一个PHP函数，并将其注册为短代码。这个函数将负责检查用户是否登录，获取其显示名称，并将其封装在一个带有特定CSS类的HTML 标签中，以便后续进行样式控制。

短代码核心逻辑

以下是创建此短代码的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('%s', $user->display_name): 这一行是实现CSS美化的关键。它将$user->display_name（用户的显示名称）插入到一个HTML 标签中。这个标签被赋予了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类的标签中。这意味着我们可以使用CSS来控制它的外观。

NameGPT名称生成器

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

查看详情

理解CSS选择器与HTML结构

最初尝试的CSS代码 .display_current_user_display_name 没有生效，是因为它试图匹配一个名为display_current_user_display_name的HTML类，而我们的PHP代码实际上生成的是一个带有user-display-name类的标签。因此，正确的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（谨慎使用）来覆盖它们。
性能： 这个短代码的逻辑非常简单，对网站性能几乎没有影响。