根据作者元数据有无，使用CSS显示或隐藏区块

本文旨在解决WordPress Elementor Pro搭建的作者页面中，根据作者元数据（如城市、风格、最高级别等）的有无，动态显示或隐藏特定区块的问题。通过修改代码，使用get_the_author_meta函数分别获取各项元数据，并结合OR运算符判断是否显示提示信息，从而实现更灵活的页面展示效果。

在使用WordPress的Elementor Pro创建作者页面时，经常需要根据作者的元数据来展示不同的信息。有时，我们希望在某些元数据为空时，显示一条提示信息。本文将介绍如何使用CSS和PHP来实现这一功能，即当作者的城市、风格或最高级别等信息缺失时，显示预先定义的提示信息区块。

问题分析

核心问题在于如何正确地判断多个元数据字段是否为空，并根据判断结果动态地修改CSS样式，从而控制提示信息区块的显示与隐藏。get_the_author_meta函数是获取作者元数据的关键，但需要注意其一次只能获取一个字段的值。

立即学习“前端免费学习笔记（深入）”；

解决方案

正确的做法是分别获取每个元数据字段的值，然后使用逻辑OR运算符来判断是否需要显示提示信息。以下是两种实现方式：

方式一：分别获取并存储元数据

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

这种方式更易于理解和调试，将每个元数据的值存储在单独的变量中。

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 );

代码解释

1. global $post;：获取全局的$post对象，其中包含当前文章的信息。
2. $author_id = $post->post_author;：获取当前文章的作者ID。
3. get_the_author_meta('field_name', $author_id);：获取指定作者ID的指定元数据字段的值。
4. empty()：PHP内置函数，用于判断变量是否为空。 如果变量不存在，或者它的值等于false，那么它会被认为是空的。 empty() 不会产生警告，即使变量未定义。
5. ||：逻辑OR运算符，只要其中一个条件为真，整个表达式就为真。
6. #profile_info_template：需要控制显示/隐藏的提示信息区块的ID。
7. display: inline-block !important;：CSS样式，用于强制显示该区块。!important用于覆盖其他样式规则。
8. 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样式可以实现更丰富的展示效果。

以上就是根据作者元数据有无，使用CSS显示或隐藏区块的详细内容，更多请关注php中文网其它相关文章！