使用导航Walker检测类、添加小部件和添加div

时间：2014-05-01 作者：JacobTheDev

我已经想了好几天了，但都没用。

我正在构建的模板需要一个超大菜单。菜单的标记如下所示：

<nav>
    <ul>
        <li><a href="#">General Information</a></li>
        <li>
            <a href="#">Programs</a>
            <section>
                <ul>
                    <li><a href="#">Birthday Parties</a></li>
                    <li>
                        <a href="#">Athletics</a>
                        <ul>
                            <li><a href="#">Youth</a></li>
                            <li>
                                <a href="#">Adult</a>
                                <ul>
                                    <li><a href="#">Adult Softball</a></li>
                                    <li><a href="#">Adult Kickball</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Dance</a></li>
                    <li>
                        <a href="#">Variety</a>
                        <ul>
                            <li><a href="#">Youth</a></li>
                            <li><a href="#">Adult</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- this break needs to be user-specified -->
                <ul>
                    <li>
                        <a href="#">Summer Camp</a>
                        <ul>
                            <li><a href="#">Camp Firefly</a></li>
                            <li><a href="#">Camp Starfish</a></li>
                            <li><a href="#">Lil Rascals</a></li>
                            <li><a href="#">Junior Crew</a></li>
                            <li><a href="#">Little Giants</a></li>
                            <li><a href="#">Girlfriends</a></li>
                            <li><a href="#">Road Trip</a></li>
                            <li><a href="#">Sport Camp</a></li>
                            <li><a href="#">Kid Zone</a></li>
                            <li><a href="#">Last Blast</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- this break needs to be user-specified -->
                <ul>
                    <li><a href="#">Early Childhood</a></li>
                    <li><a href="#">Education</a></li>
                    <li><a href="#">Little Learners</a></li>
                    <li><a href="#">Childcare</a></li>
                    <li><a href="#">Little Learners</a></li>
                    <li><a href="#">Preschool</a></li>
                    <li><a href="#">Afterschool Program</a></li>
                </ul>
                <!-- widget -->
                <aside class="blue widget">
                    <header>
                        <h6>Download Brochures</h6>
                    </header>
                    <section>
                        <ul class="brochures">
                            <li>
                                <a href="#">
                                    <img src="img/static/brochure-spring-summer-2014.jpg" />
                                    spring/summer 2014
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/static/brochure-summer-planner-2014.jpg" />
                                    summer planner 2014
                                </a>
                            </li>
                        </ul>
                    </section>
                    <footer>
                        <a class="button" href="#">&#8250; Register Online</a>
                        <a class="button" href="#">&#8250; Create Account</a>
                    </footer>
                </aside>
                <!-- end widget -->
            </section>
        </li>
        <li><a href="#">Registration</a></li>
        <li><a href="#">Aquatics</a></li>
        <li><a href="#">Lakeview Fitness</a></li>
        <li><a href="#">Parks</a></li>
        <li><a href="#">Facilities</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
</nav>
超大菜单如下所示：

我有三个问题：

我不知道如何添加<section> 第二层左右<ul>. 我写了一个助行器，它会添加这个部分，但它会将它添加到每一个级别，而不仅仅是第二个级别我不知道如何允许用户指定列的中断位置。我想我可以让我的客户进入break 在<li> 他们想结束（或开始，以较容易的为准）一列，但我不知道如何使用PHP检查并添加</ul><ul> 在那之后</li>.我对nav Walker完全是新手，所有这些东西都让我不知所措。这件事看起来很简单，但经过一个又一个小时的研究，我还是被困了。

以下是我目前所拥有的，但我愿意完全放弃：

class megaMenuWalker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\\t", $depth);
        $output .= "\\n$indent<section><ul class=\\"sub-menu\\">\\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\\t", $depth);
        $output .= "$indent</ul></section>\\n";
    }
}
编辑：真正让我恼火的是，我知道如何用jQuery解决前两个问题，但这不是一个可接受的解决方案。。。

$("nav > ul > li > ul").wrap("<section>");
$("nav .break").before("</ul><ul>");
编辑2：多亏泰勒·卡特（TylerCarter）在下面的回答，我才能够让这一部分发挥作用。这是我最新的助行器：

class megaMenuWalker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\\t", $depth);
        if ($depth == 0) {
            $output .= "\\n$indent<section>\\n";
        }
        $output .= "<ul class=\\"sub-menu\\">\\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\\t", $depth);
        $output .= "\\n$indent</ul>\\n";
        if ($depth == 0) {
            $output .= "</section>\\n";
        }
    }
}
编辑3：我设法使蓝盒循环工作。剩下的最后一件事是检查break 班这是我最新的助行器：

class megaMenuWalker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\\t", $depth);
        if ($depth == 0) {
            $output .= "\\n$indent<section>\\n";
        }
        $output .= "<ul class=\\"sub-menu\\">\\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\\t", $depth);
        $output .= "\\n$indent</ul>\\n";
        if ($depth == 0) {
            $output .= "<aside class=\\"blue widget\\">\\n";
                $output .= "<header>\\n";
                    $output .= "<h6>Download Brochures</h6>\\n";
                $output .= "</header>\\n";
                $output .= "<section>\\n";
                    $output .= "<ul class=\\"brochures\\">\\n";
                        /* query */
                        $args = array(
                            "category_name" => "Brochures",
                            "order" => "ASC",
                            "posts_per_page" => "2"
                        );
                        $news = new WP_query($args);
                        while($news->have_posts()): $news->the_post();
                            $output .= "<li>\\n";
                            if (get_field("pdf")):
                                $file = get_field("pdf");
                                $fileURL = $file["url"];
                                $fileTitle = $file["title"];
                                $output .= "<a href=\\"$fileURL\\" target=\\"_blank\\" title=\\"$fileTitle\\">";
                            endif;
                                if(has_post_thumbnail($id)):
                                    $output .= get_the_post_thumbnail($id, "full");
                                endif;
                                $testingVar = get_the_title();
                                $output .= $testingVar;
                            if (get_field("pdf")):
                                $output .= "</a>";
                            endif;

                            $output .= "</li>\\n";
                        endwhile;
                        wp_reset_query();
                        /* end query */
                    $output .= "</ul>\\n";
                $output .= "</section>\\n";
            $output .= "</aside>\\n";
            $output .= "</section>\\n";
        }
    }
}
编辑4：

我现在已经知道如何检查课间休息。我必须从所有lis中删除id，但这不是问题，因为我没有使用它们。最终代码发布在下面！

2 个回复
最合适的回答,由SO网友:JacobTheDev 整理而成

我设法把它拼凑起来。这不是世界上最优雅的东西，但我认为它应该奏效。

// remove ids from lis
add_filter("nav_menu_item_id", "remove_ids_from_nav", 100, 1);
function remove_ids_from_nav($var) {
    return is_array($var) ? array() : "";
}

// walker to fix drop downs
class megaMenuWalker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\\t", $depth);
        if ($depth == 0) {
            $output .= "\\n$indent<section>\\n";
        }
        $output .= "<ul class=\\"sub-menu\\">\\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\\t", $depth);
        $output .= "\\n$indent</ul>\\n";
        if ($depth == 0) {
            $output .= "<aside class=\\"blue widget\\">\\n";
                $output .= "<header>\\n";
                    $output .= "<h6>Download Brochures</h6>\\n";
                $output .= "</header>\\n";
                $output .= "<section>\\n";
                    $output .= "<ul class=\\"brochures\\">\\n";
                        $args = array(
                            "category_name" => "Brochures",
                            "order" => "ASC",
                            "posts_per_page" => "2"
                        );
                        $news = new WP_query($args);
                        while($news->have_posts()): $news->the_post();
                            $output .= "<li>\\n";
                            if (get_field("pdf")):
                                $file = get_field("pdf");
                                $fileURL = $file["url"];
                                $fileTitle = $file["title"];
                                $output .= "<a href=\\"$fileURL\\" target=\\"_blank\\" title=\\"$fileTitle\\">";
                            endif;
                                if(has_post_thumbnail($id)):
                                    $output .= get_the_post_thumbnail($id, "full");
                                endif;
                                $testingVar = get_the_title();
                                $output .= $testingVar;
                            if (get_field("pdf")):
                                $output .= "</a>";
                            endif;
                            $output .= "</li>\\n";
                        endwhile;
                        wp_reset_query();
                    $output .= "</ul>\\n";
                $output .= "</section>\\n";
                $output .= "<footer>";
                    $output .= "<a class=\\"button\\" href=\\"#\\">&#8250; Register Online</a>";
                    $output .= "<a class=\\"button\\" href=\\"#\\">&#8250; Create Account</a>";
                $output .= "</footer>";
            $output .= "</aside>\\n";
            $output .= "</section>\\n";
            // enable columns
            $output = str_replace("<li class=\\"break", "</ul><ul><li class=\\"", $output);
        }
    }
}

SO网友:Tyler Carter

可以使用$depth 参数，以查看您是否处于剖面级别，并且仅添加<section> 基于该参数。

function start_lvl(&$output, $depth = 0, $args = array()) {
    $indent = str_repeat("\\t", $depth);
    $output .= "\\n$indent";
    if ( 2 == $depth ) {
        $output .= "<section>";
    }
    $output .= "<ul class=\\"sub-menu\\">\\n";
}
将其复制到末级，您可以成功地确保该节仅存在于第二个深度。

结束
标签： php   functions   menus   navigation   walker   小码农  

相关推荐

无法打开Advanced-cache.php，这将破坏媒体库

在我的WordPress安装中，它是3.8版本，所有插件都已更新，它使用的是Magic Fields 2和Hypercache等插件。我无法在帖子中插入图像，因为当我上传时，它会给我一个错误：上载时出错。请稍后再试。帖子“插入媒体”中的媒体库窗口显示为空白，尽管我知道那里有图像，可以通过侧边栏中的查看它们。当我尝试插入带有魔术字段的图像时，当我单击“插入帖子”时，窗口是空白的，它不会插入图像。在wp配置中。php，我已将调试设置为true：define（\'WP\\u DEBUG\'，true）；我在禁用