3

If the user goes to a page other than the homepage then my header changes layout.

Everything works fine except for the function wp_nav_menu.

First, I check whether the user is on the homepage or not. Depending on that outcome the user is shown one of two headers.

Here is the code:

<?php 
    $menu = wp_nav_menu( array( 'theme_location' => 'hoofdmenu' ) );
    echo is_front_page() ? '' : '
    <header>
        <div class="hoofdmenu">
            <div class="hamburger">
                <a href="#" id="click-a"><img width="80" height="80" src="'.get_bloginfo('template_directory').'/images/hamburger.png"></a>
            </div>
            '.$menu.'
        </div>
    </header>';
?>

To keep it short I deleted the true value of the if statement.

Now the problem that I have is that the menu is placed completely outside the header

Here is the HTML output:

<div class="menu-hoofdmenu-container">
    <ul id="menu-hoofdmenu" class="menu">
        <li>Menu item 1</li>
        <li>Menu item 2</li>
        <li>Menu item 3</li>
    </ul>
</div>      
    <header>
        <div class="hoofdmenu">
            <div class="hamburger">
                <a href="#" id="click-a"><img width="80" height="80" src="http://www.url.nl/wp-content/themes/themename/images/hamburger.png"></a>
                </div>
            </div>
        </div>
    </header>

Any thoughts on why the wp_nav_menu is placed outside the header?

-------Update--------

echo is_front_page() ? '' : '

    <header>
        <div class="hoofdmenu">
            <div class="hamburger">
                <a href="#" id="click-a"><img width="80" height="80" src="'.get_bloginfo('template_directory').'/images/hamburger.png"></a>
            </div>
            '.wp_nav_menu( array( 'theme_location' => 'hoofdmenu' ) ).'
        </div>
    </header>
4

2 回答 2

5

（在答案底部添加了更新，您可以跳过第一部分）

根据文档，该函数显示 ( echo) 菜单并且不返回它。

wp_nav_menu（数组 $args = 数组（））

显示导航菜单。

因此，当您使用

$menu = wp_nav_menu( array( 'theme_location' => 'hoofdmenu' ) );

您实际上是打印菜单而不是将其保存在$menu变量中，因此它是在标题代码之前打印的。

解决方案是：

echo is_front_page() ? '' : '
<header>
    <div class="hoofdmenu">
        <div class="hamburger">
            <a href="#" id="click-a"><img width="80" height="80" src="'.get_bloginfo('template_directory').'/images/hamburger.png"></a>
        </div>
        '.wp_nav_menu( array( 'theme_location' => 'hoofdmenu' ) ).'
    </div>
</header>';

更新：

尝试以下操作：

if(!is_front_page()){

    echo '<header>
        <div class="hoofdmenu">
            <div class="hamburger">
                <a href="#" id="click-a"><img width="80" height="80" src="'.get_bloginfo('template_directory').'/images/hamburger.png"></a>
            </div>';

            wp_nav_menu( array( 'theme_location' => 'hoofdmenu' ) );

    echo '
        </div>
    </header>';
}

更好的更新：

使用您使用的相同代码，只需将 'echo' 选项添加到 args 数组。似乎您可以告诉函数返回输出而不是打印它。

'echo' (bool) 是否回显菜单或返回它。默认为真。

用法：

$menu = wp_nav_menu( array( 'theme_location' => 'hoofdmenu', 'echo' => false) );
于 2017-10-23T09:50:25.553 回答
1

简单的解决方案。给 echo false ，您的代码将起作用。来自 WP 文档。

//'echo'
//(bool) Whether to echo the menu or return it. Default true.

$menu = wp_nav_menu( array( 'theme_location' => 'hoofdmenu', 'echo' => false ) );
于 2017-10-23T11:41:16.760 回答