如何为Wordpress菜单添加顺序编号 [英] How to add sequential numbering for wordpress menu

问题描述

当前在网站上工作，并尝试在wordpress菜单上的页面标题之前使用顺序编号，但不确定是否适合< span>而不删除页面标题，以及如何按顺序编号每个页面.我正在尝试实现的当前结构如下-

Currently working on a site and trying to use sequential numbering just before the page titles on a wordpress menu but not exactly sure how to fit the < span> in without removing the page title and also how to get each page numbered sequentially. Current structure of what I am trying to achieve is below -

<ul role='navigation' id='navigation'>
<li class='page_item '><span class="number">1 </span><a href=''>About </a> </li>
<li class='page_item '><span class="number">2 </span><a href=''>Work </a> </li>
<li class='page_item '><span class="number">3 </span><a href=''>Contact </a> </li>
    <li class='page_item '><span class="number">4 </span><a href=''>etc. </a> </li>
</ul>

我通过使用

<li><?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?></li>

我的CSS看起来像这样-

My CSS looks like this -

header ul li {
    display:block; 
    float:left; 
    white-space:nowrap; 
    overflow: hidden; 
}

header .number { 
    padding-left: 4px;
    text-align: center; 
    font-size: 14px; 
    vertical-align: middle; 
    line-height: 1px; 
    margin-right: 6px;
}

小提琴此处 我遇到了Walker导航菜单，但我似乎无法完全理解它. 任何帮助将不胜感激.

Fiddle here I came across the Walker nav menu but I can't seem to comprehend it on my own. Any help would be appreciated.

推荐答案

由于您无法更改的元素类型，因此可以使用CSS更改输出的格式.

Since you can't change the element type of to then you can change the format of the output using css.

#navigation ul {
  counter-reset: section;
  list-style-type: none;
}

#navigation li:before {
  counter-increment: section; 
  content: counters(section, ".") ": "; 
  color: red;
  font-weight: bold;
}

有关详细信息，请参见 jsFiddle .

See jsFiddle for details.

这篇关于如何为Wordpress菜单添加顺序编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！