在WordPress网站中的特定页面上隐藏汉堡菜单

Question

thehamburgercollection.com

我的汉堡菜单在所有其他页面上都正确工作 - 我只是不希望它在主页上显示，目前在768px及以下显示。

footer.php是菜单的位置：

<div class="mobile-nav">
    <div class="menu-btn" id="menu-btn">
        <div></div>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="responsive-menu">
    <?php
        if ( ! is_front_page() && ! is_home() ) {
        wp_nav_menu();  
        } 
    ?>
    </div>
</div>

您可以看到我告诉它不要在首页上显示导航菜单（也是主页），并且它正确地执行此操作 - 但是我该如何对汉堡菜单做同样的事情？

我遵循本教程中的说明，以创建我的汉堡菜单。如果我尝试复制php if语句，该语句告诉浏览器在所有其他页面上显示nav菜单，除了首页/主页，然后将其粘贴到div之前，然后使用类和id"菜单btn"，我得到语法错误：

<div class="mobile-nav">
    <?php if ( ! is_front_page() && ! is_home() ) {
        <div class="menu-btn" id="menu-btn">
            <div></div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    } 
    ?>
    <div class="responsive-menu">
    <?php
        if ( ! is_front_page() && ! is_home() ) {
        wp_nav_menu();  
    } 
    ?>
    </div>
</div>

我不确定是否有一种方法可以在带有CSS的特定页面上隐藏汉堡菜单，或者，如果我确实需要使用PHP或JS，我应该在哪里放置该功能/我应该使用什么函数？<<<</p>

谢谢！

Answer 1

您必须在打印HTML代码之前关闭PHP代码部分。

<div class="mobile-nav">
    <?php if ( ! is_front_page() && ! is_home() ) : ?>
        <div class="menu-btn" id="menu-btn">
            <div></div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    <?php endif; ?> 
    <div class="responsive-menu">
    <?php
        if ( ! is_front_page() && ! is_home() ) {
        wp_nav_menu();  
    } 
    ?>
    </div>
</div>

Answer 2

您将HTML与您的PHP混合。

尝试以下方法：

<?php if ( ! is_front_page() && ! is_home() ) { ?>
    <div class="menu-btn" id="menu-btn">
        <div></div>
        <span></span>
        <span></span>
        <span></span>
    </div>
<?php } ?>

说明：

您可以看到PHP内部的<div>...</div>。您需要先关闭php-section，然后发布html，然后必须结束if。

您只需要?>之后的if(...) {

希望这会有所帮助。

Answer 3

您可以这样做：

 <?php if ( ! is_front_page() && ! is_home() ) {
<div class="mobile-nav">
        <div class="menu-btn" id="menu-btn">
            <div></div>
            <span></span>
            <span></span>
            <span></span>
        </div>

    <div class="responsive-menu">
    <?php
        wp_nav_menu();  
    ?>
    </div>
</div>
 } 
 ?>