如何为wordpress菜单添加顺序编号答案

【问题标题】：How to add sequential numbering for wordpress menu如何为wordpress菜单添加顺序编号
【发布时间】：2014-01-18 02:44:34
【问题描述】：

目前在一个网站上工作，并尝试在 wordpress 菜单上的页面标题之前使用顺序编号，但不确定如何在不删除页面标题的情况下适应以及如何让每个页面按顺序编号。我正在尝试实现的当前结构如下 -

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

小提琴here 我遇到了 Walker 导航菜单，但我自己似乎无法理解。任何帮助将不胜感激。

【问题讨论】：

将
标签更改为
。浏览器会自动为每个项目编号。这也意味着您可以取消元素
@jeff 这适用于 html 标记，但似乎不适用于我上面的 PHP。
@user:2690782 查看我使用 CSS 进行样式设置的答案

标签： php wordpress navigation

【解决方案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。

【讨论】：

【解决方案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

【讨论】：