此作者簡(jiǎn)介框 CSS 代碼通過提供更多作者背景信息并鼓勵(lì)讀者閱讀更多文章來提升讀者參與度。

PHP 代碼

// ---------------------------------------------------------- //
//                   Snippflow 作者簡(jiǎn)介框                     //
// ---------------------------------------------------------- //
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 作者簡(jiǎn)介框                   */
/* ---------------------------------------------------------- */
.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;
    }
}

這段代碼添加了一個(gè)作者簡(jiǎn)介框，包含作者頭像、姓名、簡(jiǎn)介和查看更多文章的鏈接。 CSS 代碼確保了在不同屏幕尺寸下的最佳顯示效果。 記得將代碼添加到你的 WordPress 主題的 functions.php 文件中，并根據(jù)需要調(diào)整 CSS 樣式。

以上是在 WordPress 中創(chuàng)作 Bio Box CSS的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！