Add breadcrumb navigation to WordPress article page

When browsing the website, we often find that there is a breadcrumb navigation shown in the following figure on many website pages, which is very beautiful and helpful for users to quickly learn and understand the website content and organization, thus forming a good sense of location. The 4.0 version of DUX theme starts to add such a function. How to add it to DUX3.0?

Well, out of curiosity, let's first understand why this navigation is called breadcrumb navigation. The following content is from Baidu Encyclopedia.

Hansel and Gretel are brother and sister. They were born to the woodcutter's ex-wife and abandoned by their father under the pressure of their stepmother. The two brothers and sisters experienced abandonment twice. For the first time, Hansel marked the way with stones, and the two brothers and sisters returned home. The second time he was abandoned, Hansel made a mark with bread crumbs, but the birds pecked him clean. The brother and sister lost their way in the forest. They were so hungry and weak that they came to a small house with bread as the roof and candy as the window. Hunger made them forget their fatigue and potential danger, and gnawed at the house. As a result, the elder brother was trapped in the house by the witch, and the younger sister was forced to work as a laborer. Just when the witch was about to eat the elder brother, the younger sister borrowed the opportunity from the witch to learn how to add firewood. Pushing the witch into the stove, the brother and sister returned home with the witch's treasure. The stepmother has passed away, and the brother and sister live a happy life with their father.

There are many implementation methods for breadcrumb navigation on the web, and many codes also carefully provide support for the home page, tab page, search page, independent page, etc., but I personally feel that it is really useful on the article page, and other pages are more or less cumbersome after adding this function, so here only provides the method of adding this function to the article page, Other pages can be added according to this method.

Generating function

Add the following code to the functions.php file of the topic:

 //Breadcrumb navigation generation function function generate_breadcrumbs(){     if( !is_single() ) return false;       $categorys = get_the_category();     $category = $categorys[0];   Return 'Current location:<a href="'. get_bloginfo ('url ').'">'. get_bloginfo ('name'). '</ a> <small>></small> '.get_category_parents($category->term_id, true, ' <small>></small> ').get_the_title(); }

Front display

Add the following code to the single.php file of the topic:

 <!--  Display code in front of breadcrumb navigation --> <div class="breadcrumbs"> <div class="container"><? php echo generate_breadcrumbs() ?></ div> </div>

Style beautification

Add the following code to the main style sheet of the theme. The DUX theme is a main.css file, and other themes may be style.css files. Please consult the theme author for details.

 .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;} }

The style code is directly copied from the DUX theme. The specific style can be adjusted by you.

Finally, remember to clear the browser cache and update the CDN cache to see the css effect.