如何將自定義樣式正確地應用於現有的wordpress菜單

Question

我遇到一種情況，試圖在現有的wordpress菜單中實現以下菜單樣式。

 // mynewmenu implementation $('nav ul li').mouseover(function(e){ //Set the aesthetics (similar to :hover) $('nav ul li').removeClass('hovered'); $(this).addClass('hovered'); }); var pageSize = 4, $links = $(".pagedMenu li"), count = $links.length, numPages = Math.ceil(count / pageSize), curPage = 1 ; showPage(curPage); function showPage(whichPage) { var previousLinks = (whichPage - 1) * pageSize, nextLinks = (previousLinks + pageSize); $links.show(); $links.slice(0, previousLinks).hide(); $links.slice(nextLinks).hide(); showPrevNext(); } function showPrevNext() { if ((numPages > 0) && (curPage < numPages)) { $("#nextPage").removeClass('hidden'); $("#msg").text("(" + curPage + " of " + numPages + ")"); } else { $("#nextPage").addClass('hidden'); } if ((numPages > 0) && (curPage > 1)) { $("#prevPage").removeClass('hidden'); $("#msg").text("(" + curPage + " of " + numPages + ")"); } else { $("#prevPage").addClass('hidden'); } } $("#nextPage").on("click", function() { showPage(++curPage); }); $("#prevPage").on("click", function() { showPage(--curPage); }); 

 .hidden { display: none; } body { font: normal 1.0em Arial, sans-serif; } nav.pagedMenu { color: red; font-size: 2.0em; line-height: 1.0em; width: 8em; position: fixed; top: 50px; } nav.pagedMenu ul { list-style: none; margin: 0; padding: 0; } nav.pagedMenu ul li { height: 1.0em; padding: 0.15em; position: relative; border-top-right-radius: 0em; border-bottom-right-radius: 0em; -webkit-transition: -webkit-transform 220ms, background-color 200ms, color 500ms; transition: transform 220ms, background-color 200ms, color 500ms; } nav.pagedMenu ul li.hovered { -webkit-transform: translateX(1.5em); transform: translateX(1.5em); } nav ul li:hover a { transition: color, 1200ms; color: red; } nav.pagedMenu ul li span { display:block; font-family: Arial; position: absolute; font-size:1em; line-height: 1.25em; height:1.0em; top:0; bottom:0; margin:auto; right: 0.01em; color: #F8F6FF; } a { color: gold; transition: color, 1200ms; text-decoration: none; } #pagination, #prevPage, #nextPage { font-size: 1.0em; color: gold; line-height: 1.0em; padding-top: 250px; padding-left: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="pagedMenu"> <ul style="font-size: 28px;"> <li class="" style="margin-bottom: 5px;"><a href="#">Link 1</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 2</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 3</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 4</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 5</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 6</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 7</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 8</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 9</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 10</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 11</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 12</a></li> </ul> </nav> <div id="pagination"> <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp; <a href="#" id="nextPage" class="hidden">Next</a> <span id="msg"></span> </div> 

我所做的：

在自定義CSS主題部分中，我使用上面的jsfiddle CSS代碼更新了代碼； 我已經更新了header.php ，將nav id="full-menu"替換為nav class="pagedMenu" ，如下所示：

之前

    <!-- Start Header -->
       ...

        <div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
            <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
            <?php if ($full_menu_true) { ?>
                <nav id="full-menu" role="navigation">
                    <?php if ($page_menu) { ?>
                        <?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown  ) ); ?>
                    <?php } else  if(has_nav_menu('nav-menu')) { ?>
                      <?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
                    <?php } else { ?>
                        <ul class="full-menu">
                            <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>
                        </ul>
                    <?php } ?>
                </nav>
            <?php } ?>
            <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
            <?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
            <a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
                <div>
                    <span></span><span></span><span></span>
                </div>
            </a>
        </div>
    </header>

    <!-- End Header -->

后

    <!-- Start Header -->
       ...

                <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
                <?php if ($full_menu_true) { ?>
                    <nav class="pagedMenu" role="navigation">
                        <?php if ($page_menu) { ?>
                            <?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'pagedMenu', 'walker' => new thb_mobileDropdown  ) ); ?>
                        <?php } else  if(has_nav_menu('nav-menu')) { ?>
                          <?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'pagedMenu', 'walker' => new thb_mobileDropdown ) ); ?>
                        <?php } else { ?>
                            <ul style="font-size: 28px;">
                                <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>
                            </ul>
                        <?php } ?>
                    </nav>
                    <div id="pagination">
                         <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp;
                         <a href="#" id="nextPage" class="hidden">Next</a>
                         <span id="msg"></span>
                    </div>
                <?php } ?>
                <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
                <?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
                <a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
                    <div>
                        <span></span><span></span><span></span>
                    </div>
                </a>



    </header>
    <!-- End Header -->

在script-calls.php ，將jquery和jquery-ui-core入隊，我還注冊了mynewmenu.js一個文件，該文件包含上述jsfiddle的jQuery代碼部分。

此時，菜單以某種方式顯示，但沒有動畫，並且缺少上一個/下一個按鈕。 同樣在Chrome控制台中，出現錯誤Uncaught TypeError: $ is not a function與此行對應Uncaught TypeError: $ is not a function ： $('nav ul li').mouseover(function(e){ 。

實時鏈接在這里 。 有什么想法嗎？

Answer 1

WordPress在安全模式下使用jQuery。 使用“ $”將任何功能更改為“ jQuery”。

例如：

$('nav ul li').mouseover(function(e){

應該

jQuery('nav ul li').mouseover(function(e){