本教程详细介绍了如何在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( '%s', 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( ‘%s’, … )： 这是实现CSS样式化的关键。我们将用户的显示名称（%s占位符）封装在一个HTML 标签中，并为其指定一个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 类的 标签，我们就可以使用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元素中，并结合登录状态检查，确保了功能的健壮性和样式化的灵活性。这种方法不仅提升了网站的个性化程度，也为前端开发者提供了强大的控制能力。
以上就是WordPress短代码与CSS实现当前用户显示名称样式化的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1331256.html
微信扫一扫 
支付宝扫一扫 
