MUKI AI Summary
WordPress 的 WP_nav_menu function 方便新增選單,但無法直接從控制台加入 class 或 id。可以透過 wp_nav_menu 函式手動添加自定義連結。假設要在選單後加上連結,需找到 header.php 中的語法,並利用 'items_wrap' 格式將連結語法插入。
若想將連結放在選單前,只需調整 %3$s 的位置。WordPress Nav Menu 提供多種參數,詳情可參考官方文件。...
WordPress 有一個很好用的 WP_nav_menu function
,可以在 WordPress 控制台直接新增選單內容。
但要特別注意的是,如果我們想在新增有 class 或 id 的選單,就沒辦法直接從控制台新增,因為控制台的選單無法讓我們填寫 id 或 class。
選單只能讓我們新增連結文字、位置,以及屬性,如下圖:
因此我們可以利用 wp_nav_menu
提供的函式自己手動加上想要的連結。
假設今天我們希望在選單的後面加上以下語法:
<a href="#" id="link-menu">custom link</a>
可以先找到以下語法 (通常在 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><a href="#" id="link-menu">custom link</a></li> </ul>' )); ?>
這樣你手動增加的 custom link 連結就會永遠放在自定義選單的最後一個位置。
如果你想要把手動增加的連結放在最前面,就只要把 %3$s
跟你的語法對調即可:
<?php 'items_wrap' => ' <ul id="%1$s" class="%2$s"> <li><a href="#" id="link-menu">custom link</a></li> %3$s</ul>' ?>
WordPress Nav Menu 還有很多參數可以使用,有興趣的朋友可以自行閱讀官方文件:Function Reference / wp nav menu