这段 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的详细内容，更多请关注php中文网其它相关文章！