Как добавить последовательную нумерацию для WordPress меню

Question

В настоящее время работает над сайтом и пытается использовать последовательную нумерацию непосредственно перед заголовками страниц в меню 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;
}

Здесь я наткнулся на навигационное меню Уокера, но не могу понять его самостоятельно. Любая помощь будет оценена.

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