如何整理WordPress菜单html-＆＃＆按-PHP中文网

How to Tidy Your WordPress Menu HTML

如何整理WordPress菜单html

我喜欢WordPress。我也喜欢干净的语义HTML。不幸的是，一些标准WordPress主题函数返回有点不整洁的代码。对我来说，主要罪魁祸首是wp_list_pages（）和新的WP_NAV_MENU（）;两者都返回通常用于页面菜单和站点地图的页面链接的无序列表，例如

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

登录后复制

该代码导致此HTML憎恶的默认安装房屋，关于并联系页面：

<div >
<ul>
<li >
<a href="http://mysite.com/" title="Home">Home</a>
</li>
<li >
<a href="http://mysite.com/about" title="About">About</a>
<ul class='children'>
<li >
<a href="http://mysite.com/about/contact-us" title="Contact us">Contact us</a>
</li>
</ul>
</li>
</ul>
</div>

登录后复制

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

>当我们的链接包含相同的文本时，我们不需要标题属性。>

>我们的CSS或JavaScript是否需要“ page_item”和“ page-item-n”类的挂钩？

>子链接列表的“儿童”类是不需要的 - 我们可以使用诸如“ nav ul ul li”的选择器来设置它们。

。

current_page_ancestor和current_page_parent类是同一件事，但是我更喜欢一个较短的名称，例如“ open”。

同样，我希望重命名current_page_item为“活动”。

我们是否需要完整页面URL？我们可以使用较短的绝对地址，例如 /， /about和 /contact？

有几种整理HTML的方法，但是最简单的解决方案使用正则表达式代替了字符串。笔记： WordPress 3 Walker对象在WordPress 3.0中，可以将自定义Walker对象作为参数传递给WP_NAV_MENU（）。该对象提供代码，以输出您自己的每个页面链接的自定义HTML。尽管这在某些情况下会很有用，但是您可能需要外部HTML的正直，但代码不一定会更短，并且在WordPress 2.x及以下都无法使用。这是将花样的HTML菜单输出到2个级别（主菜单和子菜单）的PHP代码。在大多数情况下，它应替换为主题header.php文件中的wp_nav_menu（）或wp_list_pages（）：

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

登录后复制

如果您在版本3之前使用WordPress版本，请使用：

<div >
<ul>
<li >
<a href="http://mysite.com/" title="Home">Home</a>
</li>
<li >
<a href="http://mysite.com/about" title="About">About</a>
<ul class='children'>
<li >
<a href="http://mysite.com/about/contact-us" title="Contact us">Contact us</a>
</li>
</ul>
</li>
</ul>
</div>

登录后复制

我们由此产生的HTML更加干净，并减少了50％以上。更长的菜单可能会带来更大的节省。

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

登录后复制

请注意，正则表达式强大但危险。如果您使用更深的页面深度或具有名为“儿童”或“ page_item”的页面，则可能需要更改代码。现在没有借口 - 请整理您的WordPress html！