将哈希插入 url 以将其转换为锚点

Insert hash into url to turn it into an anchor

本文关键字:转换 哈希 插入 url      更新时间:2023-09-26

我正在使用Wordpress,并试图弄清楚如何破解子菜单中的链接。

我在这里设置了一个演示:http://brandsite.simpletruth.io/logo/

具体来说,我想在二级菜单链接前面添加一个哈希,以便它们成为同页锚点,而不是转到单独的页面。

例如:

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

成为:

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

理想情况下,这发生在Wordpress中,但我认为使用javascript也是一个很好的解决方案。

谢谢!

你必须使用自定义的walker函数

在您的实例中:

在您的函数

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);
        }
    }

在您的标题中.php(或您的菜单所在的任何位置)

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