WordPress 選單 ( Menu ) 移除超連結

這 天 收 到 做 網 頁 設 計 的 舊 同 學 留 言 ,說 他 的 客 戶 提 出 了 特 別 的 要 求 ,想 要 把 WordPress Menu ( 選 單 ) 裡 面 的 超 連 結 移 除 ,問 我 要 怎 麼 設 定 。

WordPress 選 單

其 實 這 也 不 算 是 十 分 罕 見 的 要 求 ,通 常 是 用 在 選 單 最 頂 層 的 item。頂 層 的 menu item 很 多 時 就 只 是 一 個 類 別 ,本 身 係 唔 會 有 一 個 指 定 的 頁 面 ,所 以 就 無 需 要 連 結 去 特 定 的 地 方 。

選 單 – 新 增 自 定 連 結

大 家 覺 得 這 個 無 連 結 的 選 單 項 目 比 較 難 做 ,大 概 是 因 為 在 新 增 自 定 連 結 時 ,Wordpress 會 強 制 你 一 定 要 輸 入 一 條 連 結 ,如 果 唔 係 就 不 能 儲 存 。

選 單 – 新 增 自 定 連 結

不 過 WordPress 作 為 世 界 上 最 多 人 用 的 CMS,當 然 已 經 有 很 多 聰 明 人 想 到 解 決 方 案 了 。其 中 最 常 見 ( 超 過 99% ) 的 解 決 方 案 ,就 是 在 連 結 網 址 輸 入 「#」,然 後 就 可 以 儲 存 了 。

...
...
<a name="anchorname"></a>
...
...
<a href="#anchorname">Go to Anchor</a>
...
...

這 個 「#」是 什 麼 意 思 呢 ?如 果 你 細 細 個 學 開 html,就 會 知 道 這 叫 anchor,是 用 於 連 結 到 同 一 頁 面 不 同 的 地 方 。例 如 在 一 頁 很 長 的 頁 面 ,分 左 幾 個 section,你 可 以 設 定 幾 個 anchor 去 連 結 到 不 同 section 的 開 頭 位 置 。

...
<li class="menu-item ....
   <a href="#">新 連 結 </a>
</li>
...

我 們 在 wordpress 輸 入 「#」,就 會 在 menu 裡 面 建 立 了 一 個 連 結 去 「#」的 item。這 個 沒 有 name 或 者 id 的 anchor,其 實 係 scroll to top 的 意 思 。所 以 這 個 只 輸 入 「#」方 法 ,其 實 係 無 remove,又 或 者 disable 到 menu item 入 面 條 link 的 。

許 多 使 用 者 誤 以 為 這 個 是 解 決 方 案 ,是 因 為 大 部 wordpress 網 頁 的 menu 都 是 在 頂 部 的 ,所 以 你 在 網 頁 頂 部 scroll to top,當 然 就 疑 似 係 乜 野 都 無 發 生 。不 過 事 實 當 然 唔 係 咁 ,你 去 browser 的 網 址 列 睇 一 睇 ,網 址 已 經 變 成 了  https://your.domain.name/# 了 ( 後 面 多 了 一 個 anchor # )。

選 單 – 新 增 自 定 連 結

那 有 沒 有 好 一 點 的 做 法 呢 ?當 然 有 。如 果 你 唔 介 意 網 址 多 左 個 anchor 係 後 面 ,你 可 以 求 其 輸 入 一 個 唔 存 在 的 name 或 者 id,例 如 #no-name。因 為 這 個 name / id 不 存 在 ,所 以 browser 無 得 scroll 去 指 定 地 點 ,所 以 條 link 係 唔 會 做 任 何 野 。

選 單 – 修 改 自 定 連 結

如 果 想 網 址 列 靚 仔 D,唔 會 見 到 Anchor,咁 你 可 以 去 返 去 選 單 度 ,修 改 剛 才 建 立 的 自 訂 連 結 。這 時 候 ,你 可 以 神 奇 地 刪 除 「連 結 網 址 」檔 內 的 所 有 東 西 ( 有 無 搞 錯 ,這 是 bug 麼 )!儲 存 選 單 之 後 ,你 就 真 真 正 正 建 立 了 一 個 沒 有 連 結 的 menu item。

不 過 這 樣 很 麻 煩 啊 ,每 個 沒 有 超 連 結 的 menu item,都 要 建 立 一 次 再 修 改 一 次 ,想 煩 死 人 咩 ?如 果 要 建 立 一 千 萬 個 無 連 結 的 menu item,咁 咪 會 煩 到 死 ?有 無 可 以 一 次 搞 定 的 方 法 呀 ?當 然 有 。其 實 寫 網 頁 時 想 disable 一 個 A tag,還 有 下 面 這 一 種 方 法 寫 。

<a href="javascript:void(0)">nothing would happen when you click this</a>

順 理 成 章 的 ,我 們 也 可 以 把 void 運 算 子 ( operator ) 用 在 wordpress menu 裡 。

選 單 – 新 增 自 定 連 結

儲 存 選 單 之 後 ,我 們 去 menu 試 click 幾 下 ,果 然 是 成 功 的 ,新 增 一 次 就 得 ,唔 洗 事 後 再 edit,乾 手 淨 腳 。

成 功 是 成 功 了 ,但 事 實 上 ,javascript:void(0),係 完 全 無 儲 存 入 去 wordpress menu 的 。你 再 次 打 開 那 個 自 定 連 結 ,裡 面 的 連 結 網 址 只 會 是 空 白 一 片 。看 來 是 wordpress 會 自 動 clean up 這 個 field,不 允 許 你 使 用 javascript 作 連 結 。

選 單 – 新 增 自 定 連 結

這 就 更 好 了 ,下 次 只 要 是 但 作 一 條 javascript function 就 好 了 ,儲 存 後 就 會 自 動 就 變 成 空 白 。

真 是 奇 怪 的 發 現 ,嘿 嘿 嘿 。

ctleung張 先 生 ,男 性 ,肖 龍 。
職 業 :I.T. Consultant
簡 介 :不 好 好 讀 書 ;七 尺 差 五 寸 ,手 長 過 膝 ,雙 耳 垂 肩 ;性 寬 和 ,寡 言 語 ,喜 怒 不 形 於 色 。據 說 少 時 曾 斬 白 蛇 於 鳳 凰 山 下 ……
This entry was posted in Computer & Network and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *