[7B2主题优化]在文章页面头部添加一个当前位置

样式:

[7B2主题优化]在文章页面头部添加一个当前位置

在使用 WordPress 的 7B2 主题时,为了提升用户体验和 SEO(搜索引擎优化),在文章页面顶上中添加一个当前位置导航 这是一个很有用的功能。当前位置导航不仅能帮助用户快速了解当前页面的位置,还可以提高网站结构的清晰度,便于搜索引擎蜘蛛更高效地爬行和索引页面内容。

设置教程

先在你的/b2/Assets/fontend/style.css文件里面添加以下代码:

/* 文章头部当前位置 -   */
.breadcrumb {
    top: -5px;/* 调整上下位置 */
    font-size: 14px; /* 调整字体大小 */
    color: #555; /* 文字颜色 */
    padding-left: 0px; /* 内边距,微调与页面左侧的间距 */
    text-align: left; /* 对齐方式 */
    max-width: 1000px; /* 限制宽度,与文章内容宽度一致 */
    margin: 0 0px 8px auto; /* 居中,与文章主体对齐 */
    position: relative; /* 确保定位正常 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 防止超出容器时溢出 */
    text-overflow: ellipsis; /* 添加省略号(可选) */
}
 
.breadcrumb a {
    color: #007bff;
    text-decoration: none;
}
 
/* 文章头部当前位置 - 结束  */

然后在/b2/TempParts/Single/content.php这个文件添加这个代码:

搜索:single-article b2-radius box 在这个代码下面一行添加,具体可以看我的截图。

[7B2主题优化]在文章页面头部添加一个当前位置

<!--?php custom_breadcrumb(); ?-->

 

最后在/b2/functions.php文件下添加代码:

// 在文章页面头部添加当前位置  -
function custom_breadcrumb() {
    if (!is_front_page()) {
        echo '<div class="breadcrumb">';
        echo '当前位置: ';
        echo '<a href="' . home_url() . '">首页</a> > ';
        if (is_category() || is_single()) {
            the_category(' > ');
            if (is_single()) {
                echo ' > ';
                the_title();
            }
        } elseif (is_page()) {
            echo the_title();
        } elseif (is_search()) {
            echo '搜索结果: ';
            echo get_search_query();
        }
        echo '</div>';
    }
}
?>

到这里就结束了,在文章页面按下Ctrl+F5强制刷新浏览器缓存就可以看到效果了!

重要提示

如有解压密码: 看下载页、看下载页、看下载页。
源码工具资源类具有可复制性: 建议具有一定思考和动手能力的用户购买。
请谨慎考虑: 小白用户和缺乏思考动手能力者不建议赞助。
虚拟商品购买须知: 虚拟类商品,一经购买打赏赞助,不支持退款。请谅解,谢谢合作!

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容