wordpress 菜单_如何整理WordPress菜单HTML

wordpress 菜单

I love WordPress. I also love clean semantic HTML. Unfortunately, several of the standard WordPress theme functions return code that is a little untidy. For me, the primary culprits are wp_list_pages() and the newer wp_nav_menu(); both return an unordered list of page links typically used for page menus and sitemaps, e.g.,

我喜欢WordPress。 我也喜欢干净的语义HTML。 不幸的是，一些标准的WordPress主题函数返回的代码有点混乱。 对我而言，罪魁祸首是wp_list_pages()和较新的wp_nav_menu() ; 都返回通常用于页面菜单和站点地图的页面链接的无序列表，例如，

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

The code results in this HTML abomination for the default installation’s home, about and contact pages:

该代码导致默认安装主页面，关于页面和联系页面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>

The code is valid but it contains items we generally don’t need:

该代码有效，但其中包含我们通常不需要的项目：

• Strictly speaking, the outer div isn’t required. I’d prefer either to give the ul an ID such as “navigation” or use the HTML5 nav element.

  严格来说，不需要外部div 。 我更愿意给ul一个ID，例如“导航”，或者使用HTML5 nav元素。

• We don’t need a title attribute when our link contains identical text.
  当我们的链接包含相同的文本时，我们不需要title属性。
• Does our CSS or JavaScript require hooks for “page_item” and “page-item-N” classes?
  我们CSS或JavaScript是否需要对“ page_item”和“ page-item-N”类进行钩子？
• The “children” class for the sub-links list isn’t necessary — we can style them using a selector such as “nav ul ul li.”
  子链接列表的“儿童”类不是必需的-我们可以使用“ nav ul ul li”之类的选择器来设置其样式。
• The current_page_ancestor and current_page_parent classes mean the same thing, but I’d prefer a single shorter name such as “open.”
  current_page_ancestor和current_page_parent类具有相同的含义，但我希望使用一个较短的名称，例如“ open”。
• Similarly, I want rename current_page_item to “active.”
  同样，我想将current_page_item重命名为“ active”。
• Do we require the full page URLs — we could use shorter absolute addresses such as /, /about and /contact?
  我们是否需要完整的页面URL —我们可以使用较短的绝对地址，例如/，/ about和/ contact？

There are several ways to tidy the HTML, but the simplest solution replaces strings using regular expressions.

有几种整理HTML的方法，但是最简单的解决方案是使用正则表达式替换字符串。

note: The WordPress 3 Walker object In WordPress 3.0, a custom Walker object can be passed as an argument to wp_nav_menu(). The object provides code to output your own custom HTML for every page link. While this will be useful in some circumstances, you’ll possibly require regexs for the outer HTML, the code won’t necessarily be shorter, and it won’t work in WordPress 2.x and below.

注意： WordPress 3 Walker对象在WordPress 3.0中，可以将自定义Walker对象作为参数传递给wp_nav_menu()。 该对象提供代码以为每个页面链接输出您自己的自定义HTML。 尽管在某些情况下这很有用，但您可能需要外部HTML的正则表达式，代码不一定会更短，并且在WordPress 2.x及以下版本中将无法使用。

Here’s the PHP code to output a tidier HTML menu to 2 levels (main menu and sub-menu). In most cases, it should replace the call to wp_nav_menu() or wp_list_pages() in your theme’s header.php file:

这是PHP代码，可将HTML菜单输出到2个级别(主菜单和子菜单)。 在大多数情况下，它应该替换主题主题的header.php文件中对wp_nav_menu()或wp_list_pages()的调用：

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

If you’re using a version of WordPress prior to version 3, replace the penultimate “wp_nav_menu(…)” line with:

如果您使用的是版本3之前的WordPress版本，则将倒数第二个“ wp_nav_menu(…)”行替换为：

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

Our resulting HTML is much cleaner and has been reduced by more than 50%. Longer menus may result in larger savings.

我们生成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>

Please note that regular expressions are powerful but dangerous. You may need to change the code if you’re using a deeper page depth or have a page named “children” or “page_item.”

请注意，正则表达式功能强大但危险。 如果您使用更深的页面深度或具有名为“ children”或“ page_item”的页面，则可能需要更改代码。

There’s no excuse now — go and tidy your WordPress HTML!

现在没有任何借口–整理一下WordPress HTML！

翻译自: https://www.sitepoint.com/wordpress-menu-html-tidy/

wordpress 菜单