Das Suchscript in eigene Seiten integrieren
Sie haben das kostenlose Suchscript installiert, wie in der readme.txt beschrieben.
Wenn Sie mit PHP, HTML & Co. nicht so vertraut sind, sollten Sie dies auf jeden Fall zuerst tun, bevor Sie Versuche mit eigenem Design starten.
Nun wollen Sie das Script nahtlos eine Seite einbinden, d.h. ans Design Ihrer Seite anpassen.
Hier kommt eine Schritt für Schritt Anleitung:
Vorab eine Bemerkung:
Die folgenden Arbeiten müssen unbedingt mit einem Texteditor durchgeführt werden.
Wysiwyg Editoren wie z.B. FrontPage oder Dreamweaver führen u.U. zu unvorhersehbaren Ergebnissen!
Wichtig: Wenn Ihre Site utf-8 codiert ist, dann muss Ihr Texteditor utf-8 speichern können.
1. Schritt:
Die Seite mit den Suchergebnissen
- Erstellen Sie eine neue Seite mit dem Namen suchen.php (nicht die Beispielseite!). Die Seite muß eine php Seite sein! (Wenn die Seite anders heißen soll, dann bitte wegen des highlighting die FAQ lesen!)
- Diese Seite kann (sollte) alle Komponenten beinhalten, die das Design Ihrer Site bestimmen. Also Kopf, Navigation, usw.
Sie können natürlich auch eine Seite aus Ihrem Projekt quasi als Template verwenden, unter suchen.php abspeichern, und alles nicht benötigte rauslöschen. - An den Anfang der Datei, also noch vor <!DOCTYPE html> kommt:
<?php include("wdw_suche/search_config.php"); ?> - In den Inhaltsbereich (also dort, wo normalerweise Text steht) kopieren Sie nur den folgenden Code, und zwar an der Stelle, wo die Suchergebnisse angezeigt werden sollen:
<div id="output"><?php include("wdw_suche/search.php");?></div> - Und ans Ende der Datei, unmittelbar vor dem </body>-Tag:
<script src="wdw_suche/wdw_suche.js" defer></script>
2. Schritt:
Das Suchformular (das Suchfeld)
- Das Suchfeld kann überall auf Ihrer Site eingebaut werden. Also nicht nur auf der Suchergebnisseite, sondern auch auf allen anderen Seiten. Die Seiten mit dem Suchfeld müssen keine PHP Seiten sein.
- Kopieren Sie den html Code für das Suchformular in jede Seite, wo das Suchfeld erscheinen soll, an die Stelle, wo Sie es haben wollen, z.B. ins Navigationsmenü.
<form id="search" method="get" action="suchen.php"> <p> <label for="suchbegriff">Im Projekt suchen:</label> <input type="search" name="q" id="suchbegriff" value="Suchbegriff" placeholder="Suchbegriff(e)" /> <input type="submit" value="Los !" /> </p> </form> - Wenn Ihre Seite mit Frames arbeitet, müssen Sie eventuell das Zielfenster für den Aufruf der Suchergebnisse angeben.
Die erste Zeile des obigen Codes könnte dann z.B. so aussehen:<form id="search" method="get" action="suchen.php" target="Hauptframe">
3. Schritt:
Nun noch das Design anpassen (formatieren)
- Um Schriftarten, -größen, -farben, Abstände usw. zu formatieren, setzen Sie CSS ein.
- Die Style-Angaben gehören in den head-Bereich Ihrer Seiten, also irgendwo zwischen <head> und </head>.
- Der Style Bereich muß folgendermaßen aussehen:
<style type="text/css"> ... hier kommen die Style-Angaben </style> - Wenn Sie mit CSS nicht vertraut sind, empfehle ich, erst einmal ein Tutorial durchzuarbeiten. Eine Suche bei Google nach CSS Tutorial o.ä. sollte weiterhelfen.
4. Fertig!
Na, war doch nicht schwer!