在 WordPress 中创作 Bio Box CSS

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《在 WordPress 中创作 Bio Box CSS》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

这段 CSS 代码创建了一个作者信息框，包含作者头像、姓名、简介和查看全部文章的链接，从而提升读者参与度。

PHP 代码：

// ---------------------------------------------------------- //
//                   作者信息框                              //
// ---------------------------------------------------------- //
function author_info_box() {
    if (is_single()) {
        $author_id = get_the_author_meta('ID');
        $author_name = get_the_author_meta('display_name');
        $author_bio = get_the_author_meta('description');
        $author_posts_url = get_author_posts_url($author_id);
        $author_avatar = get_avatar_url($author_id, ['size' => 96]);

        $output = '<div class="author-bio">';
        $output .= '<img alt="头像" class="author-avatar" src="' . esc_url($author_avatar) . '">';
        $output .= '<div class="desc-wrapper">';
        $output .= '<h4>' . esc_html($author_name) . '</h4>';
        if ($author_bio) {
            $output .= '<p>' . wp_kses_post($author_bio) . '</p>';
        }
        $output .= '<a href="' . esc_url($author_posts_url) . '">查看' . esc_html($author_name) . '的所有文章</a>';
        $output .= '</div>';
        $output .= '</div>';

        return $output;
    }
    return '';
}

add_shortcode('author_bio', 'author_info_box');

CSS 代码：

/* ---------------------------------------------------------- */
/*                     作者信息框                              */
/* ---------------------------------------------------------- */
.author-bio {
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid rgba(0,0,0,.1);
    padding-top: 30px;
    margin-top: 30px;
}
.author-bio .author-avatar {
    display: inline-flex;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    line-height: 0;
    border-radius: 100%;
}
.author-bio .desc-wrapper > * {
    margin: 0 0 10px 0;
}
.author-bio .desc-wrapper > *:last-child {
    margin-bottom: 0;
}
.author-bio .desc-wrapper p,
.author-bio .desc-wrapper a {
    font-size: 0.9rem;
}

@media only screen and (max-width: 767px) {
    .author-bio {
        flex-direction: column;
        text-align: center;
    }
}

完整文章：在 WordPress 中创建作者信息框 CSS 代码片段

今天关于《在 WordPress 中创作 Bio Box CSS》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！