在 WordPress 中创作 Bio Box CSS-php教程-PHP中文网

在 WordPress 中创作 Bio Box CSS

花韻仙語

发布： 2025-01-13 18:26:03

原创

1140人浏览过

在 wordpress 中创作 bio box css

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

PHP 代码：

<code class="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');</code>

登录后复制

CSS 代码：

AI Sofiya

一款AI驱动的多功能工具

103

查看详情

<code class="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;
    }
}</code>

登录后复制

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

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

以上就是在 WordPress 中创作 Bio Box CSS的详细内容，更多请关注php中文网其它相关文章！