跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

使用 CSS 在 WordPress 中根据作者元数据有无显示 Section

本文旨在解决 WordPress 中,在使用 Elementor Pro 构建作者页面时,如何根据作者元数据的存在与否,动态地显示或隐藏特定的 Section。核心方法是利用 get_the_author_meta 函数获取作者信息,并结合 CSS 的 display 属性进行控制,从而实现更灵活的页面展示效果。 在 WordPress 中,我们经常需要根据作者的元数据来定制页面显示,例如,当作者没有填写某些信息时,显示一个默认的提示信息。本文将详细介绍如何使用 CSS 和 WordPress 函数来实现这一功能,尤其是在使用 Elementor Pro 构建页面时。 获取作者元数据 WordPress 提供了 get_the_author_meta 函数来获取作者的元数据。该函数接受两个参数:元数据的键名和作者 ID。需要注意的是, get_the_author_meta 函数一次只能获取一个元数据的值 。
get_the_author_meta( string $field = '', int $user_id = 0 )
实现逻辑 我们的目标是:如果 city、style_of_play 和 highest_division 这三个作者元数据都为空,则显示一个名为 profile_info_template 的 Section。默认情况下,这个 Section 的 display 属性设置为 none。 立即学习 “ 前端免费学习笔记(深入) ”; 为了实现这个逻辑,我们需要分别获取这三个元数据的值,然后使用 PHP 的 empty 函数判断它们是否为空。如果都为空,则通过内联 CSS 将 profile_info_template 的 display 属性设置为 inline-block。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 代码示例 以下是实现该功能的代码示例:
function nothing_to_show_display(){ global $post; $author_id = $post->post_author; $author_city = get_the_author_meta('city', $author_id); $author_style_of_play = get_the_author_meta('style_of_play', $author_id); $author_highest_division = get_the_author_meta('highest_division', $author_id); if(empty($author_city) || empty($author_style_of_play) || empty($author_highest_division)) : ?> ;
代码解释: nothing_to_show_display 函数用于执行显示逻辑。 global $post; 获取全局的 $post 对象,从而获取当前文章的作者 ID。 $author_id = $post->post_author; 获取作者 ID。 分别使用 get_the_author_meta 函数获取 city、style_of_play 和 highest_division 三个元数据的值。 使用 empty 函数判断这三个值是否为空。 || (OR) 操作符确保只要有一个元数据为空,条件就成立。 如果条件成立,则输出一段内联 CSS,将 profile_info_template 的 display 属性设置为 inline-block !important。!important 确保该样式覆盖其他样式。 add_action( 'wp_head', 'nothing_to_show_display', 10, 1 ); 将该函数添加到 wp_head 钩子,以便在页面头部执行。 简化代码 如果不需要在其他地方使用这些元数据的值,可以直接在 if 语句中使用 get_the_author_meta 函数,从而简化代码:
function nothing_to_show_display(){ global $post; $author_id = $post->post_author; if(empty(get_the_author_meta('city', $author_id)) || empty(get_the_author_meta('style_of_play', $author_id)) || empty(get_the_author_meta('highest_division', $author_id))) : ?> ;
注意事项 确保 profile_info_template 元素的 ID 正确,并且在你的 Elementor Pro 页面中存在。 默认情况下,profile_info_template 的 display 属性应该设置为 none,可以通过 Elementor Pro 的样式设置或自定义 CSS 来实现。 使用内联 CSS 可能会影响性能,如果需要更复杂的样式控制,建议将样式添加到主题的 CSS 文件中,并使用 JavaScript 来动态添加或移除 CSS 类。 这个方法适用于简单的元数据判断,如果需要更复杂的逻辑,可能需要使用更高级的 WordPress API 或自定义字段插件。 总结 通过本文,你学习了如何在 WordPress 中,使用 get_the_author_meta 函数获取作者元数据,并结合 CSS 的 display 属性,动态地显示或隐藏页面 Section。这种方法可以让你更灵活地定制作者页面,并提供更好的用户体验。记住,get_the_author_meta 一次只能获取一个元数据的值,因此需要分别调用该函数来获取不同的元数据。同时,根据实际情况选择合适的代码实现方式,并注意性能优化。

相关文章