posted time Created time: 2015-07-07 posted time Last updated time:

Blog Bread Crumb Component

The Blog Bread List uses most relevant keyword tag's page as the parent hierarchy page. This function helps the main contents by blog articles.

Usage and appearance of the Blog Bread Crumb

The Blog Bread List is used in the Blog Article Page. On other templates, please use the Bread Crumb Component.

That is because the Blog Bread List is created from the keyword tag. The most important tag appears as the bread list of this page.

Blog bread list

This bread list is calculated from the keyword tags. The most important tag which has the page of it as main content is selected as the parent of the blog article page.

The links of the bread list are effective to show the site structure. In addition to the links, this bread list has structured data.

The structured data is shown on the Search Console of the Google.

Source code of the Blog Bread Crumb

The source code of the Blog Bread Crumb Component consists of Html code, Server side program, and Style Sheet.

Html code

The Html code of the Blog Bread Crumb is below.

The "@list" array variable has information about the bread list. This variable is made by the server side program.

This Html code uses structured data of the "" markup.

Server side program

The server side program of the Blog Bread Crumb is below.

This program makes the "@list" variable by following operations.

Select tag to use as bread list

The "selectPageId()" function get the page id of the parent page by SQL query. The keyword tag data is used to select the most important and relevant main contents page.

Make bread list variable

The "getBreadList()" function make the "@list" variable. This function calls the "getParent()" until the parent does not exists.

After making the list of the parents and ancestors, add the style, url and title to the member variables.

Style Sheet

The Style Sheet of the Blog Bread Crumb is below.

When you change the design of the template and this bread list, please change the Style Sheet, and the Html code.

Go to Top