Contao (Teil 17): Der Webseite eine Suchfunktion spendieren

Tutorials 16. August 2013 – 0 Kommentare

Wenn ihr eine Webseite betreibt, solltet ihr überlegen, ob ihr diese nicht mit einer Suchfunktion ausstatten wollt. Das gilt natürlich umso mehr, je umfangreicher die Inhalte der Webseite sind. Contao bietet die Möglichkeit, ganz einfach eine Suche in die eigene Webseite zu integrieren. Grund genug, in diesem Tutorial einen detaillierten Blick darauf zu werfen, wie sich das umsetzen lässt.

Wir empfehlen:
Contao CMS-Training

Ihr werdet jetzt Schritt für Schritt die Suchseite erstellen. Voraussetzung dafür ist natürlich das Vorhandensein einer entsprechenden Suchseite. Diese muss also zunächst einmal erstellt werden. Im Endeffekt bleibt es euch überlassen, wie ihr die Suche aufbaut. Ich werde zwei gängige Varianten beschreiben.

Zunächst wird die Suchseite im Seitenbaum erstellt. Ruft dazu Layout>Seitenstruktur auf und klickt auf Neue Seite.

Als Seitennamen kann man Suche verwenden. Nehmt außerdem die folgenden Einstellungen vor:

Seitentyp = Reguläre Seite
Nicht durchsuchen aktivieren
In der Sitemap zeigen = Nie zeigen
Seite veröffentlichen

Mit Speichern und schließen werden die Einstellungen übernommen.

Das Modul anlegen

Die Suchfunktion müsst ihr natürlich nicht selbst programmieren, das nimmt euch Contao ab. Das geschieht mittels eines Moduls vom Typ Suchmaschine. Dieses Modul muss in die gewünschte Seite eingebunden werden. Ruft dazu Layout>Themes auf und klickt bei eurem Theme auf Die Frontend-Module des Themes ID xx bearbeiten.

In dem daraufhin angezeigten Fenster wird auf Neues Modul geklickt. Dem neuen Modul weist man die folgenden Eigenschaften zu:

Titel = Die Suchfunktion
Modultyp = Anwendungen/Suchmaschine
Standard-Abfragetyp = Finde alle Wörter
Ungenaue Suche aktivieren (Hierzu noch ein Hinweis: Aktiviert man diese Option, erhöht das für gewöhnlich die Anzahl der Treffer. Sucht ein Benutzer beispielsweise nach Au, werden ihm auch Auto, Autor, Maut usw. angezeigt. Die ungenaue Suche findet also auch Wortbestandteile).

Über das Feld Kontext-Spannweite wird bestimmt, wie viele Zeichen links und rechts eines gefundenen Begriffs angezeigt werden. Hier hat sich ein Wert zwischen 40 und 50 bewährt.

Im Feld Elemente pro Seite kann man die Anzahl der angezeigten Treffer pro Seite bestimmen. Gibt es mehr Treffer, als hier angegeben wurde, fügt Contao automatisch eine Pagination ein, über die zwischen den einzelnen Trefferseiten hin- und hernavigiert werden kann.

Was ihr bei Suchformular-Layout einstellt, ist sicherlich Geschmacksache. Belässt man es bei der Voreinstellung Einfaches Formular, werden lediglich ein Eingabefeld und ein Senden-Button angezeigt.

Etwas anders stellt sich das bei der Variante Erweitertes Formular dar. Hier gibt es noch zwei zusätzliche Radio-Buttons, über die man einstellen kann, ob alle Wörter oder nur irgendein Wort gefunden werden soll.

Mit Speichern und schließen wird das Modul angelegt.

Das Modul einbinden

Das Modul wurde jetzt erstellt, im Frontend ist es allerdings noch nicht zu sehen. Dazu muss es in die zuvor erstellte Suche-Seite eingebunden werden. Das geschieht unter Inhalte>Artikel. Bei der Suche-Seite wird auf das Stiftsymbol geklickt.

In der Übersicht folgt man dem Link Neues Element. Legt anschließend die Position des neuen Elements fest. Entscheidend ist nun das Feld Elementtyp.

Unter Elementtyp wird Modul ausgewählt. Daraufhin passt sich das Dialogfenster an und das Feld Modul ist zu sehen. In diesem Feld stellt man Die Suchfunktion ein.

Mit Speichern und schließen werden die Einstellungen übernommen.

Die Suchfunktion lässt sich bereits jetzt im Frontend der Seite nutzen.

Die Suche in den Kopfbereich verlagern

Momentan muss man einem Link folgen, um das Suchformular aufzurufen. Das kann so gemacht werden, sinnvoll ist das aber nicht in jedem Fall. Persönlich finde ich es besser, wenn das Formular direkt zu sehen ist, ohne dass man einen Link anklicken muss. So etwas lässt sich ganz einfach umsetzen. Zunächst solltet ihr dafür die Suche-Seite im Menü verstecken. Erledigt wird das unter Layout>Seitenstruktur. Öffnet dort die Suche-Seite zum Bearbeiten und aktiviert die Option Im Menü verstecken.

Mit Speichern und schließen werden die Einstellungen übernommen. Ein anschließender Blick ins Frontend der Seite zeigt, dass der Link auf die Suche-Seite verschwunden ist. Jetzt muss man natürlich noch für die Anzeige des Suchfeldes sorgen. Dazu ruft man Layout>Themes auf und öffnet Die Seitenlayouts des Themes ID xx bearbeiten. Klickt anschließend das Stiftsymbol des betreffenden Seitenlayouts an. Entscheidend ist in dem sich öffnenden Fenster der Bereich Eingebundene Module.

Über die Pluszeichen lassen sich die Module duplizieren. Macht das beispielsweise bei der Zeile Artikel.

Nach dem Anklicken des Pluszeichens stellt man in der neu hinzugekommenen Reihe links Die Suchfunktion und rechts Kopfzeile ein.

Mit Speichern und schließen werden die Angaben übernommen. Ein anschließender Blick ins Frontend der Seite liefert schon einmal ein erstes Ergebnis.

Nun hat dieser Anblick natürlich – zumindest vom ästhetischen Standpunkt aus gesehen – durchaus noch Luft nach oben. Durch die folgenden Einstellungen werden Suchfeld und Schaltfläche im rechten Bereich des Headers angezeigt. So habt ihr dann links noch ausreichend Platz, um beispielsweise ein Logo einzubinden.

Die optischen Anpassungen lassen sich wieder per CSS vornehmen. Werft dafür einen Blick in den im Frontend generierten Quellcode.

<header id="header">
 <div class="inside">
 <div class="mod_search block">
 <form action="index.php/" method="get">
 <div class="formbody">
 <label for="ctrl_keywords_5" class="invisible">Suchbegriffe</label>
 <input type="search" name="keywords" id="ctrl_keywords_5" class="text" value="">
 <input type="submit" id="ctrl_submit_5" class="submit" value="Suchen">
 </div>
 </form>
 </div>

Entscheidend sind die ID header und die Klasse mod_search. Darüber lässt sich die gewünschte rechtsbündige Ausrichtung ganz einfach realisieren.

#header .mod_search {
 position: absolute;
 right: 0;
 align: right;
 bottom:0px;
 line-height:60px;
 }
 #container{
 margin-top:60px;
 }

Wichtig ist die CSS-Eigenschaft right. Denn über die wird die Startposition des Elements von rechts festgelegt. Und diese Startposition wurde im vorherigen Beispiel auf 0 gesetzt, wodurch das Element tatsächlich ganz rechts angezeigt wird.

Was man jetzt noch machen kann, ist die Gestaltung der Schaltfläche. Hier könnt ihr eurer Phantasie natürlich absolut freien Lauf lassen. Ich habe mich für folgende Syntax entschieden.

.submit {
 background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
 background: -moz-linear-gradient(top, #dddddd, #bbbbbb);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#bbbbbb'); /* IE6 & IE7 */
 -ms-filter: "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#bbbbbb')"; /* IE8 */ 
}

Das Ergebnis ist eine Schaltfläche, auf der ein Farbverlauf zu sehen ist.

Gerade auch hinsichtlich der Gestaltung von Schaltflächen hat CSS3 eine ganze Menge zu bieten. Ihr müsst dafür übrigens nicht manuell die CSS-Syntax eintippen. Mittlerweile gibt es zahlreiche Button-Generatoren, die euch diese Arbeit abnehmen. Einen davon findet ihr beispielsweise auf der Seite http://www.cssbuttongenerator.com/.

Problematisch ist die Suchfunktion momentan noch, da die Ergebnisse direkt im Kopfbereich der Seite angezeigt werden. Wie sich das ändern lässt, wird im nächsten Tutorial gezeigt.

Wir empfehlen:
HTML5- & CSS3-Video-Training

Unsere Empfehlung für dich

Contao-CMS-Training

Contao-CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • Über 8 Stunden Video-Trainings zum beliebten CMS Contao
  • 40 Praxis-Lektionen in Text/Bild als PDF (über 470 Seiten)
  • Blog, Newsletter, Google Maps, Formulare, Suchmaschinenoptimierung, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Folgende HTML-Elemente sind erlaubt:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>