Вставьте хэш в URL-адрес, чтобы превратить его в якорь

Question

Я использую Wordpress и пытаюсь выяснить, как взломать ссылки в подменю.

Я создал демо здесь: http://brandsite.simpletruth.io/logo/

В частности, я хочу, чтобы добавить хэш перед ссылками меню второго уровня, чтобы они стали в той же странице якорем вместо того, чтобы идти на отдельную страницу.

Например:

http://brandsite.simpletruth.io/logo/logo-spacing/

становится:

http://brandsite.simpletruth.io/logo#logo-spacing

В идеале это происходит в Wordpress, но я думаю, что это делать с JavaScript будет в ладно решение тоже ,

Спасибо!

Answer 1

вы должны использовать custom walker function

в вашем экземпляре:

в ваших функций

class custom_names extends Walker_Nav_Menu 
    { 

     /* Start of the <ul> 
     * 
     * Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu". 
     *     So basically add one to what you'd expect it to be 
     */ 
     function start_lvl(&$output, $depth = 0, $args = array()) 
     { 
      $indent = str_repeat("\t", $depth); 
      $output .= "\n$indent<ul class=\"children\">\n"; 
     } 

     /* End of the <ul> 
     * 
     * Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu". 
     *     So basically add one to what you'd expect it to be 
     */ 
     function end_lvl(&$output, $depth = 0, $args = array()) { 
      $indent = str_repeat("\t", $depth); 
      $output .= "$indent</ul>\n"; 
     } 

     /* Output the <li> and the containing <a> 
     * Note: $depth is "correct" at this level 
     */ 
     function start_el(&$output, $item, $depth = 0, $args = array(), $current_object_id = 0) 
     { 
      $indent = ($depth) ? str_repeat("\t", $depth) : ''; 

      $classes = empty($item->classes) ? array() : (array) $item->classes; 
      $classes[] = 'menu-item-' . $item->ID; 

      $args = apply_filters('nav_menu_item_args', $args, $item, $depth); 

      $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args, $depth)); 
      $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : ''; 


      $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth); 
      $id = $id ? ' id="' . esc_attr($id) . '"' : ''; 


      $output .= $indent . '<li' . $id . $class_names .'>'; 


      $atts = array(); 
      $atts['title'] = ! empty($item->attr_title) ? $item->attr_title : ''; 
      $atts['target'] = ! empty($item->target)  ? $item->target  : ''; 
      $atts['rel'] = ! empty($item->xfn)  ? $item->xfn  : ''; 
      $atts['href'] = ! empty($item->url)  ? $item->url  : ''; 


      $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args, $depth); 

      $attributes = ''; 
      foreach ($atts as $attr => $value) { 
       if (! empty($value)) { 
        $value = ('href' === $attr) ? esc_url($value) : esc_attr($value); 
        $attributes .= ' ' . $attr . '="' . $value . '"'; 
       } 
       if ($depth == 1) { 
       $attributes = ' ' . $attr . '="'.str_replace(basename ($item->url), '#'.str_replace(' ', '-', strtolower ($item->title)), $value).'"'; 
      } 
      } 


      $title = apply_filters('the_title', $item->title, $item->ID); 

      $title = apply_filters('nav_menu_item_title', $title, $item, $args, $depth); 

      $item_output = $args->before; 
      $item_output .= '<a'. $attributes .'>'; 
      $item_output .= $args->link_before . $title . $args->link_after; 
      $item_output .= '</a>'; 
      $item_output .= $args->after; 


     $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
     } 

     /* Close the <li> 
     * Note: the <a> is already closed 
     * Note 2: $depth is "correct" at this level 
     */ 
     function end_el (&$output, $item, $depth = 0, $args = array()) 
     { 
      $output .= '</li>'; 
      return; 
     } 

     /* Add a 'hasChildren' property to the item 
     * Code from: http://wordpress.org/support/topic/how-do-i-know-if-a-menu-item-has-children-or-is-a-leaf#post-3139633 
     */ 
     function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) 
     { 
      // check whether this item has children, and set $item->hasChildren accordingly 
      $element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]); 

      // continue with normal behavior 
      return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output); 
     } 
    } 

в вашем header.php (или там, где ваше меню)

<?php wp_nav_menu(array('walker' => new custom_names())); ?>