200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 纯代码实现WordPress面包屑导航在文章页面

纯代码实现WordPress面包屑导航在文章页面

时间:2020-09-30 12:31:37

相关推荐

纯代码实现WordPress面包屑导航在文章页面

所谓的”面包屑导航”本网站文章页面上方与导航栏下方之间的部分(如下图所示)

本网站的原始主题没有这个功能。浏览同一分类下的多篇文章很麻烦。您需要返回主页并重新找到分类入口。

步骤

对于面包屑导航有很多开放的实现方法,许多代码甚至非常小心地提供主页、标签页面、搜索页面、独立页面和其他页面支持,但君目前的需求是浏览文章,所以这里只提供文章页面添加此功能,其他页面添加可以参考此方法。

在主题的functions.php以下代码添加到文件中:

///面包屑导航生成函数-by 黑鸟博客function guihet_breadcrumbs(){ if( !is_single() ) return false; $categorys = get_the_category(); $category = $categorys[0]; return 现在的位置:.get_bloginfo( ame).>.get_category_parents($category->term_id, true, >).get_the_title();}

在主题的single.php将以下代码添加到文件中,黑鸟君将其放置在导航栏下,需要根据需求和主题代码进行修改:

美化

完成以上两个步骤后,先清理浏览器缓存,然后显示面包屑导航,但不够好看。因此,还需要添加显示样式代码。一般主题是添加以下代码style.CSS文件,以下只是黑鸟博客使用的风格,仅供窗口,根据自己的主题进行调整。

/** 面包屑导航 - 参考黑鸟博客风格 **/.breadcrumbs{padding: 15px 0;font-size: 12px;line-height: 1;text-align: left;background-color: #fff;margin-bottom: 15px;margin-top: -15px;border-bottom: 1px solid #EBEBEB; box-shadow: 0 1px 3px rgba(0,0,0,.04);color: #999;}.breadcrumbs small{font-size: 12px;font-family: serif;color: #bbb;margin: 0 2px;font-weight: bold;}.breadcrumbs a{color: #999;}.breadcrumbs a:hover{color: #666;}@media (max-width:640px){.breadcrumbs{margin-top: 1px;margin-bottom: 0;padding: 10px 15px;border-bottom: none;margin-bottom: 1px;}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。