Question

我通过构建静态html模板开始了我的项目。我的主要＆＃39;导航看起来像这样：

<nav class="site-nav">
    <a href="#" class="page-head__logo">
        <img src="img/interface/logo.png" alt="Wireforce logo" />
    </a>
    <a href="#" id="site-nav__toggle">Menu</a>
    <ul class="site-nav__list">
        <li class="site-nav__item"><a href="#" class="site-nav__link">Services</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Security</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Blog</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">About</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Contact</a></li>
    </ul>
</nav>

我知道我可以使用.site-nav li a {}在css中定位Wordpress锚点，但我希望保持我的BEM命名约定以保持一致性。

在functions.php内我可以看到使用wp_nav_menu我可以为容器/ ul指定类，但不能指定list-items / anchors。任何人都可以推荐最好的＆＃39;实现我以后的目标的方式？做一些阅读，似乎 walker 类可能是要走的路？因此，我非常感谢有关此主题的一些建议，或者是否有更好的方法。

作为参考，我的wp_nav_menu脚本目前看起来像这样：

function html5blank_nav() {
    wp_nav_menu(
    array(
        'theme_location'  => 'header-menu',
        'menu'            => '',
        'container'       => 'div',
        'container_class' => 'menu-{menu slug}-container',
        'container_id'    => '',
        'menu_class'      => 'menu',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'items_wrap'      => '<ul class="site-nav__list">%3$s</ul>',
        'depth'           => 0,
        'walker'          => ''
        )
    );
}

Answer 1

您对助行器的看法是正确的。尝试这样的操作，然后将new Custom_Walker传递给馈入walker的args数组中的wp_nav_menu键

<?php

// functions.php
// OR - preferrably - some file of it's own that you `include` by other means.

class Custom_Walker extends \Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * The $args parameter holds additional values that may be used with the child
     * class methods. Includes the element output also.
     *
     * @since 2.1.0
     * @abstract
     *
     * @param string $output            Passed by reference. Used to append additional content.
     * @param object $object            The data object.
     * @param int    $depth             Depth of the item.
     * @param array  $args              An array of additional arguments.
     * @param int    $current_object_id ID of the current item.
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {    
        $anchorEl = sprintf(
            '<a class="site-nav__link%s" href=\'%s\'>%s</a>',
            ($item->object_id === get_the_ID()) ? ' site-nav__link--active' : '',
            $item->url,
            $item->title
        );

        $output .= sprintf( "\n<li class="site-nav__item">%s\n", $anchorEl);
    }//end start_el()

    /**
     * Ends the element output, if needed.
     *
     * The $args parameter holds additional values that may be used with the child class methods.
     *
     * @since 2.1.0
     * @abstract
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $object The data object.
     * @param int    $depth  Depth of the item.
     * @param array  $args   An array of additional arguments.
     */
    public function end_el(&$output, $object, $depth = 0, $args = array()) {   
        $output .= '</li>';
    }//end end_el()
}//end class

将（BEM）类添加到Wordpress菜单列表项和锚点

1 个答案: