1、层级较深的网站,面包屑导航适合层级较深的网站,如果只有一级分类的话,通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航的作用。
2、独立不交叉的网站机构,由于面包屑网站导航路径是线性结构的,因此网站内容必须划分的非常清晰,且不存在交叉;否则,面包屑导航的路径就不是唯一的,同一分类可能出现在不同的路径中,让用户感到困惑。
在wordpress中添加面包屑导航的话,可以直接使用插件来实现,不过很多站长都不喜欢用插件,还是认为如果能用代码解决的话是最理想的。我最近也找了一些关于面包屑导航的资料。下文中就有详细解决怎么用代码来实现wordpress面包屑导航:
一、在wordpress博客当前主题的functions.php文件(没有就创建一个)中添加以下代码:
//面包屑导航
functionget_breadcrumbs()
{
global$wp_query
if(!is_home()){
//StarttheUL
echo'<ulclass="breadcrumbs">'
//AddtheHomelink
echo'<li><ahref="'.get_settings('home').'">'.get_bloginfo('name').'</a></li>'
if(is_category())
{
$catTitle=single_cat_title("",false)
$cat=get_cat_ID($catTitle)
echo"<li>?".get_category_parents($cat,TRUE,"?")."</li>"
}
elseif(is_archive()&&!is_category())
{
echo"<li>?Archives</li>"
}
elseif(is_search()){
echo"<li>?SearchResults</li>"
}
elseif(is_404())
{
echo"<li>?404NotFound</li>"
}
elseif(is_single())
{
$category=get_the_category()
$category_id=get_cat_ID($category[0]->cat_name)
echo'<li>?'.get_category_parents($category_id,TRUE,"?")
echothe_title('','',FALSE)."</li>"
}
elseif(is_page())
{
$post=$wp_query->get_queried_object()
if($post->post_parent==0){
echo"<li>?".the_title('','',FALSE)."</li>"
}else{
$title=the_title('','',FALSE)
$ancestors=array_reverse(get_post_ancestors($post->ID))
array_push($ancestors,$post->ID)
foreach($ancestorsas$ancestor){
if($ancestor!=end($ancestors)){
echo'<li>?<ahref="'.get_permalink($ancestor).'">'.strip_tags(apply_filters('single_post_title',get_the_title($ancestor))).'</a></li>'
}else{
echo'<li>?'.strip_tags(apply_filters('single_post_title',get_the_title($ancestor))).'</li>'
}
}
}
}
//EndtheUL
echo"</ul>"
}
}
二、在显示面包屑导航的位置添加以下调用代码:
<?php
if(function_exists('get_breadcrumbs')){
get_breadcrumbs()
}
?>
三、在主题的css样式文件中添加以下样式代码:
ul.breadcrumbs{list-style:nonefont-size:12px}
ul.breadcrumbsli{float:leftmargin-right:5px}
1、使用HTML语言创建导航栏的基本结构,导航栏容器、导航链接、下拉菜单等元素。2、使用CSS语言设置导航栏的样式,字体、背景、边框、排列方式等属性。
3、使用JavaScript语言实现导航栏的交互功能,鼠标悬停、下拉菜单展开与收起等效果。
你把 这一大段代码中<body>与</body>之间的内容放到你要做的导航的标签里面
把<style></style>以及他们之间的内容全部复制到</head>这个标签前面
就OK 不过你要注意他的样式名称和你的有没有重复的,不然样式会被覆盖,有什么不明白的可以HI我
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)