搜索框作为wp_NAV_MENU输出的导航菜单中的菜单项?

时间:2012-07-18 作者:its_me

我使用的是二十一主题,下面是它用来注册和显示菜单的代码。

In functions.php:

function twentytwelve_setup() {

    ...

    // This theme uses wp_nav_menu() in one location.
    register_nav_menu( \'primary\', __( \'Primary Menu\', \'twentytwelve\' ) );

    ...

}
add_action( \'after_setup_theme\', \'twentytwelve_setup\' );

In header.php:

<nav class="site-navigation main-navigation" role="navigation">
    <?php wp_nav_menu( array( \'theme_location\' => \'primary\' ) ); ?>
</nav>
输出代码如下所示:

<nav class="site-navigation main-navigation" role="navigation">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">

            <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9">
                <a href="http://aahank.com/">Home</a>
            </li>

            <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12">
                <a href="http://example.com/">About</a>
            </li>

        </ul>
    </div>
</nav>
但我想修改输出,以便搜索框可以作为如下菜单项集成到导航菜单中:

<nav class="site-navigation main-navigation" role="navigation">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">

            <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9">
                <a href="http://aahank.com/">Home</a>
            </li>

            <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12">
                <a href="http://example.com/">About</a>
            </li>

            <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13">

                <!-- Search box inside nav as a menu item -->
                <form method="get" id="searchform" action="/">
                    <label for="s" class="assistive-text">Search</label>
                    <input type="text" class="field" name="s" id="s" placeholder="Search" />
                    <input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />
                </form>

            </li>

        </ul>
    </div>
</nav>
我该怎么做呢?我需要一两个代码支持的指针。也欢迎用汤匙喂食P

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

based on : http://wpfirstaid.com/2010/10/extend-the-wordpress-menu/

function wpa_58902($items){
    $search = \'<li class="search">\';
    $search .= \'<form method="get" id="searchform" action="/">\';
    $search .= \'<label for="s" class="assistive-text">Search</label>\';
    $search .= \'<input type="text" class="field" name="s" id="s" placeholder="Search" />\';
    $search .= \'<input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />\';
    $search .= \'</form>\';
    $search .= \'</li>\';

    return $items . $search;
}
add_filter(\'wp_nav_menu_items\',\'wpa_58902\');
SO网友:Naoise Golden

我更喜欢this solution:

在标题中。php:

</hgroup>
<div class="header-search"><?php get_search_form(); ?></div>
时尚。css:

.header-search {
    float: right;
    margin-top: -50px;
}
@media (max-width: 650px) {
    .header-search {
        margin-top:5px;
        text-align:center;
        float:none;
    }
    .main-navigation  {
        clear:both;
    }
}

SO网友:Joe Bop

我知道这是一个很长的时间后的问题,但我有同样的问题在问题中提到。我在教程或任何stackexchange上都找不到合适的解决方案,最终放弃了,并为其编写了自己的代码。此后,我将其作为插件发布:

Bop Search Box Item Type For Nav Menus

至关重要的是,这会像菜单管理屏幕中的任何其他选项一样,将搜索框添加为菜单项选项,因此无需添加任何代码。

如果您想要一个更为定制的解决方案,那么可以使用一些挂钩(详见常见问题解答)。此外,它非常小,因此如果您愿意,您可能希望使用该代码来创建自己的插件。

结束

相关推荐

如何让我的自定义帖子类型出现在NAV-menus.php‘Menu’中?

我的自定义帖子类型有点问题。我可以在我的主题中很好地创建它们,但我无法让它们显示在“菜单”屏幕中。。。至少在默认情况下不是这样。我曾尝试在代码中添加菜单和UI标志(见下文),但没有成功。有趣的是,当我启用自定义帖子类型UI插件时,自定义帖子类型在“菜单”屏幕中显示良好(有时)。这似乎向我暗示,我在某个地方遗漏了一个步骤,而且不知何故,自定义帖子类型UI插件设置了该标志,并允许我的自定义帖子类型和分类显示在导航菜单中。php“菜单”屏幕。编辑::以上位已回答。谢谢你,米洛。我应该在“屏幕选项”选项卡中打开它