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 導航結構中的孩子？