不继承属性的自定义Walker锚定标记

时间:2015-10-09 作者:salad_bar_breath

所以我刚刚在学习和玩定制步行器,我发现这非常有用Stack Overflow question. 因此,我实现了该答案中的答案,并将其添加到我的函数中。我的主题的php(顺便说一句,如果有帮助的话,它是一个下划线主题)

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    // Copy all the start_el code from source, and modify
        $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = \'menu-item-\' . $item->ID;
        /**      * Filter the CSS class(es) applied to a menu item\'s list item element.
         * @since 3.0.0
         * @since 4.1.0 The `$depth` parameter was added.
         * @param array  $classes The CSS classes that are applied to the menu item\'s `<li>` element.
         * @param object $item    The current menu item.
         * @param array  $args    An array of {@see wp_nav_menu()} arguments.
         * @param int    $depth   Depth of menu item. Used for padding.      */
        $class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? \' class="\' . esc_attr( $class_names ) . \'"\' : \'\';
        /**      * Filter the ID applied to a menu item\'s list item element.
         * @since 3.0.1
         * @since 4.1.0 The `$depth` parameter was added.
         * @param string $menu_id The ID that is applied to the menu item\'s `<li>` element.
         * @param object $item    The current menu item.
         * @param array  $args    An array of {@see wp_nav_menu()} arguments.
         * @param int    $depth   Depth of menu item. Used for padding.      */
        $id = apply_filters( \'nav_menu_item_id\', \'menu-item-\'. $item->ID, $item, $args, $depth );
        $id = $id ? \' id="\' . esc_attr( $id ) . \'"\' : \'\';
        $output .= $indent . \'<li class="menu-item">\';
        $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        : \'\';
        /**      * Filter the HTML attributes applied to a menu item\'s anchor element.
         *
         * @since 3.6.0
         * @since 4.1.0 The `$depth` parameter was added.
         *
         * @param array $atts {
         *     The HTML attributes applied to the menu item\'s `<a>` element, empty strings are ignored.
         *
         *     @type string $title  Title attribute.
         *     @type string $target Target attribute.
         *     @type string $rel    The rel attribute.
         *     @type string $href   The href attribute.
         * }
         * @param object $item  The current menu item.
         * @param array  $args  An array of {@see wp_nav_menu()} arguments.
         * @param int    $depth Depth of menu item. Used for padding.        */
        $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 . \'"\';
            }
        }
        $item_output = $args->before;
        $item_output .= \'<a\'. $attributes .\'><canvas \' . $id . \'>\';
        /** This filter is documented in wp-includes/post-template.php */
        $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;
        $item_output .= \'</canvas></a>\';
        $item_output .= $args->after;
        /**      * Filter a menu item\'s starting output.
         * The menu item\'s starting output only includes `$args->before`, the opening `<a>`,
         * the menu item\'s title, the closing `</a>`, and `$args->after`. Currently, there is
         * no filter for modifying the opening and closing `<li>` for a menu item.
         *
         * @since 3.0.0
         *
         * @param string $item_output The menu item\'s starting HTML output.
         * @param object $item        Menu item data object.
         * @param int    $depth       Depth of menu item. Used for padding.
         * @param array  $args        An array of {@see wp_nav_menu()} arguments.        */
        $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
    }
    /**  * Ends the element output, if needed.
     * @see Walker::end_el()
     * @since 3.0.0
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item   Page data object. Not used.
     * @param int    $depth  Depth of page. Not Used.
     * @param array  $args   An array of arguments. @see wp_nav_menu()   */ 
    //end pasted code
  }
  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    // Copy all the end_el code from source, and modify 
    $output .= "</li>\\n";   
    //end pasted code
  }
然后,我更改了标题中的wp\\u nav\\u菜单。php收件人:

wp_nav_menu( array( \'theme_location\' => \'primary\', 
\'menu_id\' => \'primary-menu\', \'walker\' => new Custom_Walker_Nav_Menu ) );
问题是HTML现在的结构与我想要的一样,但是当实现自定义walker时,锚定标记会丢失它们之间的文本(这是页面的标题)和它们的href属性,因此它们不再是指向我需要它们访问的页面的链接。

我觉得可能是因为$attributes 阵列,但我不确定如何进行修复。

感谢您的帮助!

1 个回复
SO网友:Benjamin Love

这看起来只是对canvas元素的误解——如果浏览器支持canvas,那么您在画布中放置的任何元素都不会显示,也就是说,它们是不支持canvas元素的浏览器的后备元素。(包含文本节点)

我看了一遍剧本,它看起来很好——除了放在画布上的东西。链接应类似于:链接标题

您可以通过css/javascript操作画布定位,具体取决于您对它们所做的操作。