Auteur Bio Box CSS dans WordPress

Ce code CSS de boîte de profil d'auteur augmente l'engagement du lecteur en fournissant plus d'informations générales sur l'auteur et en encourageant les lecteurs à lire plus d'articles.

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

Ce code ajoute une zone de profil d'auteur qui contient l'avatar de l'auteur, son nom, son introduction et un lien pour afficher plus d'articles. Le code CSS garantit un affichage optimal sur différentes tailles d'écran. N'oubliez pas d'ajouter le code au fichier functions.php de votre thème WordPress et d'ajuster les styles CSS si nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!