如何在php中正确实现结构化菜单

Question

我的目标是调整/替换现有的wordpress php菜单代码,以codepen中的这个html/ css/ jsmenu结构作为起点:

主页/投资组合/关于和进入投资组合结构,另一个页面有家庭/投资组合项目.

在几句话,我已经注册script-calls.php的mynewmenu.js文件,按以下顺序

js:

// mynewmenu implementation
jQuery(function($){ 
    var height, index, prevIndex

    $('nav ul li').mouseover(function(e){
        //Set the aesthetics (similar to :hover)
        $('nav ul li').removeClass('hovered');
        $(this).addClass('hovered');

        //Gets relevant data required for scrolling of menuRight    
        height = $("#menuRight").css("height").replace('px','');
        index = $(this).index();

        //If the category button (from the navlist) has changed
        if (index != prevIndex){
            $("#menuRight").stop();

            $("#menuRight").animate({"scrollTop":height*index}, 800, 'easeOutBounce'); //This requires jQuery UI for easing options.
            prevIndex = index;
        }
    });
});

我创建了所需的菜单结构(分配不同的菜单不同的页面的日子会把你看到这里),我已经确定的php是管理现有的菜单结构:

            <!-- Start Header -->
                 ...                
                <div class="myrow max_width ">      
                    <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 } ?>

              /* I think that <div id='menuRight'> html sequences *translated*
              in *php* should begin here in a conditional manner: *if* we find ourself on the
              Home page, should be activated Home / Portfolio / About sequence and also if we
              are on the Portfolio page, we should receive the menu 2, generated by Home / Portfolio 
              projects sequence. More details below. */  

                            </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>          
                </div>  

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

此时,我的问题是,我如何实现header.php以下html序列生成链接到菜单按钮的翻转图像,记住有不同的部分,每个菜单的部分如下.主页/作品集/关于:

<nav>
  <ul>
   ...
  </ul>
    <div id='menuRight'>
       <div>
           Home
           <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
          </img>
       </div>
      <div>
          Portfolio
          <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
          </img>
      </div>
      <div>
          About
          <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
          </img>
      </div>
    </div>
</nav>

和菜单2,Home/Portfolio项目:

<nav>
  <ul>
    ...
  </ul>
    <div id='menuRight'>
       <div>
           Home
           <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
          </img>
       </div>
      <div>
          Fiva
          <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
          </img>
      </div>
      <div>
          Caterham
          <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
          </img>
      </div>
      <div>
          Mobile
          <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
          </img>
      </div>
    </div>
</nav>

我故意css离开了讨论,因为这是这段代码调整的另一章.

LE:我必须提到,菜单按钮激活的翻转图像效果足够(并且有意义),只有在网站的主页和项目组合页面上才能使用.我认为当我们打开一个项目页面(比如FIVA)并将鼠标放在另一个项目按钮上时,实现相同的效果可能会非常棘手.

LE2:关于翻转图像,我不是在寻找一个php应该抓住最后一个项目预览的花哨代码; php允许我像上面html菜单部分中那样预定义图像源链接的代码就可以了,考虑到这些图像不会经常被替换的事实.

LE3:纯实验,请指正,我只是想,使用包含PHP函数调用两个单独的html文件header.php(包括在这些上面描述的菜单1和2部分)可能是一个变通方法的开始？

                <!-- Start Header -->
                     ...                
                    <div class="myrow max_width ">      
                        ...
                                        <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 } ?>
                                       <?php
                  /* But there still should be a php code, that call the  
                  html sections *if* we are on Homepage or Portfolio page.  
                  Something like:
                  Php instructions, if Home page */  

             include('menu1section.html');

                  // and also php instructions, if Portfolio page 

             include('menu2section.html');
                                        ?>

                                </nav>
                            <?php } ?>
                            <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
                            ...
                    </div>  

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

有什么想法吗？谢谢,

Answer 1

我不是 WordPress 开发人员，但在我看来，您需要一种方法来检测活动类别/帖子/页面？您正在...通过查看网站很难理解您的数据结构。

<!-- Start Header -->
...                
<div class="myrow max_width ">      
...
    <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 } ?>
    <?php
        $thisCat = get_category(get_query_var('cat'));
        switch ($thisCat->name) {
            case 'Home':
                echo "Home test";
                break;
            case 'Portfolio':
                echo "portfolio test";
                break;
            case 'About Us':
                echo "About Us test";
                break;
        }
    ?>
....
<!-- End Header -->

修改了我的答案，让您更好地了解我所指的测试。