WordPress Menüs mit Suchfunktion erweitern

In diesem Beitrag zeige ich zwei Plugins, mit denen du die Navigation deiner Website mit der WordPress Suche erweitern kannst. Beide Plugins erlauben dir, die Suchfunktion einem bestehenden WordPress Menü hinzuzufügen, haben dabei aber verschiedene Ansätze.

Abhängig von der jeweiligen Website und deren Inhalt ist eine Suchfunktion für Besucher mehr oder weniger wichtig. Ein Suchfeld an prominenter und leicht auffindbarer Stelle bietet sich insbesondere an, wenn die Suche relativ häufig bemüht werden soll.

Grundsätzlich kann die WordPress Suche als Widget in jeder Sidebar angezeigt werden. Manche Themes erlauben auch ein Suchformular im Header der Website – entweder als eigenes Theme Feature oder etwa über einen Widget-Bereich im Header.

Wem diese Möglichkeiten fehlen, der kann mit zusätzlichen Plugins die WordPress Suche auch in der Navigation hinzufügen, indem ein ausgewähltes WordPress Menü mit einem Suchfeld erweitert wird.

In diesem Beitrag stelle ich zwei Plugins mit unterschiedlichen Ansätzen dafür vor.

WordPress Menü mit Suchfeld erweitern

Das erste von mir getestete Plugin ist Bop Search Box Item Type For Nav Menus:

Das Plugin fügt im Adminbereich neben den Menü-Elementen wie beispielsweise statische Seiten oder Kategorien ein neues Menü-Element Search Box zur Anzeige der Suchfunktion hinzu:

Damit kann die Suche in beliebig vielen Menüs eingefügt werden. Die Beschriftung des Menüpunkts wird später im Submit Button der Suche genutzt.

Das Plugin zeigt nun das normale Formular der WordPress Suche mit Eingabefeld und Button im Menü an.

Sehr häufig ist das Styling des Themes nicht auf ein Suchfeld in der Navigation ausgelegt. Ob das Plugin mit dem Theme harmoniert, kann nur durch Ausprobieren und Testen festgestellt werden. Eventuell muss das Plugin mit eigenem CSS Code etwas angepasst werden.

Für TwentySeventeen habe ich in meinen Tests das Suchfeld mit diesem CSS Schnipsel verwendet:

.main-navigation li.bop-nav-search {
	float: right;
	margin: 0.5em 0;
}

form.bop-nav-search div #s {
	display: inline-block;
	max-width: 180px;
	padding: 0.2em 0.6em 0.4em;
}

Das Ergebnis:

WordPress Suche mit Content Overlay hinzufügen

Das zweite Plugin TB Search in Menu hat einen etwas anderen Ansatz.

Es zeigt statt einem Suchfeld einen normalen Menü-Link für die Suchfunktion in der Navigation an. Mit dem Klick darauf wird ein Overlay über den kompletten Bildschirm geöffnet, und das Suchwort kann eingegeben werden.

Das Plugin steht ebenfalls im WordPress Plugin Verzeichnis zum Download bereit:

Die Informationen auf der Plugin Seite sind leider etwas spärlich.

Deshalb hat es eine Weile gedauert, bis ich die Einstellungen des Plugins gefunden habe. Diese befinden sich in einer neuen Sektion im Customizer:

In den Optionen muss zuerst ein Menü ausgewählt werden, in dem die Suchfunktion hinzugefügt werden soll. Darüber hinaus können Beschriftung und Farben der Suche definiert werden.

Durch die Gestaltung des Plugins kann die Suche aber nur in einer einzigen Navigation hinzugefügt werden. Der Link für die Suche wird ebenfalls immer als letztes Menü-Element angehängt.

Die Suchfunktion ist ein normaler Link im Menü und sollte deshalb problemlos mit jedem Theme funktionieren, ohne das eigene Anpassungen mit CSS notwendig sind.

Nach dem Klick auf Suche öffnet sich das Overlay und der Besucher kann das Suchwort eingeben:

Das Overlay für die Suche kann mit einem Close-Button oder mit der Escape Taste geschlossen werden.

Fazit

Beide Plugins eignen sich, um die WordPress Suchfunktion in einem Navigationsmenü hinzuzufügen. Welcher Ansatz vielversprechender ist, liegt an den eigenen Präferenzen und dem Zusammenspiel der Plugins mit dem eingesetzten Theme.

Ich empfehle, einfach beide Plugins auszuprobieren.