如何整理WordPress菜單html-＆＃＆按-PHP中文網

態我喜歡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！