web-dev-qa-db-fra.com

Zone de recherche en tant qu'élément de menu dans la sortie du menu de navigation par wp_nav_menu?

J'utilise le thème Twenty Twelve, et voici le code qu'il utilise pour enregistrer et afficher le menu.

Dans 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' );

Dans header.php: 

<nav class="site-navigation main-navigation" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>

Et le code de sortie ressemble à ceci:

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

Mais je voudrais modifier le résultat afin qu’un champ de recherche puisse être intégré dans le menu de navigation comme un élément de menu comme ceci:

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

Comment puis-je faire cela? J'ai besoin d'un pointeur codé ou de deux. L'alimentation à la cuillère est également la bienvenue. : P

menusnavigation
1
its_me

basé sur: 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');
3
helgatheviking

J'aime mieux cette solution :

Dans header.php:

</hgroup>
<div class="header-search"><?php get_search_form(); ?></div>

Dans style.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;
    }
}
0
Naoise Golden

Je sais que cela fait longtemps après la question, mais j'avais le même problème que celui mentionné dans la question. Je n'ai trouvé aucune solution appropriée dans les tutoriels ou sur un stackexchange et, finalement, j'ai abandonné et écrit mon propre code. Je l'ai depuis publié sous forme de plugin:

Type de zone de recherche Bop Pour les menus de navigation

Surtout, cela ajoute le champ de recherche en tant qu'option d'élément de menu comme tout autre élément dans l'écran d'administration de menu. Aucun code ne doit donc être ajouté.

Si vous recherchez une solution plus personnalisée, certains crochets peuvent être utilisés (comme indiqué dans la FAQ). En outre, il s'agit d'un très petit outil, vous pouvez donc utiliser le code pour créer votre propre plugin, si vous le souhaitez.

0
Joe Bop