Question

标题中有这个简单的片段，显示了站点的主菜单：

<?php wp_nav_menu( array( 
    'theme_location' => 'main-menu',
    'container'=> false ) ); 
?>

菜单显示站点页面。每个页面都有一个自定义字段，并添加了名为text_color的高级自定义字段。这是一个颜色选择器，让我选择将鼠标悬停在菜单项上时应具有的颜色。我想将此字段设置在页面本身的设置中，而不是添加到Wordpress菜单设置中的字段。

使用名为data-hover的数据属性创建悬停效果。然后，我通过JavaScript侦听每个菜单项上的mouseover和mouseleave事件，将鼠标悬停时将菜单项的文本颜色更改为data-hover中的颜色代码。

由于每个菜单项都连接到一个页面，所以我希望能够到达每个菜单项的页面循环，将此data-hover添加到菜单项中的每个锚定链接。这可能吗？

Answer 1

将此添加到主题中的functions.php中

add_filter( 'nav_menu_link_attributes', 'add_custom_data_atts_to_nav', 10, 4 );
function add_custom_data_atts_to_nav( $atts, $item, $args ) {

$atts['data-hover'] = $item->title;
return $atts;}

希望这会有所帮助！

Answer 2

不确定这是否可行

但是，如果您获得商品ID，则可以根据您的ACF字段添加一个类。

像这样

function add_class_to_menu_item_by_acf($sorted_menu_objects, $args) {
    $theme_location = 'main-menu';  // Name, ID, or Slug of the target menu location



    if ($args->theme_location == $theme_location) {
        foreach ($sorted_menu_objects as $key => $menu_object) {
                //Get the menu objects post/page id - Check the object to see if this is the correct variable.
                $objectID = $menu_object->object_id;
                //Get the field
                $fieldColor = get_field('text_color', $objectID);
                if($fieldColor){
                    $menu_object->classes[] = "text_color_".$fieldColor;
                }

        }
    }

    return $sorted_menu_objects;
}

add_filter('wp_nav_menu_objects', 'add_class_to_menu_item_by_acf', 10, 2);

再次，我还没有测试过-但是它可能会引导您走上正确的路？

在wp_nav_menu（）中到达页面的ACF字段

2 个答案: