目录
PHP 代码
首页 后端开发 php教程 在 WordPress 中创作 Bio Box CSS

在 WordPress 中创作 Bio Box CSS

Jan 13, 2025 pm 06:03 PM

Author Bio Box CSS in WordPress

此作者简介框 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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

11个最佳PHP URL缩短脚本(免费和高级) 11个最佳PHP URL缩短脚本(免费和高级) Mar 03, 2025 am 10:49 AM

11个最佳PHP URL缩短脚本(免费和高级)

在Laravel中使用Flash会话数据 在Laravel中使用Flash会话数据 Mar 12, 2025 pm 05:08 PM

在Laravel中使用Flash会话数据

Instagram API简介 Instagram API简介 Mar 02, 2025 am 09:32 AM

Instagram API简介

简化的HTTP响应在Laravel测试中模拟了 简化的HTTP响应在Laravel测试中模拟了 Mar 12, 2025 pm 05:09 PM

简化的HTTP响应在Laravel测试中模拟了

构建具有Laravel后端的React应用程序:第2部分,React 构建具有Laravel后端的React应用程序:第2部分,React Mar 04, 2025 am 09:33 AM

构建具有Laravel后端的React应用程序:第2部分,React

php中的卷曲:如何在REST API中使用PHP卷曲扩展 php中的卷曲:如何在REST API中使用PHP卷曲扩展 Mar 14, 2025 am 11:42 AM

php中的卷曲:如何在REST API中使用PHP卷曲扩展

在Codecanyon上的12个最佳PHP聊天脚本 在Codecanyon上的12个最佳PHP聊天脚本 Mar 13, 2025 pm 12:08 PM

在Codecanyon上的12个最佳PHP聊天脚本

Laravel中的通知 Laravel中的通知 Mar 04, 2025 am 09:22 AM

Laravel中的通知

See all articles