Статьи

Как привести в порядок меню WordPress HTML

Декабрь 31, 2018

Я люблю WordPress. Я также люблю чистый семантический HTML. К сожалению, некоторые стандартные функции темы WordPress возвращают немного неопрятный код. Для меня основными виновниками являются wp_list_pages () и более новая wp_nav_menu () ; оба возвращают неупорядоченный список ссылок на страницы, обычно используемых для меню страниц и файлов сайтов, например, 


<?php wp_nav_menu(array( 'depth'=>2 )); ?>

Код приводит к этой мерзости HTML для домашней страницы установки по умолчанию и страниц контактов и контактов: 

 
<div class="menu">
<ul>
<li >
<a href="http://mysite.com/" title="Home">Home</a>
</li>
<li class="page_item page-item-2 current_page_ancestor current_page_parent">
<a href="http://mysite.com/about" title="About">About</a>
<ul class='children'>
<li class="page_item page-item-5 current_page_item">
<a href="http://mysite.com/about/contact-us" title="Contact us">Contact us</a>
</li>
</ul>
</li>
</ul>
</div>

Код действителен, но он содержит элементы, которые нам обычно не нужны:

  • Строго говоря, внешний div Я бы предпочел либо дать ulnav
  • Нам не нужен атрибут заголовка, когда наша ссылка содержит идентичный текст.
  • Требуются ли нашему CSS или JavaScript хуки для классов «page_item» и «page-item-N»?
  • Класс «children» для списка подссылок не обязателен — мы можем стилизовать их с помощью селектора, например «nav ul ul li».
  • Классы current_page_ancestor и current_page_parent означают одно и то же, но я бы предпочел одно более короткое имя, например «open».
  • Точно так же я хочу переименовать current_page_item в «active».
  • Нужны ли нам полные страницы URL — мы могли бы использовать более короткие абсолютные адреса, такие как /, / about и / contact?

Есть несколько способов привести HTML в порядок, но самое простое решение заменяет строки с помощью регулярных выражений.

примечание: объект WordPress 3 Walker
В WordPress 3.0 пользовательский объект Walker может быть передан в качестве аргумента в wp_nav_menu (). Объект предоставляет код для вывода собственного пользовательского HTML-кода для каждой ссылки на страницу. Хотя это будет полезно в некоторых обстоятельствах, вам, возможно, потребуются регулярные выражения для внешнего HTML, код не обязательно будет короче и не будет работать в WordPress 2.x и ниже.

Вот код PHP для вывода более аккуратного меню HTML на 2 уровня (главное меню и подменю). В большинстве случаев он должен заменить вызов wp_nav_menu () или wp_list_pages () в файле header.php вашей темы: 

 
echo preg_replace(array(
    '/t/', // remove tabs
    '/'.str_replace('//','//', get_bloginfo('url')).'/i', // remove full URL
    '/current_page_items*/i',
    '/current_page_ancestors*/i',
    '/current_page_parents*/i',
    '/page_items+/i',
    '/page-item-d+s*/i',
    '/childrens*/i',
    '/s*class=["']["']/i', // empty classes
    '/s*title="[^"]+"/i', // all titles
    '/s+>/i',
    '/div>/i' // change div to nav
  ),
  array(
    '',
    '',
    'active',
    'open',
    '',
    '',
    '',
    '',
    '',
    '',
    '>',
    'nav>'
  ),
  wp_nav_menu(array( 'menu_class'=>'', 'depth'=>2, 'echo'=>false ))
);

Если вы используете версию WordPress до версии 3, замените предпоследнюю строку «wp_nav_menu (…)» на: 

 "<nav><ul>n"
  . wp_list_pages('depth=2&title_li=&sort_column=menu_order&echo=0')
  . "</ul></nav>"

Наш конечный HTML-код намного чище и был сокращен более чем на 50%. Более длинные меню могут привести к большей экономии. 

 
<nav>
<ul>
<li><a href="/">Home</a></li>
<li class="open">
<a href="/about">About</a>
<ul><li class="active"><a href="/about/contact-us">Contact us</a></li></ul>
</li>
</ul>
</nav>

Обратите внимание, что регулярные выражения являются мощными, но опасными. Возможно, вам придется изменить код, если вы используете более глубокую глубину страницы или у вас есть страница с именем «children» или «page_item».

Теперь нет оправдания — иди и приведи в порядок свой WordPress HTML!

42
Share: