怎么用纯代码实现wordpress面包屑导航

2018年4月9日

最近用wordpress建站程序搭建网站的时候,遇到一个问题,就是面包屑导航。wordpress本身是没有面包屑导航的,但是有很多插件可以实现这一功能,比如Breadcrumb NavXT。不过也有很多站长并不喜欢使用插件,毕竟用太多插件是会影响网站运行速度的。

我个人也并不是很喜欢用插件,在做面包屑导航的时候查了很多资料,可是大部分都是很久以前的,wordpress现在都已经更新到了4.9版本,所以有些代码可能不是很好,用的时候会出现很多bug,或者根本就用不上。

下面我就为大家详细的介绍一下我是怎么用代码来解决面包屑导航的:

一、首先,在wordpress当前主题的function.php文件中添加以下代码(一般添加在文件末尾)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//breadcrumb
function the_breadcrumb() {
                echo ‘<ul class=”breadcrumb”>’;
        // Add the Home link
if (!is_home()) {
                echo ‘<li><a href=”‘;
                echo get_option(‘home’);
                echo ‘”>’;
                echo ‘首页’;
           echo “</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>”;
    }
}

二、然后在需要使用面包屑导航的位置添加以下代码进行调用:

1
2
3
4
5
<?php
if (function_exists(‘get_breadcrumbs’)){
get_breadcrumbs();
}
?>

三、最后还需要在主题的css样式文件中添加以下代码来对面包屑导航的样式进行美化:

1
2
ul.breadcrumb {list-style: none; font-size:12px;}
ul.breadcrumb li {float: left; margin-right:5px;}

完成以上几个步骤之后就可以实现wordpress面包屑导航的纯代码设计了,效果图如下,具体样式可根据个人喜好进行设计。

没有评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注