在 wp nav menu 前後增加自定義連結

WordPress 有一個很好用的 WP_nav_menu function,可以在 WordPress 控制台直接新增選單內容。

但要特別注意的是,如果我們想在新增有 class 或 id 的選單,就沒辦法直接從控制台新增,因為控制台的選單無法讓我們填寫 id 或 class。

選單只能讓我們新增連結文字、位置,以及屬性,如下圖:

因此我們可以利用 wp_nav_menu 提供的函式自己手動加上想要的連結。

假設今天我們希望在選單的後面加上以下語法:

custom link

可以先找到以下語法 (通常在 header.php) 裡:

<?php
wp_nav_menu(array(
    'theme_location' => 'menu',
    'container' => 'nav',
    'menu_id' => 'menu-nav',
    'depth' => 2
));
?>

這個語法就是用來設定 wp_nav_menu 的一些樣式,如果你對製作這樣的選單有興趣,可以參考這篇文章:WordPress 內建階層選單製作

回到手動添加連結的部分,假使我們想要將連結加在選單的後面,請依照'items_wrap' => '連結語法'的格式添加進去,語法請參考(第 7 行是我新增的部分):

<?php
wp_nav_menu(array(
    'theme_location' => 'menu',
    'container' => 'nav',
    'menu_id' => 'menu-nav',
    'depth' => 2
    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s<li>custom link</li></ul>'
));
?>

這樣你手動增加的 custom link 連結就會永遠放在自定義選單的最後一個位置。

如果你想要把手動增加的連結放在最前面,就只要把%3$s跟你的語法對調即可,請參考:

'items_wrap' => '<ul id="%1$s" class="%2$s"><li>custom link</li>%3$s</ul>'

WordPress Nav Menu 還有很多參數可以使用,有興趣的朋友可以自行閱讀官方文件:Function Reference / wp nav menu