[WordPress] 在當前頁面的選單上顯示不同樣式

2021-10-30 19:02:16

要在 WordPress 裡自訂選單可以參考之前說的 [WordPress] 自訂網站的選單- wp_nav_menu() 這篇，而如果設定好選單後，想要在 UI 上面顯示當前的選單，可以這麼做。

設定好的選單結構大概會如下：

<ul class="menu">
  <li class="menu-item"><a>item 1</a></li>
  <li class="menu-item"><a>item 2</a></li>
</ul>

如果是當前的頁面， WordPress 會在 menu-item 那層加上 current_page_item 這個 class。

也就是我們只要類似這樣修改樣式即可。

.menu .menu-item.current_page_item a{
	color: red;
}

Mega Creator- 由 icons8 提供的線上插圖製作工具，完成後可匯出 SVG 及 png 等格式 Open Doodles- 免費可商用插畫下載，可設定顏色

你可能也會喜歡的

[Livewire] 將 route 的變數帶入 component

[Livewire] 跳轉到另一個頁面

[WordPress] 更新系統及 plugin 不用每次都輸入 ftp 密碼

[PHP] 顯示 unlink() 失敗的錯誤訊息

在 PHP 如何防止儲存型的跨站腳本攻擊（XSS）

Robo Gallery：好用的 WordPress 文章內相簿外掛

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。