web-dev-qa-db-fra.com

Détection de classes, ajout de widgets et ajout de divs avec Nav Walker

J'essaie de comprendre cela depuis des jours, en vain.

Un modèle que je construis nécessite un méga menu. Le balisage pour le menu ressemble à ceci:

<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>

Le méga menu ressemble à ceci:

J'ai trois problèmes:

  1. Je n'arrive pas à comprendre comment ajouter le <section> autour du deuxième niveau <ul>. J'ai écrit un lecteur qui ajoutera la section, mais il l'ajoute à tous les niveaux, pas seulement au deuxième niveau.
  2. Je n'arrive pas à comprendre comment permettre à l'utilisateur de spécifier où une colonne doit être cassée. Je pense que mon client pourrait entrer dans une classe de break sur le <li> qu'il souhaite terminer (ou commencer, selon ce qui est le plus facile) une colonne, mais je ne sais pas comment vérifier cela à l'aide de PHP. _ et ajoutez le </ul><ul> après ce </li>.
  3. La boîte bleue est une zone de widget. Je n'arrive pas à comprendre comment faire apparaître cela dans la navigation.

Je suis complètement nouveau pour les marcheurs, et tout ça me dépasse. Cela me semble assez simple, mais après des heures et des heures de recherche, je suis toujours bloqué.

Voici ce que j'ai jusqu'à présent, mais je suis prêt à l'abandonner complètement:

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

EDIT: Ce qui me contrarie vraiment, c’est que je sais comment résoudre les deux premiers problèmes avec jQuery, mais ce n’est pas une solution acceptable ...

$("nav > ul > li > ul").wrap("<section>");
$("nav .break").before("</ul><ul>");

EDIT 2: Merci à la réponse de Tyler Carter ci-dessous, j'ai pu faire fonctionner le bit de section. Voici mon marcheur mis à jour:

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

EDIT 3: J'ai réussi à faire fonctionner la boucle de la boîte bleue. La dernière chose qui reste à vérifier est de rechercher la classe break. Voici mon marcheur mis à jour:

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

EDIT 4:

J'ai maintenant compris comment vérifier la classe de repos. Je devais enlever l'id de tous les lecteurs, mais ce n'est pas un problème car je ne les utilisais pas de toute façon. Le code final est affiché ci-dessous!

phpfunctionsmenusnavigationwalker
1
JacobTheDev

J'ai réussi à reconstituer cela. Ce n'est pas la chose la plus élégante du monde, mais je pense que cela devrait fonctionner.

// 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);
        }
    }
}
0
JacobTheDev

Vous pouvez vérifier la profondeur à l'aide du paramètre $depth pour voir si vous vous trouvez au niveau de la section et ajouter uniquement le <section> en fonction de ce paramètre.

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

Répétez cela avec le niveau de fin et vous pouvez vous assurer que seule la section est présente à la deuxième profondeur.

0
Tyler Carter