web-dev-qa-db-ja.com

Nav Walkerを使ってクラスを検出し、ウィジェットを追加し、divを追加する

私は何の役にも立たずに、何日もこれを理解しようとしてきました。

私が作っているテンプレートには、メガメニューが必要です。メニューのマークアップは次のようになります。

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

メガメニューは次のようになります。

私は3つの問題を抱えています：

  1. 2番目のレベルの<section>の周りに<ul>を追加する方法がわかりません。セクションを追加するウォーカーを作成しましたが、2番目のレベルだけでなく、すべてのレベルに追加されます。
  2. ユーザーが列をどこで分割するかを指定できるようにする方法を理解することはできません。私は私のクライアントが<li>上のbreakのクラスに入ってもらいたいと思うかもしれませんが、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：

私は今休憩クラスをチェックする方法を考え出しました。私はすべてのlisからidを削除しなければなりませんでした、しかし私がとにかくそれらを使っていなかったので、それは問題ではありません。最終的なコードは以下に掲載されています！

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

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

それを最終レベルで再現すれば、そのセクションだけが2番目の深さにあることを確実に確認できます。

0
Tyler Carter