定制具有语义界面的a标签

时间:2014-01-14 作者:Josh

我想使用Semantic UI 帮助开发项目的Wordpress模板。

对于子菜单,我打算使用Secondary sub menus 位于定点部分的底部。

我面临的问题是,WP似乎不允许定制标记。

在语义UI示例中,这是他们用来生成二级子菜单的代码,我如何使用WP实现这一点?

<div class="ui secondary vertical pointing menu">
  <a class="active item">
    <i class="home icon"></i> Home
  </a>
  <a class="item">
    <i class="mail icon"></i> Messages
  </a>
  <a class="item">
    <i class="user icon"></i> Friends
  </a>
</div>
到目前为止,我已经使用以下代码实现了一个菜单:

<div class="ui secondary vertical pointing menu">
    <a class="item">
      <?php wp_nav_menu( array( \'theme_location\' => \'about-menu\' ) ); ?>
    </a>                        
</div>
尽管如此,WP显示的菜单在其余菜单项下方没有任何样式。几乎就好像他们被推出去了。

有人能帮我吗?

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

你肯定是在正确的轨道上,但是wp_nav_menu 将输出一个包含大量容器和类名的菜单;为了在语义UI方面保持它的语义,如果您自己构建结构,您将得到很好的帮助。

在菜单管理器中获取已注册菜单的名称。检查register_nav_menu 在您的functions.php 如果你不确定。例如,这就是《十三三》主题中的内容:

register_nav_menu( \'primary\', __( \'Navigation Menu\', \'twentythirteen\' ) );
(在你的情况下,可能是about-menu.)

您可以使用下面的代码片段通过菜单名称生成自定义菜单(我们将能够获得所有详细信息(例如位置、id等)自动注册菜单的)

<?php

    $menu_name = \'primary\'; // this is the registered menu name

    if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
        $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
        $menu_items = wp_get_nav_menu_items($menu->term_id);
        echo \'<div class="ui secondary vertical pointing menu">\';
            foreach ( (array) $menu_items as $key => $menu_item ) :
                $title = $menu_item->title;
                $class = $menu_item->classes; // get array with class names
                if ( get_the_ID() == $menu_item->object_id ) { // check for current page
                    echo \'<a class="item active">\';
                } else {
                    echo \'<a class="item">\';
                }
                    echo \'<i class="item \' . implode(\' \', $class) . \'"></i>\' . $title;
                echo \'</a>\';
            endforeach;
        echo \'</div>\';
    else :
        echo \'<div class="ui error message"><p>Menu "\' . $menu_name . \'" not defined.</p></div>\';
    endif;

?>
仔细看看上面的代码。我们正在遍历定义菜单的菜单项。确保在菜单管理器中添加类名(用于图标)。插入类名(用空格分隔多个类名)是可选的,默认情况下是隐藏的;您可以通过激活输入字段Screen Options 在顶部。

Update: 您还可以输出带有页面链接的菜单:

<?php

  $menu_name = \'primary\'; // this is the registered menu name

  if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
    $menu_items = wp_get_nav_menu_items($menu->term_id);
    echo \'<div class="ui vertical menu">\';
      foreach ( (array) $menu_items as $key => $menu_item ) :
        $title = $menu_item->title;
        $url = $menu_item->url;
        $class = $menu_item->classes; // get array with class names
        if ( get_the_ID() == $menu_item->object_id ) { // check for current page
          echo \'<a class="item active" href="\' . $url . \'">\';
        } else {
          echo \'<a class="item" href="\' . $url . \'">\';
        }
          echo \'<i class="item \' . implode(\' \', $class) . \'"></i>\' . $title;
        echo \'</a>\';
      endforeach;
    echo \'</div>\';
  else :
    echo \'<div class="ui error message"><p>Menu "\' . $menu_name . \'" not defined.</p></div>\';
  endif;

?>

SO网友:rank

如果希望Wordpress菜单具有语义UI结构中的子菜单,可以使用以下代码。

将代码放在模板文件中,应在其中显示菜单。

您只需调整菜单ID(如果您在wordpress中悬停“删除菜单”链接,它将显示在URL中)。

您还可以为其他语义UI菜单调整代码。

<?php
$menuID = \'your menu ID\';
$primaryNav = wp_get_nav_menu_items($menuID);

<div class="ui secondary vertical menu">
            <?php
            $count = 0;
            $submenu = false;
            foreach( $primaryNav as $item ) {
                $link = $item->url;
                $title = $item->title;

                // item does not have a parent
                if ( !$item->menu_item_parent ) {
                    $parent_id = $item->ID; ?>
                <?php } ?>

                <?php // item is parent of next element ?>
                <?php if ( $parent_id == $item->menu_item_parent ) { ?>

                    <?php if ( !$submenu ) {
                            $submenu = true; ?>
                        <div class="ui dropdown item"><i class="dropdown icon"></i><?php echo get_the_title($parent_id); ?><div class="menu">
                    <?php } ?>

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

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

                <?php }
                else { // item is not parent of next element ?>
                    <?php if ( !$primaryNav[ $count + 1 ]->menu_item_parent ) { ?>
                        <a href="<?php echo $link; ?>" class="item"><?php echo $title; ?></a> 
                    <?php } ?>

                <?php } ?>

                <?php $count++; 
            } ?>
        </div> <!-- menu -->
?>

结束

相关推荐

Change sub-menu css class

我使用带有下拉菜单的自定义菜单。我想制作两个不同的下拉菜单,每个都有不同的样式。Wordpress使用class=\"sub-menu\". 但我需要为每个菜单设置不同的类别。<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3 <ul class=\"sub-menu\"> <li>Sub menu item 1