Вопросы Теги

Обнаружение классов, добавление виджетов и включение отделений с Военно-морским Walker

Я пытался понять это в течение многих дней, напрасно.

Шаблон, который я создаю, требует мега меню. Разметка для меню похожа на это:

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

Мега меню похоже на это:

У меня есть три проблемы:

  1. Я не могу выяснить, как добавить <section> вокруг второго уровня <ul>. Я записал Уокеру, который добавит раздел, но он добавляет его к каждому уровню, не только второму уровню.
  2. Я не могу выяснить, как позволить пользователю указывать, где столбец должен повредиться. Я думаю, что мог сделать, чтобы мой клиент вошел в класс break на <li> то, что они хотят закончиться (или запуститься, легче whichever's) столбец, но я не знаю, как затем проверить на то использование PHP и добавить </ul><ul> после этого </li>.
  3. Синее поле является областью виджета. Я не могу выяснить, как заставить это обнаруживаться в навигации.

Я абсолютно плохо знаком с военно-морскими ходоками, и весь этот материал просто пробегается через мою голову. Этот материал кажется довольно простым, но после закрытия и часы исследования, я все еще застреваю.

Вот то, что я имею до сих пор, но я готов фрагментировать его полностью:

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: Благодаря ответу Tyler Carter ниже, я смог добраться, раздел укусил работу. Вот мой обновленный Уокер:

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:

Я теперь выяснил, как проверить на класс повреждения. Я должен был удалить идентификатор из всех литиев, но это не проблема, так как я не использовал их так или иначе. Заключительный код отправляется ниже!

1
02.05.2014, 19:16
2 ответа

Мне удалось соединить это. Это не самая изящная вещь в мире, но я думаю, что это должно работать.

// 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
19.02.2020, 23:26

Можно проверить глубину с помощью $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";
}

Копируйте это с уровнем конца, и можно успешно удостовериться, что раздел только присутствует на второй глубине.

0
19.02.2020, 23:26
  • 1
    Это получило меня движение, и я смог добраться section разрядная работа. Все еще нуждаюсь в помощи с break и материал виджета все же. Вот мой обновленный Уокер: pastebin.com/BhBzMG8t (также обновил исходное сообщение) –  JacobTheDev 02.05.2014, 16:31

Теги

Похожие вопросы