在 WordPress 中創作 Bio Box CSS

此作者簡介框 CSS 程式碼透過提供更多作者背景資訊並鼓勵讀者閱讀更多文章來提升讀者參與度。

PHP 代碼

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

這段程式碼新增了一個作者簡介框，包含作者頭像、姓名、簡介和查看更多文章的連結。 CSS 程式碼確保了在不同螢幕尺寸下的最佳顯示效果。 記得將程式碼加入你的 WordPress 主題的 functions.php 檔案中，並根據需要調整 CSS 樣式。

以上是在 WordPress 中創作 Bio Box CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！