WordPress의 Bio Box CSS 작성

이 저자 프로필 상자 CSS 코드는 더 많은 저자 배경 정보를 제공하고 독자가 더 많은 기사를 읽도록 독려하여 독자 참여를 높입니다.

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

이 코드는 작성자의 아바타, 이름, 소개, 더 많은 기사를 볼 수 있는 링크가 포함된 작성자 프로필 상자를 추가합니다. CSS 코드는 다양한 화면 크기에서 최적의 표시를 보장합니다. WordPress 테마의 functions.php 파일에 코드를 추가하고 필요에 따라 CSS 스타일을 조정하는 것을 잊지 마세요.

위 내용은 WordPress의 Bio Box CSS 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!