WordPress Suchbegriffe ohne Plugin hervorheben

Wie kann ich die Suchbegriffe in den Suchergebnissen hervorheben, wie es von WordPress gezeigt wird?

Unser Ansatz:

Nun, lassen Sie mich gleich offen sein. Ich bin kein großer Fan von Plugins. Plugins erhöhen den Umfang und verlangsamen Ihre Website. In diesem Artikel gehen wir die Schritte durch, die wir unternehmen können, um die Begriffe in den Ergebnissen hervorzuheben. Wir werden darüber sprechen, wie dies sowohl im Backend als auch im Frontend gemacht wird, zusammen mit den Vor- und Nachteilen.

Was ist Hervorhebung?

Sie haben dies bei Google gesehen. Hier ist ein Screenshot, damit wir verstehen, was wir versuchen zu tun.

Oben sehen Sie den Suchbegriff “Hervorhebung” fett markiert an den Stellen, wo er vorkommt. Das ist es, was wir mit Hervorhebung meinen.

Wofür wird die Hervorhebung verwendet?

Wenn eine Person sich ein präsentiertes Ergebnis ansieht, kann sie sich möglicherweise nicht sofort damit identifizieren. Durch die Hervorhebung des Suchbegriffs zeigt das System dem Benutzer, warum es dieses Ergebnis überhaupt präsentiert hat. Dies ist besonders nützlich, wenn Sie mit mehreren Suchbegriffen suchen. Einige Ergebnisse wurden möglicherweise für ein bestimmtes Schlüsselwort präsentiert. Dies ist besonders der Fall, wenn die Suche fortgeschritten ist und semantische Synonyme, Stammformen und Präfixübereinstimmungen verwendet werden. Zum Beispiel haben Sie nach einem Welpen gesucht und die Ergebnisse zeigen eine hervorgehobene Katze an, dann können Sie schnell verstehen, warum dies präsentiert wurde. Unbescheidene Steckdose, Expertrec-Suche verfügt über alle fortschrittlichen Funktionen und hat daher standardmäßig eine ausgefeilte Hervorhebung aktiviert. Geben Sie Ihrer WordPress und Ihren Benutzern eine leistungsstarke Suche. Anmelden. Wenn Sie nicht auf WordPress sind, probieren Sie dies aus.

Lass uns an die Arbeit gehen – Option 1 in PHP.

Wenn Sie eine umfassende Einführung in die Suchfunktionalität in WordPress suchen, empfehle ich das folgende Video. (Optional, aber empfohlen).

Welche Datei soll bearbeitet werden, um die Funktionen der Suchergebnisseite zu ändern?

Wenn Sie die Suchergebnisseite ändern möchten, in diesem Fall sind wir das, der Ort zum Bearbeiten ist search.php. Diese Datei, entweder die in Ihrer Kern-WordPress-Installation oder die in Ihrem aktiven Theme, sollte bearbeitet werden. Einige Themes stellen ihre eigene search.php bereit, in diesem Fall sollten Sie diese bearbeiten.

Wenn keine vorhanden ist, in Ihrem Theme, können Sie entweder eine Datei search.php im Stamm des Themes erstellen oder die Datei in der WordPress-Installation bearbeiten.

Lassen Sie uns den Titeltext hervorheben.

In search.php finden Sie Aufrufe zur Funktion the_title wie unten oder ähnlich.

<?php the_title(); ?>

Diese Funktion soll den Titel des Beitrags abrufen. Jetzt ersetzen wir sie durch den Text, der mit der Suchanfrage hervorgehoben wird.

Zuerst müssen wir auf die zuletzt erstellte Abfrage zugreifen, die diese Ergebnismenge erstellt hat.

$keys = implode('|', array_filter(explode(' ', get_search_query())));

Die Hauptfunktion von Interesse hier ist get_search_query(). Diese Funktion ruft den Abfrageseitenzeichenfolge der letzten Suchabfrage ab. Indem wir sie mit dem ersten Parameter als Leerzeichen explodieren, tokenisieren wir sie zu Begriffen. Wir verbinden sie wieder zu einer Zeichenfolge, die durch einen “ODER” -Operator “|” für die Erstellung eines Regex-Musters getrennt ist. Dieses Muster wird zu einem beliebigen der Abfragebegriffe passen. Das array_filter vermeidet leere Zeichenfolgen als Token.

Rufen Sie den Titel ab und speichern Sie ihn in einer Variablen $title.

$title = get_the_title();

$title = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $title);

Jetzt wird der Titel durch einen HTML-Schnipsel mit dem strong-Tag und einer Klasse search-highlight ersetzt. Sie können die Hervorhebung mit CSS nach Ihren Wünschen gestalten. Anstelle von the_title() können Sie echo $title verwenden.

Einfach, der Titeltext ist jetzt hervorgehoben.

Lassen Sie uns den Auszugstext hervorheben.

Wiederholen Sie die oben genannten Schritte, verwenden Sie jedoch anstelle von get_the_title() den folgenden Code.

$excerpt = get_the_excerpt();

Dies gibt den Beispieltext (oder den Ausschnitt) des Suchergebnistextes. Führen Sie den gleichen Ersatz durch und setzen Sie ihn anstelle des Funktionsaufrufs the_excerpt ein.

Hervorhebung mit JS – Option 2

<style type="text/css" media="screen">
    .hls { background: #D3E18A; }
  </style>
  <script type="text/javascript">
  jQuery.fn.extend({
    highlight: function(search, insensitive, hls_class){
      var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g");
      return this.html(this.html().replace(regex, function(a, b, c){
        return (a.charAt(0) == "<") ? a : "<strong class=\""+ hls_class +"\">" + c + "</strong>";
      }));
    }
  });
  jQuery(document).ready(function($){
    if(typeof(hls_query) != 'undefined'){
      $("#post-area").highlight(hls_query, 1, "search-highlight");
    }
  });
  </script>

Der obige JS-Codeabschnitt markiert die Suchbegriffe mit den in der Variable hls_query gespeicherten Begriffen. Mit Ausnahme dessen handelt es sich dabei rein um clientseitigen Code. Dieser JS-Code kann entweder über die headers.php-Datei oder auf andere bevorzugte Weise hinzugefügt werden.

Wie bekomme ich die Suchabfrage auf der Zielseite?

Hierfür gibt es wieder zwei Möglichkeiten. Wenn die Hervorhebung nur für die Suchergebnisseite vorgesehen ist, wie im PHP-Abschnitt, können Sie die Funktion get_search_query() verwenden und sie in ein Skript-Tag setzen, um sie in der JS-Welt zugänglich zu machen.

$query  = attribute_escape(get_search_query());

  if(strlen($query) > 0){
    echo '
      <script type="text/javascript">
        var hls_query  = "'.$query.'";
      </script>
    ';
  }

Dies ist eine Möglichkeit, die Abfrage aus der PHP-Welt in die JS-Welt zu transportieren, um sie für die Hervorhebung zu verwenden.

Oder wenn die Seite mit zusätzlichen Parametern übergeben werden kann. Entweder Get-Params oder #-Params. Dann kann JS dies aufnehmen und für die Hervorhebung verwenden.

Zusammenfassung:

Ich hoffe, Sie haben ein umfassendes Verständnis der Methoden erhalten, die zur Hervorhebung der Suchbegriffe verwendet werden können. Bitte beachten Sie jedoch, dass diese Methoden nicht in der Lage sein werden, die Hervorhebung bei fortgeschrittenen Suchen zu bewältigen. Z. B. eine Suche nach “schnell”, wenn sie “schnellsten” zurückgibt, wird der Hervorheber damit nicht zurechtkommen. Daher handelt es sich um eine recht einfache Implementierung eines Hervorhebers. Für anspruchsvollere Suchen wird ein anspruchsvollerer Hervorheber benötigt, wie derjenige, den wir in der Expertrec-Suche verwenden. Der Hervorheber arbeitet eng mit dem Suchalgorithmus zusammen, um zu wissen, wie die Wörter mutiert werden und mit solchen Änderungen umgegangen werden können.

Wenn Sie Interesse daran haben, Ihre Website-Suche zu verbessern, können Sie unsere gehostete Suche bereits ab 9$ pro Monat ausprobieren. Hier anmelden.

Melden Sie sich bei ExpertRec an