Esiry.com
Focus on Machine Learning.

WordPress article page to add breadcrumb navigation

When browsing the website, I often find that many website pages have a breadcrumb navigation as shown below. It is very beautiful and helps users to quickly learn and understand the content and organization of the website, thus forming a good sense of location. The DUX theme 4.0 version has begun to add such a feature, so how to add it in DUX3.0?

 WordPress文章页添加面包屑导航

For the sake of curiosity, let’s first understand why this navigation is called breadcrumb navigation. The following content comes from Baidu Encyclopedia.

Hansel and Gretel were a brother and sister, born to the widow’s ex-wife, and abandoned by his father under the pressure of his stepmother. The brothers and sisters experienced two abandonment before and after. For the first time, Hansel used the stone as a mark along the way, and the brothers and sisters returned to their homes. The second time he was abandoned, Hansel used the breadcrumbs as a mark, but was eaten by the birds. The brothers and sisters lost their way in the forest. The pathless search, making them hungry, legs and feet, came to a hut with bread as a house and candy as a window. Hunger made them forget the exhaustion and potential danger and set off the house. As a result, under the temptation of the witch, the brother was locked in the house, and the younger sister was forced to work hard. When the witch wanted to eat the brother, the younger sister borrowed the witch to learn the opportunity to add firewood. Pushing the witch into the furnace, the brothers and sisters returned to their homes with the treasures of the witch. The stepmother passed away, and the brothers and sisters lived happily together with their father.

There are many ways to implement the breadcrumb navigation. Many codes also provide support for the home page, tabs, search pages, independent pages, etc., but the personal feeling is generally on the article page. After adding this function to the page, it seems to be cumbersome. Therefore, only the method of adding this function to the article page is provided here. The addition of other pages can be referred to this method.

Generating function

Add the following code to the theme’s functions.php file:

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

Front end display

Add the following code to the theme’s single.php file:

Style beautification

Add the following code to the theme’s main style sheet. The DUX theme is the main.css file. Other topics may be style.css files. Please consult the topic author.

.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 directly copies the DUX theme, and the specific style can be adjusted by yourself.

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

Rendering

WordPress文章页添加面包屑导航

Your support will encourage us to be creative continuously!

Use [WeChat] Scan QR code for Appreciation

Use [Alipay] Scan QR code for Appreciation

Jumping to PayPal...
赞(0)
Please indicate the source:Esiry » WordPress article page to add breadcrumb navigation

Comment 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址