本文旨在解决WordPress Elementor Pro搭建的作者页面中，根据作者元数据（如城市、风格、最高级别等）的有无，动态显示或隐藏特定区块的问题。通过修改代码，使用get_the_author_meta函数分别获取各项元数据，并结合OR运算符判断是否显示提示信息，从而实现更灵活的页面展示效果。
在使用WordPress的Elementor Pro创建作者页面时，经常需要根据作者的元数据来展示不同的信息。有时，我们希望在某些元数据为空时，显示一条提示信息。本文将介绍如何使用CSS和PHP来实现这一功能，即当作者的城市、风格或最高级别等信息缺失时，显示预先定义的提示信息区块。
问题分析
核心问题在于如何正确地判断多个元数据字段是否为空，并根据判断结果动态地修改CSS样式，从而控制提示信息区块的显示与隐藏。get_the_author_meta函数是获取作者元数据的关键，但需要注意其一次只能获取一个字段的值。
立即学习“前端免费学习笔记（深入）”；
解决方案
正确的做法是分别获取每个元数据字段的值，然后使用逻辑OR运算符来判断是否需要显示提示信息。以下是两种实现方式：
方式一：分别获取并存储元数据
这种方式更易于理解和调试，将每个元数据的值存储在单独的变量中。
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 );方式二：直接在条件判断中使用函数
这种方式代码更简洁，但可读性稍差。
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 );代码解释
- global $post;：获取全局的$post对象，其中包含当前文章的信息。
- $author_id = $post->post_author;：获取当前文章的作者ID。
- get_the_author_meta('field_name', $author_id);：获取指定作者ID的指定元数据字段的值。
- empty()：PHP内置函数，用于判断变量是否为空。 如果变量不存在，或者它的值等于false，那么它会被认为是空的。 empty() 不会产生警告，即使变量未定义。
- ||：逻辑OR运算符，只要其中一个条件为真，整个表达式就为真。
- #profile_info_template：需要控制显示/隐藏的提示信息区块的ID。
- display: inline-block !important;：CSS样式，用于强制显示该区块。!important用于覆盖其他样式规则。
- add_action( 'wp_head', 'nothing_to_show_display', 10, 1 );：将nothing_to_show_display函数挂载到wp_head钩子上，使其在页面头部执行。
注意事项
- 确保#profile_info_template区块在HTML中存在，并且默认设置为display: none;。
- 根据实际情况修改元数据字段名称（city、style_of_play、highest_division）和提示信息区块的ID。
- 可以使用更复杂的CSS样式来控制提示信息的显示效果。
- 如果需要更复杂的逻辑判断，可以使用嵌套的if语句或switch语句。
总结
通过以上方法，我们可以灵活地根据作者元数据的有无，动态地显示或隐藏页面上的特定区块，从而提升用户体验。 关键在于理解get_the_author_meta函数的用法，以及如何使用逻辑运算符进行条件判断。 此外，合理利用CSS样式可以实现更丰富的展示效果。
