您的位置 首页 编程知识

在 WordPress 中创作 Bio Box CSS

这段 CSS 代码创建了一个作者信息框,包含作者头像、姓名、简介和查看全部文章的链接,从而提升读者参与度。 P…

在 WordPress 中创作 Bio Box CSS

这段 CSS 代码创建了一个作者信息框,包含作者头像、姓名、简介和查看全部文章的链接,从而提升读者参与度。

PHP 代码:

// ---------------------------------------------------------- // //                   作者信息框                              // // ---------------------------------------------------------- // function author_info_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, ['size' => 96]);          $output = '<div class="author-bio">';         $output .= '@@##@@';         $output .= '<div class="desc-wrapper">';         $output .= '<h4>' . esc_html($author_name) . '</h4>';         if ($author_bio) {             $output .= '<p>' . wp_kses_post($author_bio) . '</p>';         }         $output .= '<a href="' . esc_url($author_posts_url) . '">查看' . esc_html($author_name) . '的所有文章</a>';         $output .= '</div>';         $output .= '</div>';          return $output;     }     return ''; }  add_shortcode('author_bio', 'author_info_box');
登录后复制

CSS 代码:

立即学习“”;

/* ---------------------------------------------------------- */ /*                     作者信息框                              */ /* ---------------------------------------------------------- */ .author-bio {     display: flex;     align-items: center;     gap: 20px;     border-top: 1px solid rgba(0,0,0,.1);     padding-top: 30px;     margin-top: 30px; } .author-bio .author-avatar {     display: inline-flex;     flex-shrink: 0;     width: 80px;     height: 80px;     line-height: 0;     border-radius: 100%; } .author-bio .desc-wrapper > * {     margin: 0 0 10px 0; } .author-bio .desc-wrapper > *:last-child {     margin-bottom: 0; } .author-bio .desc-wrapper p, .author-bio .desc-wrapper a {     font-size: 0.9rem; }  @media only screen and (max-width: 767px) {     .author-bio {         flex-direction: column;         text-align: center;     } }
登录后复制

完整文章:在 WordPress 中创建作者信息框 CSS 代码片段

在 WordPress 中创作 Bio Box CSS

以上就是在 WordPress 中创作 Bio Box CSS的详细内容,更多请关注php中文网其它相关文章!

本文来自网络,不代表四平甲倪网络网站制作专家立场,转载请注明出处:http://www.elephantgpt.cn/5944.html

作者: nijia

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

18844404989

在线咨询: QQ交谈

邮箱: 641522856@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部