WordPress

2013.12.10

在 wp 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

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

guest
0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.