更改html结构并创建自定义菜单

时间：2015-02-27 作者：RLM

我是Wordpress的新手，正在尝试做一些非常具体的事情。我当前正在使用the awesome html5blank 创建自定义主题。我正在使用导航选项卡的本机菜单。我当前正在使用background-image\'使导航选项卡成为图像而不是文本，但这给我试图通过css实现的内容带来了问题，并使其具有响应性。

我希望能够添加<img> 标签（每个标签的图像不同<li> ) 在我的<li>\'s通过HTML。

据我所知，我需要在我的function.php 文件

function html5blank_nav()
{
    wp_nav_menu(
    array(
        \'theme_location\'  => \'header-menu\',
        \'menu\'            => \'\',
        \'container\'       => \'div\',
        \'container_class\' => \'menu-{menu slug}-container\',
        \'container_id\'    => \'\',
        \'menu_class\'      => \'menu\',
        \'menu_id\'         => \'\',
        \'echo\'            => true,
        \'fallback_cb\'     => \'wp_page_menu\',
        \'before\'          => \'\',
        \'after\'           => \'\',
        \'link_before\'     => \'\',
        \'link_after\'      => \'\',
        \'items_wrap\'      => \'<ul>%3$s</ul>\',
        \'depth\'           => 0,
        \'walker\'          => \'\'
        )
    );
}
请让我知道我还需要提供什么来让这个问题更有意义，并帮助你让我走上正确的轨道。提前谢谢。

2 个回复
最合适的回答,由SO网友:Travis Seitler 整理而成

考虑到您希望进行的定制量，您最好的选择可能是集成自定义Walker功能。从…起the Codex:

对于更深层次的条件类，需要使用自定义walker函数（在\'walker\' => new Your_Walker_Function 参数）。

构建新walker函数的最简单方法是从\\wp-includes\\nav-menu-template.php 只需定制您需要的内容。

使用自定义助行器可以为您提供更大程度的灵活性和控制wp_nav_menu() 函数本身不考虑内部和内部。它不仅使您能够重新格式化菜单项的输出，而且现在您可以在菜单构建过程中运行所有方式的代码。

简而言之，您要做的是：

复制/粘贴Walker_Nav_Menu 从中分类到主题的functions.php 文件class My_HTML5Blank_Walker_Nav_Menu extends Walker_Nav_Menu;start_el 公共职能wp_nav_menu 指向新自定义助行器的代码，即。\'walker\' => \'My_HTML5Blank_Walker_Nav_Menu\'.way 你决定整合这些图像完全取决于你。。。但请注意：如果菜单项是帖子/页面/类别等（即，不是自定义/手动链接），那么使用自定义Walker意味着您可以拉入每个帖子/页面/术语对象的元数据，并使用该元数据来更改菜单输出。（换句话说，您可以为帖子设置一个特色图像，然后使用自定义Walker，您可以获取该帖子的元数据，并嵌入其关联的特色图像缩略图！）

不管怎样，希望我给了你足够的钱，让你从这里开始。如果我遗漏了什么，请告诉我（或者这里有什么让人困惑的地方，您希望我澄清一下）。

SO网友:Rahul Gupta

我在这里提供的代码可以修改为显示自定义菜单。

我的菜单自定义结构如下：

<ul class="navigation">
    <li class="active">
        <a href="item1.html">Menu item 1</a>
    </li>
    <li>
        <a href="item2.html">Menu item 2</a>
    </li>

    <li>
        <a href="item3.html">Menu item 3</a>
        <div>
            <a href="subitem1.html">Sub Menu item 1</a>
            <a href="subitem2.html">Sub Menu item 2</a>
        </div>
    </li>

</ul>
因此，为了构建这样的自定义布局来显示菜单，我使用了以下代码：

<ul class="navigation">
<?php
$count = 0;
$submenu = false;

foreach( $menuitems as $item ) {
  $link = $item->url;
  $title = $item->title;
  // item does not have a parent so menu_item_parent equals 0 (false)
  if ( !$item->menu_item_parent ) {
      // save this id for later comparison with sub-menu items
      $parent_id = $item->ID;

      if ($getCurrenturl == $link) {
          $activeClass = \'active\';
      } else {
          $activeClass = \'\';
      }
  ?>
      <li class="item <?php echo $activeClass; ?>">
          <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
  <?php 
  } 

  if ( $parent_id == $item->menu_item_parent ) {
      if ( !$submenu ) {
          $submenu = true; 
  ?>
      <div>
      <?php } ?>

              <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>

      <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ) { ?>
      </div>
  <?php 
      $submenu = false;  
      }
  }
  ?>

<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ) { ?>
</li>                           
<?php 
  $submenu = false; 
} 
?>

<?php 
$count++; 
} 
?>

</ul>

结束
标签： menus   css   html   小码农  

相关推荐

在WordPress上不同大小的CSS中的EM，然后在其他地方

我正在为我现有的网站使用Wordpress创建博客和自定义主题。我试图让它与主站点的外观和感觉完全匹配，所以我逻辑上只是复制了所有CSS。。。我的大多数尺寸定义都是基于em的。我发现对于尺寸有em定义的元素，尺寸差异非常大。现场示例：主页：http://letsdolunch-web-dev.azurewebsites.net/博客：http://letsdolunch.today/blog如果查看页眉和页脚，可以清楚地看到差异。页眉/页脚高度由em定义，以及文本大小和项目的填充，对于导航栏链接和左脚文本