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 und benutzerfreundlicher 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, egal ob Sie ein Plugin verwenden oder benutzerdefinierten Code hinzufügen möchten.

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, scannen sie die Ergebnisse nach diesen genauen Wörtern. Wenn nichts hervorsticht, übersehen 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 ähnlich 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
• Methode 2: Suchbegriffe mit benutzerdefiniertem Code hervorheben – Kostenlos
• Bonus: Machen Sie Ihre Suche mit Live Ajax Search noch schneller 🚀
• FAQs: Suchbegriffe in WordPress hervorheben

Methode 1: Suchbegriffe mit SearchWP hervorheben – Empfohlen

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

Meiner Meinung nach ist SearchWP eines der besten Tools zur Verbesserung der Sucherfahrung 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 Überprüfung 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 unter wie man ein WordPress-Plugin installiert.

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: wie Sie die WordPress-Suche mit SearchWP verbessern.

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 noch kein Suchformular auf Ihrer Website 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 begrenztes Budget haben, ist SearchWP möglicherweise nicht die richtige Wahl, da der kostenlose Plan diese Funktion nicht beinhaltet.

Die gute Nachricht ist, dass Sie Suchbegriffe immer noch hervorheben können, indem Sie einen PHP-Code-Schnipsel zu Ihrer Website-Datei functions.php hinzufügen.

Der Hauptunterschied liegt in der langfristigen Wartung. Ein Plugin wie SearchWP wird regelmäßig von seinen Entwicklern aktualisiert, um die Kompatibilität mit neuen WordPress-Versionen sicherzustellen.

Mit einem benutzerdefinierten Code-Snippet sind Sie jedoch dafür verantwortlich, sicherzustellen, dass es auch nach zukünftigen Updates weiterhin korrekt funktioniert.

Allerdings kann die direkte Bearbeitung von Theme-Dateien auch riskant sein.

Selbst ein kleiner Fehler kann Ihre Website zum Absturz bringen und Sie aus dem Admin-Dashboard aussperren. Dies wird oft als der 'White Screen of Death' bezeichnet, und es kann stressig sein, ihn zu beheben, wenn Sie kein Entwickler sind.

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

Dies liegt daran, dass WPCode Ihre Snippets in einer separaten, sicheren Umgebung ausführt. Dies verhindert, dass ein Tippfehler Ihre Website zum Absturz bringt, und erleichtert das Ein- oder Ausschalten von Snippets mit einem Schalter.

Außerdem funktioniert die kostenlose Version perfekt für diese Methode.

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 unserem Tutorial folgen unter So fügen Sie ein Suchformular in WordPress ein.

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 ähnlich 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.

Um dies einzurichten, empfehle ich das Plugin SearchWP Live Ajax Lite Search, das hervorragend mit dem Premium-Tool SearchWP funktioniert.

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? Schauen Sie sich unser vollständiges Tutorial an, wie Sie Live-Ajax-Suche zu Ihrer WordPress-Website hinzufügen.

FAQs: Suchbegriffe in WordPress hervorheben

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 zusammen mit dem SearchWP Live Ajax Lite Search Plugin verwenden, werden die hervorgehobenen Begriffe auch in den Live-Suchergebnissen angezeigt – ohne Neuladen der Seite.

Da beide Tools vom selben Team entwickelt wurden, arbeiten sie sofort nahtlos zusammen.

Wenn Sie jedoch ein anderes Live-Such-Plugin oder eine benutzerdefinierte AJAX-Suchkonfiguration verwenden, müssen Sie die Kompatibilität testen.

Nicht alle Plugins unterstützen die Hervorhebung von Begriffen in dynamischen Ergebnissen. Daher ist es eine gute Idee, zuerst auf einer Staging-Site zu testen, um sicherzustellen, dass alles korrekt angezeigt wird.

Beeinflussen diese Hervorhebungsfunktionen die Leistung oder die Seitengeschwindigkeit?

Nicht wirklich. Beide von mir behandelten Methoden – die Verwendung von SearchWP und das Hinzufügen von benutzerdefiniertem Code mit WPCode – sind leichtgewichtig und für die Leistung optimiert.

Die Hervorhebung selbst läuft im Frontend, sodass sie Ihren Server nicht stark belastet.

Wenn Ihre Website jedoch eine große Anzahl von Suchergebnissen oder ein starkes benutzerdefiniertes Styling aufweist, ist es immer eine gute Idee, die Dinge zuerst zu testen. Ich empfehle, es in einer Staging-Umgebung auszuprobieren, um sicherzustellen, dass die Hervorhebung gut aussieht und reibungslos funktioniert, bevor Sie sie live schalten.

Funktioniert die Hervorhebung von Suchbegriffen mit benutzerdefinierten Beitragstypen oder WooCommerce?

Ja, absolut! Wenn Sie SearchWP verwenden, ist es so konzipiert, dass es sofort perfekt mit benutzerdefinierten Beitragstypen und WooCommerce-Produkten funktioniert. Es gibt Ihnen die volle Kontrolle darüber, was durchsucht wird, einschließlich Produkt-SKUs und benutzerdefinierter Felder.

Das benutzerdefinierte Code-Snippet aus Methode 2 kann auch für benutzerdefinierte Beitragstypen funktionieren, solange Ihr Theme Standard-WordPress-Funktionen wie the_title() zur Anzeige von Inhalten verwendet. Für die zuverlässigsten und leistungsstärksten Ergebnisse, insbesondere bei einem E-Commerce-Shop, ist SearchWP jedoch die beste Lösung.

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 Thema Erstellen einer intelligenten WooCommerce-Produktsuche und unser Tutorial zum Thema Hinzufügen von Sprachsuchfunktionen zu Ihrer WordPress-Website lesen.

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.