本教程详细指导如何在wordpress中创建并使用一个自定义短代码，以动态显示当前登录用户的显示名称。通过将用户名称包裹在带有特定css类的标签中，文章还演示了如何利用css对该显示名称进行样式美化，确保输出内容仅在用户登录时可见，并提供了完整的php和css代码示例。
引言：动态显示WordPress用户名称
在WordPress网站开发中，经常需要个性化地向用户展示其信息，例如在欢迎消息或侧边栏中显示当前登录用户的名称。通过自定义短代码（Shortcode），我们可以轻松实现这一功能，并进一步利用CSS对其进行视觉美化，以适应网站的整体设计风格。本文将详细介绍如何创建这样一个短代码，并提供相应的CSS美化方案。
创建自定义WordPress短代码
为了在WordPress中动态显示当前登录用户的显示名称，我们需要编写一个PHP函数，并将其注册为短代码。这个函数将负责检查用户是否登录，获取其显示名称，并将其封装在一个带有特定CSS类的HTML 标签中，以便后续进行样式控制。
短代码核心逻辑
以下是创建此短代码的PHP代码：
/** * 当前用户显示名称短代码。 * 仅在用户登录时显示其名称，并包裹在带有CSS类的标签中。 */function get_current_user_display_name() { // 1. 检查用户是否已登录 if ( is_user_logged_in() ) { // 2. 获取当前用户对象 $user = wp_get_current_user(); // 3. 将用户显示名称包裹在带有CSS类"user-display-name"的标签中 // sprintf函数用于格式化字符串，将$user->display_name插入到%s的位置 return sprintf( '%s', $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来控制它的外观。
理解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（谨慎使用）来覆盖它们。性能： 这个短代码的逻辑非常简单，对网站性能几乎没有影响。
总结
通过上述步骤，您已经成功创建了一个WordPress短代码，能够动态显示当前登录用户的显示名称，并利用CSS对其进行美化。这种方法不仅功能强大，而且易于维护和扩展，是提升WordPress网站用户体验的有效手段。记住，理解PHP短代码的机制和CSS选择器的原理是实现此类定制功能的基础。
以上就是WordPress短代码：显示与CSS美化当前用户名称的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1331786.html
微信扫一扫 
支付宝扫一扫 
