Question

目前在网站上工作并尝试在wordpress菜单上的页面标题之前使用顺序编号，但不完全确定如何适应＆lt;跨度＆GT;在不删除页面标题的情况下，以及如何按顺序编号每个页面。我想要实现的目前结构如下 -

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

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']);

然后再次，你可以使用杰夫的想法并使用<ol></ol>而不是<ul></ul> - 这会更有意义并且变得更容易！的xD

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

2 个答案: