如何为WordPress菜单添加顺序编号

Question

当前在网站上工作，并尝试在WordPress菜单上的页面标题之前使用顺序编号，但不确定如何适合＆lt;span>在不删除页面标题的情况下，还可以顺序获得每个页面编号。我试图实现的目前结构以下 -

<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>

我使用

开始了我的PHP

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

我的CSS看起来像这样 -

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 Nav菜单，但我似乎无法自己理解。任何帮助将不胜感激。

Answer 1

，因为您无法将元素类型更改为，因此您可以使用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。

Answer 2

您可以尝试将页码和标题贴在数组中，然后循环

$pages = array(
    1 => array(
        'title' => 'About',
        'url' => 'about.php'
    ),
    2 => array(
        'title' => 'Work',
        'url' => 'work.php'
    ),
    3 => array(
        'title' => 'Contact',
        'url' => 'contact.php'
    ),
    4 => array(
        'title' => 'etc',
        'url' => 'someFilename.php'
    )
);
foreach($whats as $name => $page) {
    printf("<a href='%s'>%s</a> ", $page['url'], $page['title']);

然后，您可以只使用Jeff的想法并使用<ol></ol>而不是<ul></ul>-这将变得更有意义，并且变得更加容易！XD