本文旨在解决 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。
代码示例
以下是实现该功能的代码示例：
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)) : ?>
<style type="text/css">
#profile_info_template {
display: inline-block !important;
}
</style>;
<?php endif;
}
add_action( 'wp_head', 'nothing_to_show_display', 10, 1 );代码解释：
- 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))) : ?>
<style type="text/css">
#profile_info_template {
display: inline-block !important;
}
</style>;
<?php endif;
}
add_action( 'wp_head', 'nothing_to_show_display', 10, 1 );注意事项
- 确保 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 一次只能获取一个元数据的值，因此需要分别调用该函数来获取不同的元数据。同时，根据实际情况选择合适的代码实现方式，并注意性能优化。
