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

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

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

歡迎給我點鼓勵,讓我知道你來過 :)

MUKI says:

如果文章有幫助到你,歡迎分享給更多人知道。文章內容皆為 MUKI 本人的原創文章,我會經常更新文章以及修正錯誤內容,因此轉載時建議保留原出處,避免出現版本不一致或已過時的資訊。

本文地址:https://muki.tw/wp-nav-menu-custom-links/ 已複製

Subscribe
Notify of
guest

0 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Copyright © since 2008 MUKI space* / omegaSS theme All Rights Reserved.