如何在wordpress中的wp_nav_menu()函数中设置css和html结构

时间:2013-05-10 09:41:03

标签: wordpress wordpress-plugin

我有一个HTML编码的导航菜单,其中包含CSS样式和炫酷动画。 现在我想在CSS中添加此Word Press和结构。我已经尝试过并在wp_nav_menu()中使用过。但结果到目前为止。我怎么能在Word Press中使用这个CSS。 如果我使用静态导航HTML,CSS也包括在内并正常工作。

$defaults = array(
                    'theme_location'  => 'header-menu',
                    'menu'            => '',
                    'container'       => 'div',
                    'container_class' => '',
                    'container_id'    => '',
                    'menu_class'      => 'menu',
                    'menu_id'         => '',
                    'echo'            => true,
                    'fallback_cb'     => 'wp_page_menu',
                    'before'          => '',
                    'after'           => '',
                    'link_before'     => '',
                    'link_after'      => '',
                    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                    'depth'           => 0,
                    'walker'          => ''
                );

                wp_nav_menu( $defaults );

想在Wordpress导航菜单中添加此css

 <ul class="menu">
                            <li class="current-menu-parent"><a href="javascript:void(0)" title="Lorem ipsum vivams vitae sodales">Home</a>
                                <ul class="sub-menu">                        
                                    <li class="current-menu-item"><a href="home.html">Background Color</a></li>
                                    <li><a href="home2.html">Background Color With Fullwidth Slider</a></li>
                                    <li><a href="home3.html">Clean Style</a></li>
                                    <li><a href="home4.html">Clean Style With Fullwidth Slider</a></li>
                                    <li><a href="home5.html">Background Image</a></li>
                                </ul>
                            </li>
                            <li><a href="javascript:void(0)" title="Egestas cras eres mauri pellentesque">Pages</a>
                                <ul class="sub-menu">
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="full-width.html">Full Width</a></li>
                                    <li><a href="gallery.html">Gallery</a></li>
                                    <li><a href="404.html">404 Page</a></li>
                                    <li><a href="sitemap.html">Sitemap</a></li>
                                </ul>                        
                            </li>
    </ul>

1 个答案:

答案 0 :(得分:1)

这样做并不是那么困难。您需要在数组中声明菜单的类。 这是一个例子:

 <?php $defaults = array(
    'theme_location'  => '',
    'menu'            => 'TopMenu', 
    'container'       => 'ul', 
    'container_class' => 'topmenu-{topmenu slug}-container', 
    'container_id'    => 'topmenu',
    'menu_class'      => 'topmenu', 
    'menu_id'         => 'topmenu-{topmenu slug}[-{increment}]',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
); ?>
<?php wp_nav_menu( $defaults ); ?>  

在这个“topmenu”中是css类。我相信,从这里您可以自定义菜单。

希望对你有所帮助! 如果你需要一个css样本,请告诉我!