navileiste erweitern mit Suchfunktion

gericoach

Wie kann ich die Suchfunktion in die Navileiste einbauen? Meine bisherigen Versuche waren erfolglos, die Suche innerhalb der "nav" tags war ohne Erfolg. Denke, die Zeile sollte reichen:

PHP

<?php get_search_form( $echo ); ?>

Aber wo genau muss die rein? Hat jemand einen Ansatz oder nen Link für mich?

Hier ist der Headercode, der m.E.n. in Frage kommt:

PHP

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo bloginfo('stylesheet_directory');?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" width="280" height="74"/></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </hgroup>
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
            <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>  
        </nav><!-- #site-navigation -->


        <?php $header_image = get_header_image();
        if ( ! empty( $header_image ) ) : ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
        <?php endif; ?>
    </header>

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

gericoach

Hab total vergessen zu erwähnen, dass es sich um Twentytwelve handelt...
Link zur Seite hatte ich natüelich auch verschlafen: nexia-media.com

BumbleBee

Ha, schau auf meine Seite wie es aussieht (Profil anklicken und Homepage besuchen)

Code bitte in die functions.php (ich mach das über 'code snippets', weils komfortabler ist):

Code

add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);




function add_search_form($items, $args) {
        if( $args->theme_location == 'mainmenu' ) // MENU-NAME durch den Namen im Back-End ersetzen.
            $items .= '<li class="search"><form role="search" method="get" id="searchform" action="'.home_url( '/' ).'"><input type="text" value="search" name="s" id="s" /><input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" /></form></li>';
        return $items;
}

Dann musst Du noch versuchen das Feld nach rechts auszurichten, denn momentan wird es das nicht ;-) Ich schau mir das aber gerade an.

EDIT:

jetzt für die Ausrichtung nach ganz recht:

Code

.main-navigation li:last-child {
          float: right;
          margin-right: 24px;
        position: relativ;
    }

'last-child' sorgt dafür das ausschließlich dem letzten Element andere styles zugewiesen werden.
'margin-right' kannst Du Deinen Bedürfnissen anpassen.

BumbleBee

P.S.:
Wenn Du keine voreingestellten Wörter im Suche-Feld möchtest, dann lösch folgendes raus:

Code

value="search"

Und hab ganz vergessen: Du brauchst die Ausrichtung wahrscheinlich nicht... Aber vielleicht trotzdem für andere interessant

gericoach

kurioserweise gehts so nicht, wieso auch immer... alles i.O. mit dem Code? Haste ne Idee, woran es liegen könnte?
den Menüpunkt in der style.css habe ich nicht (.main navgation li:last child...)

Mein Eintrag in der functions.php, gaaaanz unten, evtl. hab ich da was vergeigt?:

Code

/**
*suchfeld in der Navileiste
*/
add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);
function add_search_form($items, $args) {
        if( $args->theme_location == 'nexia media menu' ) // MENU-NAME durch den Namen im Back-End ersetzen.
            $items .= '<li class="search"><form role="search" method="get" id="searchform" action="'.home_url( '/' ).'"><input type="text" value="search" name="s" id="s" /><input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" /></form></li>';
        return $items;
}

BumbleBee

Hast meine Seite angeschaut?

Der Code ist sowas von in Ordnung ;-) Ist 1:1 in meiner Seite. Aber eben über das Plugin 'code snippets'. Das aber macht nichts anderes als den Code automatisch zu laden, unabhängig vom theme.

Idee: Kontrolliere wie Dein Menü heißt! Ist das wirklich mit Leerzeichen? Und warum steht oben im Ausgangscode 'primary'?

gericoach

hab das Menü umbenannt, ohne Leerzeichen. Nix.
Das "primary" setzt Twentytwelve ein, ist aber Quark, da nur ein Menü möglich ist...hab den Part rausgenommen. Werde es jetzt mit "code snippets" versuchen, da im Sourcecode der Startseite die Suchfunktion nicht erscheint, was komisch ist...
Geht auch nicht mit "code snippets" :(

BumbleBee

Gib doch einfach mal den part Deiner header.php vom Menü. Dann sag ich Dir was Du da rein schreiben musst. Also alles zwischen <nav> und </nav>

maxe

Mal naiv gefragt: Reicht es nicht, wenn du die Suche einfach vor das Menü setzt und dann floatest?

PHP

<div class="alignright"><?php get_search_form(); ?></div><?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu-header') ); ?>

BumbleBee

Dann setzt er das aber nicht in den Menü-DIV. Das bedeutet er setzt es über das Menü, weil das Menü über die gesamte Breite definiert ist. Ich hatte es auch erst probiert am Ende zu setzen. Was auch nicht wirklich ging.

gericoach

maxe: nee, hat nix gebracht. Zerlegt das Layout
BumbleBee: hier der Part der header.php (noch incl. des Codes von maxe...:

PHP

<nav id="site-navigation" class="main-navigation" role="navigation">
            <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
            <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
            <div class="alignright"><?php get_search_form(); ?><?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>  
        </nav><!-- #site-navigation -->

BumbleBee

Na dann stimmts doch, Du nutzt 'primary'! Also musst Du das statt 'mainmenu' einsetzen.

Code

add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);




function add_search_form($items, $args) {
		if( $args->theme_location == 'primary' ) // MENU-NAME durch den Namen im Back-End ersetzen.
			$items .= '<li class="search"><form role="search" method="get" id="searchform" action="'.home_url( '/' ).'"><input type="text" name="s" id="s" /><input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" /></form></li>';
		return $items;
}

gericoach

primary hatte ich wieder reingenommen. Nun gehts. Hab in dem code statt "nexia-media" "primary" eingesetzt. BINGO.

Danke Euch Beiden!!!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

navileiste erweitern mit Suchfunktion

Jetzt mitmachen!