Question

是否可以为Wordpress主导航制作自定义结构？我想将Semantic-UI与我的网站集成，但Semantic-UI使用div和链接作为菜单结构，但Wordpress使用列表。我找到了一种删除UL标签的方法，但现在我已经停留在LI标签上了。

我想让我的菜单看起来像这样：家

    <a class="item">
        <i class="mail icon"></i> Messages
    </a>

    <a class="item">
        <i class="user icon"></i> Friends
      </a>

      <div class="right menu">
          <div class="item">
              <div class="ui icon input">
                  <input type="text" placeholder="Search...">
                  <i class="search link icon"></i>
              </div>
          </div>

          <a class="ui item">
              Logout
          </a>
      </div>
  </div>

网址：http://semantic-ui.com/collections/menu.html 这是第11个菜单。

Answer 1

我已更新您的建议，看起来像这样：

/** Custom Semantic-UI menu */
function wp_nav_semantic_menu($show){

    $menu_name = 'semantic-menu';
    $locations = get_nav_menu_locations();

    if ( $locations && isset( $locations[ $menu_name ] ) ) {
        $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

        $menu_items = wp_get_nav_menu_items($menu->term_id);

        $menu_list = '<div id="menu-' . $menu_name . '" class="ui secondary pointing menu">';

        foreach ( (array) $menu_items as $key => $menu_item ) {
            $title = $menu_item->title;
            $url = $menu_item->url;

            $menu_list .= '<a class="item" href="'. $url .'">';
            $menu_list .= $title;
            $menu_list .= '</a>';
        }

        $menu_list .= '</div>';

    }else{
        $menu_list = '<div class="ui red message">Menu "'. $menu_name .'" not defined.</div>';
    }

    if($show){
        echo $menu_list;
    }
}

这很好用，但我想添加一些东西。如果查看默认的wp_nav_menu（）输出，它看起来像这样：

<li 
    id="menu-item-10" 
    class=" menu-item 
            menu-item-type-post_type 
            menu-item-object-page 
            menu-item-10">
    <a 
        href="http://127.0.0.1/htdocs/?page_id=9">
        Page
    </a>
</li>

是否有一个变量可以添加到我的自定义函数中的id和类中以添加所有这些页面信息类？

Answer 2

是。您需要使用wp_get_nav_menu_items函数来获取菜单对象，然后您可以根据需要循环并构建菜单。

从文档中获取的示例：

// Get the nav menu based on $menu_name (same as 'theme_location' or 'menu' arg to wp_nav_menu)
// This code based on wp_nav_menu's code to get Menu ID from menu slug

$menu_name = 'custom_menu_slug';

if ( ( $locations = get_registered_nav_menus() ) && in_array( $menu_name, $locations ) ) {
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

    $menu_items = wp_get_nav_menu_items($menu->term_id);

    $menu_list = '<ul id="menu-' . $menu_name . '">';

    foreach ( (array) $menu_items as $key => $menu_item ) {
        $title = $menu_item->title;
        $url = $menu_item->url;
        $menu_list .= '<li><a href="' . $url . '">' . $title . '</a></li>';
    }
    $menu_list .= '</ul>';
} else {
    $menu_list = '<ul><li>Menu "' . $menu_name . '" not defined.</li></ul>';
}
// $menu_list now ready to output

Answer 3

我对Adrian Z.'s answer进行了改进。

这取决于these classes。我使用composer将它们加载到代码中。

在functions.php结束时，我放置了：

    /**
 * @property \Onimla\SemanticUI\Menu $menu
 * @property \Onimla\SemanticUI\Container $container
 * @property array $items
 * @property WP_Post $wp_menu_items
 */
class Semantic_UI_Menu
{

    /**
     * Sub menus
     * @var array
     */
    public $sub = array();

    /**
     * @see https://stackoverflow.com/a/25242681/437459
     * @param string $menu_name
     */
    public function __construct($menu_name, $horizontal = true)
    {
        require_once substr(__DIR__, 0, strrpos(__DIR__, DIRECTORY_SEPARATOR)) . DIRECTORY_SEPARATOR . 'vendor/autoload.php';

        $locations = get_nav_menu_locations();

        if ($locations && isset($locations[$menu_name])) {
            $menu_object = wp_get_nav_menu_object($locations[$menu_name]);

            $menu_items = wp_get_nav_menu_items($menu_object->term_id);

            $this->wp_menu_items = array_combine(array_column(json_decode(json_encode($menu_items), true), 'ID'), $menu_items);
            $this->items = array();

            foreach (new ArrayIterator($this->wp_menu_items) as $menu_item) {
                /* @var $menu_item WP_Post  */

                $is_home = $menu_item->post_name == 'home' and $menu_item->post_title = 'Home';

                /* Instâncias =============================================================== */
                $item = new \Onimla\SemanticUI\Menu\Item($menu_item->title, $menu_item->url, $menu_item->attr_title);

                /* Atributos ================================================================ */
                if (strlen($menu_item->target) > 0) {
                    $item->target($menu_item->target);
                }

                if ($menu_item->url == get_permalink()) {
                    $item->setActive();
                }

                /* Árvore =================================================================== */
                $this->home_item($menu_item, $item);

                /* Exibição ================================================================= */
                $this->submenu($menu_item, $item, $horizontal);
            }

            /* Instâncias =============================================================== */
            $this->container = new \Onimla\SemanticUI\Container($this->items);
            $this->menu = new \Onimla\SemanticUI\Menu;

            /* Atributos ================================================================ */
            #$this->menu->pointing();
            $this->menu->large();

            /* Árvore =================================================================== */
            $this->menu->container = $this->container;
        } else {
            $this->menu = new \Onimla\SemanticUI\Message\Error\WithWarningSign("Menu \"{$menu_name}\" não encontrado.");
        }
    }

    public function __toString()
    {
        return "{$this->menu}";
    }

    /**
     * @param WP_Post $menu_item
     * @param \Onimla\SemanticUI\Menu\Item $sui_item
     */
    protected function home_item($menu_item, &$sui_item)
    {
        if ($menu_item->url == esc_url(home_url('/'))) {
            $sui_item->text($menu_item->title == 'Home' ? __('Home', 'josb2017') : $menu_item->title);
            $sui_item->prepend(new \Onimla\SemanticUI\Icon\Home);

            if (is_home()) {
                $sui_item->setActive();
            }
        }
    }

    /**
     *
     * @param WP_Post $menu_item
     * @param \Onimla\SemanticUI\Menu\Item $sui_item
     * @return \Onimla\SemanticUI\Content\Item|\Onimla\SemanticUI\Menu\Item\Dropdown
     */
    protected function submenu($menu_item, &$sui_item, $horizontal = true)
    {
        $parent_id = (int) $menu_item->menu_item_parent;

        if ($parent_id == '0') {
            $this->items[$menu_item->ID] = $sui_item;

            return $sui_item;
        }

        if (key_exists($parent_id, $this->sub)) {
            $this->sub[$parent_id]->append($sui_item);
            return $this->sub[$parent_id];
        } else {
            unset($this->items[$parent_id]);
            /* @var $parent WP_Post */
            $parent = $this->wp_menu_items[$parent_id];

            /* Instâncias =============================================================== */
            $dropdown = new \Onimla\SemanticUI\Menu\Item\Dropdown($parent->title);

            $group = new \Onimla\SemanticUI\Menu\Item\Group();

            /* Atributos ================================================================ */
            if (strlen($parent->attr_title) > 0) {
                $dropdown->title($parent->attr_title);
            }

            /* Árvore =================================================================== */
            $dropdown->append($sui_item);

            $group->setHeader($parent->title);
            $group->append($sui_item);

            /* Exibição ================================================================= */
            $result = $horizontal ? $dropdown : $group;
            $this->items[$parent_id] = $result;
            $this->sub[$parent_id] = $result;

            unset($this->items[$menu_item->ID]);

            return $result;
        }

        return false;
    }
}

/**
 * @param string $menu_name
 */
function wp_get_nav_sui_menu($menu_name, $horizontal = true)
{
    $sui_menu = new Semantic_UI_Menu($menu_name, $horizontal);

    return $sui_menu->menu;
}

function wp_nav_sui_menu($menu_name, $horizontal = true)
{
    echo wp_get_nav_sui_menu($menu_name, $horizontal);
}

使用两个级别测试代码。我没有时间编写更多级别的代码。

此外，您必须运行JavaScript才能激活下拉列表：

$('.ui.dropdown.item').dropdown({on: 'hover'});

Answer 4

如果您希望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 -->
?>

Wordpress自定义导航结构

4 个答案: