WordPress 突出顯示 wp_nav_menu()Ancestor 類 w/o 導航結構中的孩子？

問題描述

(主持人注意：最初標題為「wp_nav_menu Ancestor class without children in navigation structure」)

我的標題中有一個 wp_nav_menu，其中有三個頁面。當我在這些頁面之一時，選單中包含該頁面的 li 將獲得.current_page_item 類。這三個頁面都有模板，這些模板包含自定義查詢以獲取特定內容型別的所有帖子。實際上，這個頂級頁面的”children” 實際上並不是孩子，它們只是一個使用模板與頂級頁面相關聯的內容型別。

當使用者正在瀏覽特定帖子型別的單個頁面時，我想要頂級選單專案，以獲取'current-ancestor'類別，再次與模板檔案中的自定義查詢中的該頁面相關聯。

希望有道理 – 如果不是，讓我知道我在哪裡失去了你！非常感謝任何幫助。

– 已編輯細節：例如，我有一個名為 Workshops 的靜態頁面正在使用模板。它的 s 子是車間。該模板具有自定義的 get_posts 功能，並在其中迴圈，它拉出並顯示稱為工作室的自定義內容型別的所有帖子。如果我點選這些研討會的其中一個題目，我將被帶到該內容的全部內容。自定義帖子型別的永久連結結構設定為研討會/ postname，以便使用者看到，這些內容是 Workshops 頁面的子代，實際上它們都是一個內容型別，但與該頁面無關。這是我需要在選單中有效關閉的差距，當瀏覽’workshop’ 型別的內容時突出顯示’Workshops’ 選單項。

再次，希望是有道理的，我想我在一段話中說’workshop’ 高達 20 倍！

最佳解決方案

有一個更簡單的解決方案。忘記為每個帖子型別建立頁面，以便您可以使用導航專案，因為您已經瞭解到，WP 無法識別您正在瀏覽的自定義型別與該頁面相關。

而應在 Appearance-> 選單中建立一個自定義連結。只需將 URL 返回您的自定義型別並給它一個標籤，然後按「新增到選單」。

http://example.com/workshops/

或 non-pretty-permalinks：

http://example.com/?post_type=workshops

只需建立一個導航按鈕即可顯示該自定義帖子型別的所有帖子，並且當您點選該導航專案時，還會新增 current-menu-item 類 – 但是它不會在除此之外的任何 URL 上新增導航類一

然後，一旦建立，進入新專案的配置，並在”Title Attribute” 欄位中輸入自定義帖子型別的塊 (您也可以使用描述欄位，但預設情況下，該屬性隱藏在管理螢幕選項中) 。

現在，您需要鉤住 nav_menu_css_class 過濾器 (為每個導航專案被觸發)，並檢查正在檢視的內容是否是您的自定義導航專案中指示的帖子型別：

add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2 );
function current_type_nav_class($classes, $item) {
    $post_type = get_query_var('post_type');
    if ($item->attr_title != '' && $item->attr_title == $post_type) {
        array_push($classes, 'current-menu-item');
    };
    return $classes;
}

在這種情況下，我們將檢查「標題屬性」欄位內容是否為空，並且與當前正在查詢的 post_type 匹配。如果是，我們將 current-menu-item 類新增到其類陣列中，然後返回修改後的陣列。

您可以將其修改為簡單地匹配導航專案的標題，但是如果由於某種原因您想要對導航專案進行標題，那麼使用「標題屬性」或「描述」欄位，可以使用「標題屬性」或「描述」欄位來標記該導航專案。

現在任何時候您都可以檢視與導航選單項匹配的帖子型別的單個專案 (或者甚至可能是歸檔列表)，該專案將被賦予 CSS 類別 current-menu-item，以便您的突出顯示工作。

不需要頁面或頁面模板;-) URL 查詢負責獲取正確的帖子。您的迴圈模板負責顯示查詢輸出。該函式負責識別所顯示的內容並新增 CSS 類。

獎金

您甚至可以使用 wp_update_nav_menu_item 自動執行該過程，方法是自動生成所有帖子型別的選單項。對於這個例子，您需要首先檢索要新增到此專案的導航選單的 $menu_id 。

$types = get_post_types( array( 'exclude_from_search' => false, '_builtin' => false  ), 'objects' );
foreach ($types as $type) {
    wp_update_nav_menu_item( $menu_id, 0, array(
        'menu-item-type' => 'custom',
        'menu-item-title' => $type->labels->name,
        'menu-item-url' => get_bloginfo('url') . '/?post_type=' . $type->rewrite['slug'],
        'menu-item-attr-title' => $type->rewrite['slug'],
        'menu-item-status' => 'publish'
        )
    );
}

次佳解決方案

而不是使用

$post_type = get_query_var(‘post_type’);

你可能想嘗試：

$post_type = get_post_type();

由於沒有在查詢 var 中設定 post 型別。這是”post” 的預設 post_type 的情況，因此，如果要突出顯示從列表頁面列出的帖子，則需要使用此選項. get_very_var() 只返回一個不自定義的帖子型別的空字串。

add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2 );
function current_type_nav_class($classes, $item) {
    $post_type = get_post_type();
    if ($item->attr_title != '' && $item->attr_title == $post_type) {
        array_push($classes, 'current-menu-item');
    };
    return $classes;
}

參考文獻

Highlighting wp_nav_menu() Ancestor Class w/o Children in Nav Structure?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 突出顯示 wp_nav_menu()Ancestor 類 w/o 導航結構中的孩子？