So heben Sie Suchbegriffe in den Ergebnissen in WordPress hervor (2 Methoden)

Denken Sie daran, wann Sie das letzte Mal etwas auf einer Website gesucht haben. Sie haben wahrscheinlich die Ergebnisse nach Ihren Schlüsselwörtern durchsucht, richtig? 🔍

Genau das tun Ihre Website-Besucher, wenn sie Ihre Website durchsuchen. Nur dass WordPress diese Begriffe standardmäßig nicht hervorhebt.

Das Einrichten hervorgehobener Suchbegriffe ist eine dieser einfachen Verbesserungen, die Ihre Website sofort polierter erscheinen lassen.

Wenn Besucher schnell sehen können, warum jedes Ergebnis ihrer Suche entspricht, ist die Wahrscheinlichkeit höher, dass sie darauf klicken und sich mit Ihren Inhalten beschäftigen.

Im Laufe der Jahre beim Erstellen und Verwalten von WordPress-Websites habe ich festgestellt, dass diese kleinen Verbesserungen der Benutzererfahrung eine große Wirkung haben können. 📝

Deshalb führe ich Sie durch 2 einfache Möglichkeiten, Suchbegriffe auf Ihrer WordPress-Website hervorzuheben.

Warum sollte ich Suchbegriffe auf meiner Website hervorheben?

Das Hervorheben von Suchbegriffen hilft Besuchern, die gesuchten Inhalte schnell zu erkennen.

Wenn Benutzer ein Schlüsselwort in die Suchleiste Ihrer Website eingeben, überfliegen sie die Ergebnisse nach genau diesen Wörtern. Wenn nichts hervorsticht, überspringen sie möglicherweise nützliche Inhalte, ohne es zu merken.

Indem Sie ihre Suchbegriffe hervorheben, machen Sie die Ergebnisse leichter lesbar und zeigen sofort, welche Artikel am relevantesten sind.

Dies verbessert die Benutzererfahrung, hilft Besuchern, Informationen schneller zu finden, und versichert ihnen, dass sie am richtigen Ort sind. Es kann Benutzer sogar dazu ermutigen, länger auf Ihrer Website zu bleiben.

Bei WPBeginner machen wir die übereinstimmenden Schlüsselwörter in unseren Suchergebnissen fett – es funktioniert genau wie Hervorheben. Es ist eine kleine Geste, aber sie hilft den Leuten wirklich, schneller zu finden, wonach sie suchen.

Nichtsdestotrotz zeige ich Ihnen, wie Sie Suchbegriffe in WordPress einfach hervorheben können. Ich werde 2 Methoden besprechen. Sie können die untenstehenden Links verwenden, um zur gewünschten Methode zu springen.

Methode 1: Suchbegriffe mit SearchWP hervorheben – Empfohlen

Wenn Sie nach einer schnellen, problemlosen Möglichkeit suchen, Suchbegriffe in Ihren WordPress-Ergebnissen hervorzuheben, dann ist die Verwendung von SearchWP Ihre beste Wahl.

SearchWP ist das beste Werkzeug zur Verbesserung des Sucherlebnisses Ihrer Website.

Es liefert Ihnen weitaus relevantere Ergebnisse als die Standard-WordPress-Suche, und das Beste daran? Es macht das Hervorheben von Suchbegriffen unglaublich einfach. Sie schalten einfach einen Schalter um, und es ist erledigt.

Ich habe SearchWP auf unserer Demoseite gründlich getestet und die Ergebnisse waren beeindruckend. Es funktioniert nahtlos und die integrierte Hervorhebungsfunktion spart im Vergleich zur manuellen Einrichtung eine Menge Zeit.

Wir haben auch eine vollständige Bewertung von SearchWP, wenn Sie alle seine Funktionen und seine Funktionsweise sehen möchten.

Zuerst müssen Sie das SearchWP-Plugin installieren und aktivieren. Schritt-für-Schritt-Anleitungen finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.

Sobald Sie das Plugin aktiviert haben, gehen Sie in Ihrem WordPress-Dashboard zu SearchWP » Einstellungen.

Hier müssen Sie Ihren Lizenzschlüssel eingeben.

Sie finden diesen Lizenzschlüssel in Ihrem Konto auf der SearchWP-Website. Kopieren und fügen Sie ihn einfach ein.

Scrollen Sie danach nach unten zu „Allgemeine Einstellungen“ und schalten Sie den Schalter „Begriffe hervorheben“ auf „Ein“.

Sobald es aktiviert ist, werden alle von Ihren Besuchern verwendeten Schlüsselwörter automatisch in den Suchergebnissen hervorgehoben, sodass relevante Inhalte super einfach zu finden sind.

In diesem Abschnitt finden Sie auch zusätzliche Einstellungen, die Ihre Suchergebnisse verbessern können.

Funktionen wie Fuzzy Search und Quoted Search sind besonders hilfreich für WordPress-Blogs mit vielen Inhalten.

Diese Funktion ermöglicht es Besuchern, die richtigen Inhalte zu finden, auch wenn sie einen kleinen Tippfehler machen. Dies kann verhindern, dass sie auf einer frustrierenden Seite mit der Meldung „Keine Ergebnisse gefunden“ landen.

Andererseits ermöglicht die Anführungszeichen-Suche den Benutzern, nach einer exakten Phrase zu suchen, indem sie diese in Anführungszeichen setzen, genau wie bei Google.

Denken Sie daran, dass alle Ihre Einstellungen automatisch gespeichert werden.

Sobald Sie mit Ihren allgemeinen Einstellungen zufrieden sind, ist es eine gute Idee, die übrigen Anpassungsoptionen von SearchWP zu erkunden.

Sie können auf der Seite SearchWP » Algorithmus in Ihrem Dashboard feinabstimmen, wie Suchergebnisse rangiert werden.

Dieser Abschnitt ist wirklich hilfreich, da er Ihnen die Kontrolle über das Gewicht (die Wichtigkeit) verschiedener Teile Ihres Inhalts ermöglicht – stellen Sie es sich wie ein Punktesystem für Ihre Suchergebnisse vor.

Wenn beispielsweise Titeln mehr Gewicht verliehen wird, bedeutet dies, dass Übereinstimmungen im Beitragstitel höher erscheinen als Übereinstimmungen im Hauptinhalt. So erscheinen die relevantesten Inhalte zuerst.

Wenn Sie auf die Schaltfläche „Quellen & Einstellungen“ klicken, können Sie auch entscheiden, was in Ihren Suchindex aufgenommen werden soll.

Anstatt nur Beiträge und Seiten können Sie Kommentare, benutzerdefinierte Beitragstypen, WooCommerce-Produkte, SKUs und mehr hinzufügen.

Wenn Sie einen Blog oder einen Online-Shop betreiben, macht dies Ihre Suche weitaus nützlicher.

Zum Beispiel kann es einem Kunden helfen, ein Produkt anhand seiner SKU zu finden, wie z. B. „TSHIRT-BLUE-LG“, was die Standard-WordPress-Suche nicht könnte.

Wir haben auch einen vollständigen Leitfaden zusammengestellt, wie Sie die WordPress-Suche mit SearchWP verbessern können, wenn Sie tiefer eintauchen möchten.

Sobald Sie Ihre Einstellungen gespeichert haben, übernimmt SearchWP automatisch Ihr bestehendes Suchformular. Keine zusätzlichen Schritte erforderlich.

Gehen Sie einfach auf Ihre Website und führen Sie eine schnelle Suche durch. Sie sehen die hervorgehobenen Schlüsselwörter sofort.

Wenn Sie Ihrer Website noch kein Suchformular hinzugefügt haben, machen Sie sich keine Sorgen. Sie können unserer Schritt-für-Schritt-Anleitung folgen, wie Sie ein Suchformular in WordPress hinzufügen.

Sobald dies eingerichtet ist, sind Sie fertig und Ihre Besucher genießen von Anfang an ein viel besseres Sucherlebnis.

Methode 2: Suchbegriffe mit benutzerdefiniertem Code hervorheben – Kostenlos

Wenn Sie ein knappes Budget haben, können Sie benutzerdefinierten Code verwenden, um Suchbegriffe hervorzuheben. Dies beinhaltet normalerweise die direkte Bearbeitung Ihrer Theme-Dateien.

Selbst ein kleiner Fehler kann jedoch Ihre Website zum Absturz bringen und den „White Screen of Death“ verursachen.

Deshalb empfehle ich stattdessen die Verwendung von WPCode. Es ist das beste WordPress-Plugin für Code-Snippets und der sicherste Weg, benutzerdefinierten Code hinzuzufügen, ohne Ihre Theme-Dateien zu berühren.

Ich habe WPCode in verschiedenen Setups gründlich getestet und es funktioniert jedes Mal zuverlässig. Wenn Sie neugierig auf alles sind, was es bietet, haben wir auch eine detaillierte WPCode-Bewertung, die Sie sich später ansehen können.

Aber lassen Sie uns jetzt durchgehen, wie Sie damit Suchbegriffe auf Ihrer Website hervorheben können.

Zuerst müssen Sie das WPCode-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Nachdem Sie das Plugin aktiviert haben, besuchen Sie die Seite Code-Snippets » + Snippet hinzufügen im Dashboard.

Klicken Sie hier auf die Schaltfläche „+ Benutzerdefiniertes Snippet hinzufügen“ unter der Option „Ihren benutzerdefinierten Code hinzufügen (Neues Snippet)“.

Sie werden nun zu einem neuen Bildschirm weitergeleitet, auf dem Sie 'PHP Snippet' als Code-Typ auswählen müssen. Sobald dies geschehen ist, geben Sie Ihrem Code-Snippet einen Namen.

Dieser Name wird für Ihre Besucher nicht sichtbar sein – er dient nur Ihrer eigenen Referenz. Deshalb empfehle ich, etwas Beschreibendes wie Suchbegriffe hervorheben oder etwas anderes zu verwenden, das die Erkennung erleichtert.

Es hilft Ihnen, das Snippet später schnell zu finden und zu verwalten, falls Sie es bearbeiten oder deaktivieren möchten.

Kopieren Sie danach den folgenden benutzerdefinierten Code und fügen Sie ihn in das Feld „Code-Vorschau“ ein.

Dieser Code funktioniert, indem er die Schlüsselwörter findet, nach denen Ihr Besucher gesucht hat. Dann werden diese Schlüsselwörter in ein spezielles Tag eingeschlossen, das einen farbigen Hintergrund hinzufügt.

// Highlight terms in titles
add_filter('the_title', 'highlight_search_terms_in_title', 10, 2);

// Highlight terms in excerpts
add_filter('the_excerpt', 'highlight_search_terms_in_excerpt');

// Optional: Highlight terms in content (if you're using the_content() in search results)
add_filter('the_content', 'highlight_search_terms_in_excerpt');

// Common highlight logic
function highlight_search_terms($text) {
    if (!is_admin() && is_search() && is_main_query()) {
        $search_query = get_search_query();

        // Output the CSS only once
        if (!defined('HIGHLIGHT_SEARCH_TERM_CSS')) {
            define('HIGHLIGHT_SEARCH_TERM_CSS', true);
            add_action('wp_head', function () {
                echo '<style>
                    strong.search-excerpt {
                        background-color: yellow;
                        color: black;
                        font-weight: bold;
                        padding: 0 2px;
                        border-radius: 2px;
                    }
                </style>';
            });
        }

        if (!empty($search_query)) {
            $keys = preg_split('/\s+/', $search_query);
            foreach ($keys as $key) {
                if (!empty($key)) {
                    $text = preg_replace('/(' . preg_quote($key, '/') . ')/iu', '<strong class="search-excerpt">$1</strong>', $text);
                }
            }
        }
    }

    return $text;
}

// Apply highlight logic to title and excerpt/content
function highlight_search_terms_in_title($title, $post_id) {
    return highlight_search_terms($title);
}

function highlight_search_terms_in_excerpt($excerpt) {
    return highlight_search_terms($excerpt);
}

Nachdem Sie den Code eingefügt haben, scrollen Sie im Snippet nach unten, um den Styling-Bereich zu finden. Sie sehen ihn im echo '<style> ... </style>'; Block. Die spezifische Zeile, die Sie ändern möchten, ist:

                        background-color: yellow;

Standardmäßig setzt das Plugin die Hintergrundfarbe des hervorgehobenen Begriffs auf Gelb mit schwarzem Text. Sie können dies jedoch einfach ändern, indem Sie diese Zeile bearbeiten.

Ersetzen Sie einfach yellow durch den Hex-Code für eine beliebige Farbe, die Sie bevorzugen. Um beispielsweise die Hervorhebung in ein Hellblau zu ändern, könnten Sie #aeeffc verwenden. Achten Sie darauf, das Semikolon am Ende beizubehalten!

Ich empfehle, eine Hintergrund- und Textfarbe zu wählen, die zum Stil Ihrer Marke passt, damit sie sich gut in den Rest Ihrer Website einfügt.

Sie können auch die Schriftstärke, den Randradius und den Abstand in diesem Abschnitt anpassen, um das Aussehen der Hervorhebungsbox zu optimieren.

Wenn Sie mit dem Styling zufrieden sind, scrollen Sie zurück nach oben, schalten Sie den Schalter von 'Inaktiv' auf 'Aktiv' um und klicken Sie auf die Schaltfläche 'Snippet speichern', um Ihre Einstellungen zu speichern.

Wenn Ihre Website bereits ein Suchformular hat, beginnt der Ausschnitt sofort zu funktionieren und hebt Suchbegriffe automatisch hervor.

Wenn Sie noch kein Suchformular hinzugefügt haben, können Sie unserer Anleitung folgen, wie Sie ein Suchformular in WordPress hinzufügen.

Besuchen Sie schließlich Ihre Website, führen Sie eine schnelle Suche durch und Sie werden Ihre neu hervorgehobenen Begriffe in Aktion sehen.

Bonus: Machen Sie Ihre Suche mit Live Ajax Search noch schneller 🚀

Sobald Sie die Hervorhebung von Suchbegriffen hinzugefügt haben, möchten Sie vielleicht noch einen Schritt weiter gehen, indem Sie Ergebnisse anzeigen, während Besucher tippen.

Dies nennt man Live- Ajax-Suche und sie funktioniert genau wie die Autovervollständigung von Google. Sie liefert sofortige Vorschläge, ohne dass die Seite neu geladen werden muss.

Es ist eine großartige Möglichkeit, Ihre Website schneller und interaktiver zu gestalten. Besucher können fast sofort finden, wonach sie suchen, was wahrscheinlich das Engagement steigert.

Für die Einrichtung empfehle ich das Plugin SearchWP Live Ajax Lite Search, das hervorragend mit dem Premium-Tool SearchWP zusammenarbeitet.

Es ist kostenlos, funktioniert nahtlos mit den meisten WordPress-Themes und erledigt alles automatisch. Ich habe es gründlich getestet, und es liefert immer eine bessere und schnellere Sucherfahrung.

Installieren Sie das Plugin einfach wie jedes andere WordPress-Plugin, aktivieren Sie es und aktivieren Sie dann die Live-Suche in den SearchWP-Einstellungen.

Sie können das Suchformular ganz einfach zu jedem Beitrag, jeder Seite, Sidebar oder jedem Widget-Bereich hinzufügen.

Benötigen Sie Hilfe beim Einstieg? Sehen Sie sich unser vollständiges Tutorial an, wie Sie Live-Ajax-Suche zu Ihrer WordPress-Website hinzufügen.

Häufig gestellte Fragen zum Hervorheben von Suchbegriffen in WordPress

Hier sind einige Fragen, die mir häufig zum Hervorheben von Suchbegriffen in WordPress gestellt werden:

Kann ich Begriffe in AJAX- oder Live-Suchergebnissen hervorheben?

Ja. Wenn Sie SearchWP in Kombination mit dem SearchWP Live Ajax Search-Plugin verwenden, werden hervorgehobene Begriffe automatisch in den Live-Dropdown-Ergebnissen angezeigt. Kein Seitenneuladen erforderlich.

Wenn Sie ein anderes Live-Such-Plugin oder ein benutzerdefiniertes AJAX-Setup verwenden, müssen Sie möglicherweise manuell CSS-Klassen zu Ihrer Suchergebnisvorlage hinzufügen, um die Hervorhebung zu aktivieren.

Beeinflussen diese Hervorhebungsfunktionen die Leistung oder die Seitengeschwindigkeit?

Nein, das Hervorheben von Suchbegriffen hat nur geringe Auswirkungen auf die Leistung der Website. Sowohl die SearchWP-Methode als auch die benutzerdefinierte Code-Methode laufen im Frontend (Client-seitig) und sind sehr schlank.

Sie erhöhen weder die Serverlast noch die Datenbankabfragezeiten. Ich empfehle jedoch immer, neue Funktionen zuerst auf einer Staging-Website zu testen, um sicherzustellen, dass sie mit Ihrem spezifischen Theme korrekt angezeigt werden.

Funktioniert die Hervorhebung von Suchbegriffen mit benutzerdefinierten Beitragstypen oder WooCommerce?

Ja. SearchWP ermöglicht es Ihnen, die Hervorhebung für benutzerdefinierte Beitragstypen, WooCommerce-Produkte und sogar Produkt-SKUs zu aktivieren. Es bietet die volle Kontrolle darüber, welche Inhaltstypen indiziert und hervorgehoben werden.

Die benutzerdefinierte Code-Methode (Methode 2) funktioniert auch für benutzerdefinierte Beitragstypen, vorausgesetzt, Ihr Theme verwendet Standard-WordPress-Funktionen wie the_title() und the_excerpt() zur Anzeige der Ergebnisse.

Ich hoffe, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Suchbegriffe in WordPress-Ergebnissen einfach hervorheben können. Möglicherweise möchten Sie auch unseren ultimativen Leitfaden zum Erstellen einer intelligenten WooCommerce-Produktsuche und unser Tutorial zum Hinzufügen von Sprachsuchfunktionen zu Ihrer WordPress-Website sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.