Benutzerdefinierte Suche für deinen WordPress Blog

Geschrieben in Wordpress am 13.01.2010

Benutzerdefinierte Suche für deinen WordPress Blog

Dass die interne WordPress Suchfunktion nicht sehr funktionstüchtig und flexibel ist, ist leider kein Geheimnis in der WordPress Nutzer-Szene. Aus diesem Grund möchte ich dir gern eine Alternative für deinen Blog vorstellen: Die Benutzerdefinierte Suche von Google.

Benutzerdefinierte Suche von Google

Google bietet mit der Benutzerdefinierten Suche ein mächtiges Tool für die interne oder die externe Suche auf ausgewählten Domains oder einzelnen Portalen. Wie man die Suchfunktion von Google in sein WordPresstheme integriert, möchte ich dir in diesem Artikel einmal genauer vorstellen.

Um die Benutzerdefinierten Suche zu benutzen, geh bitte wie folgt vor:

  1. Melde dich auf Google’s Benutzerdefinierten Suche an (Voraussetzung: Du brauchst einen Google Account. Solltest du noch keinen Google Account haben, kannst du dich hier registrieren)
  2. Gib deiner Suchmaschine einen Namen und eine kurze Beschreibung
  3. In dem Feld “Wo wollen Sie suchen?” wählst du “” und trägst in das darunter liegende Feld deine Domain(s) ein, die durchsucht werden sollen
  4. Wähle die Standard Edition (kostenlos)
  5. Bestätige die Nutzungsbedingungen und klicke auf “weiter”

Hast du alles richtig gemacht, sollte dich Google auf die Übersichtsseite der Benutzerdefinierten Suche leiten.

Benutzerdefinierte Suche optimieren

Nun hast du den ersten Teil deiner Benutzerdefinierten Suche für WordPress erledigt. Im nächsten Schritt geht es darum, die Suche zu integrieren und optisch an dein WordPress Theme anzupassen. Google gibt dir dafür die Möglichkeit, im Auswahlmenü “Aussehen & Verhalten” die Linkfarben, Hintergrundfarbe, Text und Rahmenfarbe an dein WordPress Theme anzupassen.

Integration in WordPress

Wenn du mit dem Design deiner Benutzerdefinierten Suche zufrieden bist, kannst du über den Link “Code abrufen”, den Quellcode für die Integration abrufen. Dort gibt es die Möglichkeit die Suchergebnisse via Iframe, AJAX Overlay oder auf einer von Google gehosteten Seite anzeigen zu lassen. Wir entscheiden uns jedoch in diesem Beispiel für die Iframe Variante.

Dazu gibst du die URL auf deiner Website an, auf der die Suchergebnisse angezeigt werden sollen und kopierst im Anschluß die beiden Codestücke in dein Theme. Der erste Code-Teil ist dazu da, das Suchfeld anzeigen zu lassen – in meinem Theme findest du das Suchfeld im übrigen in der Sidebar. Prinzipiell ist es aber selbstverständlich dir überlassen, wo du diesen Code einbaust und verwendest.

Der zweite Code-Teil erzeugt das Iframe, in dem die Suchergebnisse abgebildet werden sollen. Dieser Code gehört auf die URL bzw. Seite, die du als Ergebnisseite definiert hast. Wenn du den Code im WYSIWYG Editor von WordPress in deine Seite kopierst, denke bitte daran, vorher in die HTML Ansicht zu schalten, da dein Editor ansonsten das Javascript und HTML nicht als Code einbindet.

Wenn du beide Code-Teile richtig integriert hast, sollte deine Suche bereits funktionieren. Probier es einfach mal aus!

P.S. Unter dem Punkt “Verdienen Sie Geld”, kannst du dein Adsense-Konto mit der Suche verbinden lassen. Sollte ein User nun nach einer Suche auf eine Werbeanzeige klicken, verdienst du automatisch mit jedem Klick.

Deine Erfahrungen mit der Benutzerdefinierten Suche

Hast du auch Erfahrungen mit der Benutzerdefinierten Suche oder verwendest du sie bereits in einer anderen Form? Dann würde ich mich über einen Kommentar mit Tipps und Erfahrungen sehr freuen.

Findest du den Artikel gut? Dann sags doch weiter!

8 Kommentare zu "Benutzerdefinierte Suche für deinen WordPress Blog"

Comment by robert
vom 14.January 2010:

schöne übersicht. war sehr interessant und nützlich für mich.

lg robert

Comment by tom
vom 21.January 2010:

guter Artikel, werde mir die Seite bookmarken, um bei späteren Projekten mit wordpress die Google Suche einbinden.

Comment by Lexxy
vom 1.March 2010:

Hallo!

Eine tolle Anleitung hast du da geschrieben. Es klingt immer so schön einfach. Auch in anderen Anleitungen zu diesem Thema.
Genau so wie du es beschreibst habe ich es schon gefühlte 1000mal probiert und werde bald wahnsinnig :-/ ….
Denn immer wenn ich den Code für das Suchfeld in WordPress einbinde, löscht es den Code automatisch. Ich habe es im Content und im Text-Widget probiert, aber nix…
Kann mir vielleicht jemand bei diesem Problem helfen? Vielen Dank im Voraus!!

Comment by Phil
vom 11.April 2010:

Hi…

ich bin gerade drum und dran diese Suche auch in meinem Blog einzubinden. Wie du habe ich die iframe Variante ausgewählt. Das funktioniert auch soweit, jedoch werden die Suchergebnisse zu groß angezeigt. Also mit einer width: 700irgendwas. Dabei ist mein Main-content nur vielleicht 400px.

Ich habe keine möglichkeit gefunden, die width bei den Suchergebnissen zu korregieren.

Die Custom Search Element Variante funktioniert bei mir nicht.

Im suchergebnisCode gibt es die Zeile:
var googleSearchFrameWidth = 600;
Jedoch bringt es nicht daran etwas zu ändern.

Danke für jede Hilfe meines Problemes

Weißt du eine Lösung für mein Problem?

Comment by Andre
vom 11.April 2010:

Servus Phil,

also ich habe bei meiner Einbindung auch lediglich die Pixelanzahl von 700 auf 570 Pixel reduziert und, wie du siehst, funktioniert alles.

Probier es nochmal aus ;-)

Comment by Marc
vom 3.May 2010:

Das Problem dabei ist nur, dass die Suchenenden immer Werbung angezeigt bekommen. Oder kann man das Ausschalten?

Comment by Andre
vom 3.May 2010:

Das kann man deaktivieren – jedoch kostet es ein paar Dollar im Jahr für die Google Suche ohne Werbung.

Ansonsten hat man eine weitere Werbefläche auf seiner Seite, da man die Suche mit seinem Adsensekonto verbinden kann.

Comment by Agorakis
vom 10.May 2010:

Bei Deiner Suchleiste ist rechts vom “Suche”-Button kein “x”, um die Suchergebnisse zurückzusetzen. Wie hast Du das gemacht? Google gibt mir ein solches hässliches x vor?

SPAM-Schutz: 6+7= :(