如何用纯代码方法实现WordPress面包屑导航效果

如何用纯代码方法实现WordPress面包屑导航效果,第1张

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我


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11346898.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存