Author Bio Box CSS in WordPress

This author profile box CSS code increases reader engagement by providing more author background information and encouraging readers to read more articles.

PHP code

<code class="language-php">// ---------------------------------------------------------- //
//                   Snippflow 作者简介框                     //
// ---------------------------------------------------------- //
function sf_author_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, array('size' => 96));

        $output = '<div class="sf-author-bio">
            <div class="author-avatar">'.get_avatar($author_id, 96).'</div>
            <div class="desc-wrapper">
                <h3>'.$author_name.'</h3>
                <p>'.$author_bio.'</p>
                <a href="'.$author_posts_url.'">查看更多文章</a>
            </div>
        </div>';

        echo $output;
    }
}

add_action('wp_footer', 'sf_author_box');


// CSS 代码 (可添加到主题的 style.css 或自定义 CSS 文件中)
/* ---------------------------------------------------------- */
/*                     Snippflow 作者简介框                   */
/* ---------------------------------------------------------- */
.sf-author-bio { 
    display: flex; 
    align-items: center; 
    gap: 20px;
    border-top: 1px solid rgba(0,0,0,.1);
    padding-top: 30px;
    margin-top: 30px;
}
.sf-author-bio .author-avatar {
    display: inline-flex;
    flex-shrink: 0;
    width: 80px; 
    height: 80px; 
    line-height: 0; 
    border-radius: 100%;
}
.sf-author-bio .desc-wrapper > * {
    margin: 0 0 10px 0;
}
.sf-author-bio .desc-wrapper > *:last-child {
    margin-bottom: 0;
}
.sf-author-bio .desc-wrapper h3,
.sf-author-bio .desc-wrapper p,
.sf-author-bio .desc-wrapper a {
    font-size: 0.9rem;
}

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

This code adds an author profile box that contains the author's avatar, name, introduction, and a link to view more articles. CSS code ensures optimal display on different screen sizes. Remember to add the code to your WordPress theme’s functions.php file and adjust the CSS styles as needed.

The above is the detailed content of Author Bio Box CSS in WordPress. For more information, please follow other related articles on the PHP Chinese website!