WordPress navigation menu

Document directory

• Related Topics
• Job Analysis
• Expected structure:
• Page navigation menu
• CATEGORY navigation menu
• Demo topic
• Download topic

Navigation menus have long been "deeply rooted in the hearts of the people", and the applications on blogs are increasingly important and diverse. from the beginning of this article, I will discuss several topics about WordPress navigation menus and discuss how to use and enhance the navigation menus on WordPress. There is a certain relationship between topics, and the difficulty will gradually increase.

 

There are two types of navigation menus on WordPress: page navigation menu and category navigation menu.
Remember? WordPress can write independent pages, and the page navigation menu is a menu composed of the home page and each independent page, and the category navigation menu is a menu composed of the home page and each category.

Related Topics

WordPress navigation menu
Level 2 navigation menu
Fade out navigation menu
Scroll navigation menu
Multi-level navigation menu
Jquery navigation menu
Click navigation menu(TBD topic)

Job Analysis

Since the menu consists of the home page and the independent page list or the home page and the category list, we need to deal with two steps, that is, the home page menu items and other menu items.
In addition, we also need to process the three States of the menu item, namely the general state and the current menu item State (for example, the home page menu item is the current menu item in the home page) and the status of the selected menu item.
That is to say, we need to handle three tasks in total:
1. Other menu items outside the home page
2. Home Page menu items
3. Visual Effects of menu items in different States

Expected structure:

<Div id = "menubar"> <ul class = "Menus"> <li class = "... "> <a href =" http ://... /"> Home </a> </LI> <li class = "... "> <a href =" http ://... /"> menu item 1 </a> </LI> <li class = "... "> <a href =" http ://... /"> menu item 2 </a> </LI> <li class = "... "> <a href =" http ://... /"> menu item 3 </a> </LI>... </ul> </div>

Page navigation menu

1. Independent page list as menu item
Call wp_list_pages to obtain the independent page list and use the following parameters:
Depth: List depth (maximum number of layers). This article discusses the level-1 menu, so the maximum depth is 1.
Title_li: The title string. It is not required here and is set to 0.
Sort_column: Sort list items in ascending order based on the order set during page creation
The statement for printing the menu items on an independent page is:

<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>

2. Home Page menu items
Because the class of the independent page is page_item, the class of the current Independent page is current_page_item. When the page is the homepage,
The class of the home page menu item should be current_page_item, and in other cases, page_item. Therefore,
We need a branch code to determine the class for it:

<? PHP // For the homepage, the class is current_page_itemif (is_home () {$ home_menu_class = 'current _ page_item '; // if it is not the homepage, class is page_item} else {$ home_menu_class = 'page _ item';}?>

The statement for printing the menu items on the home page is:

<li class="<?php echo($home_menu_class); ?>"><a title="Home" href="<?php echo get_settings('home'); ?>/">Home</a></li>

3. menu style
This is a general process from general to special processing. Generally, the style of a menu item is placed before it, and the style of the current and selected menu items is placed behind it. When the latter meets the conditions, the style of the former will be overwritten, to change the appearance.

/* Menu item */# menubar ul. menus Li {float: Left;/* float to the left */list-style: none;/* clear list style */margin-Right: 1px; /* interval on the right */}/* menu necklace connected */# menubar ul. menus Li a {padding: 5px 10px;/* padding */display: block;/* display as a block */color: # FFF;/* text color */background: #67ace5;/* Background Color */Text-Decoration: none;/* No underlay line */}/* Current menu necklace connected */# menubar ul. menus Li. current_page_item A {Background: # 5495cd;/* Background Color */}/* selected menu necklace */# menubar ul. menus Li A: hover {Background: #4281b7;/* Background Color */}

CATEGORY navigation menu

1. Category list as menu item
Call wp_list_categories to obtain the category list and use the following parameters:
Depth: List depth (maximum number of layers). This article discusses the level-1 menu, so the maximum depth is 1.
Title_li: The title string. It is not required here and is set to 0.
Orderby: Sort list items in ascending order based on the order set during page creation.
Show_count: whether to display the number of articles for this category. This parameter is not required. Set it to 0.
The statement for printing the category menu item is:

<?php wp_list_categories('depth=1&title_li=0&orderby=name&show_count=0'); ?>

2. Home Page menu items
Similar to the page navigation menu, the class of the menu item is different.
Page_item changed to cat-item
Current_page_item changed to current-cat

3. menu style
Because the class of the menu item is slightly different, you need to modify it slightly.
Current_page_item changed to current-cat

Demo topic

It is based on the WordPress built-in theme default and is only for learning reference. The modified files includeHeader. phpAndStyle.css
The topic includes two menus: page navigation menu and category navigation menu. for ease of demonstration, I used class = "menubar" to define two menu bar styles. the formal use only has one menu bar, which is more appropriate to define with ID.

Download topic

Default_with_menubar.zip

 

 

Statement:This paper uses BY-NC-SAAuthorization by protocol. For more information, see WordPress navigation menu.