0

我正在尝试使用物化框架制作 WordPress 主题，但我对导航栏部分感到非常困惑。我在互联网上搜索过，但一无所获，似乎没有人使用materialize。

我发现的唯一一件事就是使用 nav_walker 来实现，就像在 bootstrap 中完成一样，但我不知道如何使用 materialize 来实现。

4

3 回答 3

1

我创建了一个片段，允许您使用 materializecss 为 wordpress 创建一个导航栏。但是，它不允许您在菜单（下拉栏）中创建子项。为此，您将需要创建一个自定义的导航步行器。

片段和说明可以在这里找到： https ://github.com/kristofferandreasen/wp_materialize_navigation

它基于评论中链接到的站点 vel。

于 2015-07-26T15:21:42.513 回答
1

我做了这个要点，一个页面 index.php，我在其中使用 wordpress 菜单。我不认为这是最好的解决方案，但这是一个好的开始并且工作正常。随意改进和使用它。

https://gist.github.com/knoonrx/a27381877cfc9e4826fae28ec2544490

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php bloginfo('name') ?></title>
    <link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/materialize.min.css"  media="screen,projection">
    <link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/style.css">

    <style>
        nav .sub-menu {
            position: absolute;
            min-width: 115px;
            display: none;
            transition: all .3s;
            background-color: #ee6e73;
            z-index: 1;
        }
        nav .sub-menu li {
            white-space: nowrap;
            float: none;
        }
        li.menu-item-has-children:hover > .sub-menu {
            display: block;
        }
    </style>

</head>
<header>
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="nav-wrapper">
            <div class="container">
                <a href="#" class="brand-logo">Logo</a>
                <a href="#" data-activates="mobile-nav" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
                <?php
                $menu = [ // mobile side menu array
                    'menu_class'     => 'menu side-nav',
                    'menu_id'        => 'mobile-nav',
                    'items_wrap'     => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>',
                ];
                wp_nav_menu( $menu ); // mobile side menu
                $menu = [ // desktop menu array
                    'menu_class' => 'right hide-on-med-and-down'
                ];
                wp_nav_menu( $menu ); // desktop menu
                ?>
            </div>

        </div>
    </nav><!-- #site-navigation -->
    <div class="clear"></div>
</header>

<br>
<br>

<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/js/materialize.min.js"></script>
<script>
    $(document).ready(function () {
        $(".button-collapse").sideNav();
    });
</script>
</body>
</html>

物化 CSS Wordpress 子菜单

于 2016-04-03T16:22:48.417 回答
1

这应该做的工作：

<div class="m-container nav">
    <div class="container">
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <a href="#" data-activates="mobile-nav" class="button-collapse"><i class="mdi-navigation-menu"></i></a>

            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menu side-nav', 'menu_id' => 'mobile-nav','items_wrap' => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>', ) ); ?>

            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'hide-on-med-and-down' ) ); ?>

        </nav><!-- #site-navigation -->
    <div class="clear"></div>
</div>

（来源：请参阅此处的导航部分：https ://www.34sp.com/hosting-news/blog/wordpress-materialized-creating-material-design-theme-pt-1-theme-setup/ ）

于 2015-08-05T12:43:02.717 回答