大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
工具:wordpress
创新互联是一家专业从事做网站、成都网站建设的网络公司。作为专业网站建设公司,创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务!
步骤:
1、打开wordpress,在当前wordpress主题中的 functions.php 文件添加下面的代码。
2、修改”我的博客首页”的链接。在需要使用面包屑导航的主题文件的对应位置添加下面的调用代码即可。?php seobreadcrumbs(); ?
3、使用谷歌”Rich Snippets Testing Tool”工具来测试网址。可以看到出现在网站的搜索结果中的面包屑。
wordpress主题添加面包屑导航一般有两种方法,一种是通过使用插件来实现,另一种是不使用插件,纯代码实现,下面我来介绍一下这两种方法。
一,纯代码实现
在functions中添加
function get_breadcrumbs()
{
global $wp_query;
if ( !is_home() ){
// Start the UL
echo 'ul class="breadcrumbs"';
// Add the Home link
echo 'lia href="'. get_settings('home') .'"网站首页/a/li';
if ( is_category() )
{
$catTitle = single_cat_title( "", false );
$cat = get_cat_ID( $catTitle );
echo "li raquo; ". get_category_parents( $cat, TRUE, " raquo; " ) ."/li";
}
elseif ( is_archive() !is_category() )
{
echo "li raquo; Archives/li";
}
elseif ( is_search() ) {
echo "li raquo; Search Results/li";
}
elseif ( is_404() )
{
echo "li raquo; 404 Not Found/li";
}
elseif ( is_single() )
{
$category = get_the_category();
$category_id = get_cat_ID( $category[0]-cat_name );
echo 'li raquo; '. get_category_parents( $category_id, TRUE, " raquo; " );
echo the_title('','', FALSE) ."/li";
}
elseif ( is_page() )
{
$post = $wp_query-get_queried_object();
if ( $post-post_parent == 0 ){
echo "li raquo; ".the_title('','', FALSE)."/li";
} else {
$title = the_title('','', FALSE);
$ancestors = array_reverse( get_post_ancestors( $post-ID ) );
array_push($ancestors, $post-ID);
foreach ( $ancestors as $ancestor ){
if( $ancestor != end($ancestors) ){
echo 'li raquo; a href="'. get_permalink($ancestor) .'"'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'/a/li';
} else {
echo 'li raquo; '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'/li';
}
}
}
}
// End the UL
echo "/ul";
}
}
在有需要添加面包屑插件的页面适当位置添加
php get_breadcrumbs();
打开主题所在的style.css,添加
ul.breadcrumbs {
list-style: none;
padding: 0;
margin: 0;
font-size:12px;
}
ul.breadcrumbs li {
float: left;
margin: 0 5px 0 0;
padding: 0;
}
通过上述三步就可以实现无插件面包屑效果,稍微的样式和布局可以修改。
二,用插件实现
这里我推荐的插件是Breadcrumb NavXT,它提供5种面包屑导航样式,如下图所示
插件的设置界面如下
看不懂英文的用翻译工具翻译一下也能大概知道意思了,其它具体的使用您可以自己去安装一下这款插件体验一下,如果有不懂再问吧。
直接改一下样式隐藏起来,或者去主题中修改。比较简单应该没有人去开发这种插件吧。
1、层级较深的网站,面包屑导航适合层级较深的网站,如果只有一级分类的话,通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航的作用。
2、独立不交叉的网站机构,由于面包屑网站导航路径是线性结构的,因此网站内容必须划分的非常清晰,且不存在交叉;否则,面包屑导航的路径就不是唯一的,同一分类可能出现在不同的路径中,让用户感到困惑。
在wordpress中添加面包屑导航的话,可以直接使用插件来实现,不过很多站长都不喜欢用插件,还是认为如果能用代码解决的话是最理想的。我最近也找了一些关于面包屑导航的资料。下文中就有详细解决怎么用代码来实现wordpress面包屑导航:
一、在wordpress博客当前主题的functions.php文件(没有就创建一个)中添加以下代码:
//面包屑导航
function get_breadcrumbs()
{
global $wp_query;
if ( !is_home() ){
// Start the UL
echo 'ul class="breadcrumbs"';
// Add the Home link
echo 'lia href="'. 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 » Search Results/li";
}
elseif ( is_404() )
{
echo "li » 404 Not Found/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, " » " );
echo the_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 ( $ancestors as $ancestor ){
if( $ancestor != end($ancestors) ){
echo 'li » a href="'. 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';
}
}
}
}
// End the UL
echo "/ul";
}
}
二、在显示面包屑导航的位置添加以下调用代码:
?php
if (function_exists('get_breadcrumbs')){
get_breadcrumbs();
}
?
三、在主题的css样式文件中添加以下样式代码:
ul.breadcrumbs {list-style: none; font-size:12px;}
ul.breadcrumbs li {float: left; margin-right:5px;}