» Artisteer – Suchbox im Header

Artisteer ist bei der Gestaltung von eigenen Themes recht flexibel. Mittlerweile lassen sich in Artisteer so ziemlich alle Boxen optisch individuell anpassen. Sei es nun die komplette Sidebar, Header, Content oder den Footer. Allerdings gibt es eine Einschränkung, die Suche Box kann innerhalb von Artisteer nicht nach belieben im Theme platziert werden. Daher will ich heute zeigen, wie man dies manuell dennoch machen kann.

Artisteer – Searchform mit Button

Zuerst sollte natürlich ein Theme fertig gestellt und exportiert werden. Artisteer generiert dabei automatisch die Datei searchform.php, die schon alles Notwendige enthält.

Da man auch in Artisteer allerlei unterschiedliche Buttons (Schaltflächen), passend zum ganzen Theme erstellen kann, braucht auch keine extra Grafik gestaltet zu werden. Der Aufwand für ein eigenes Suchfeld ist also relativ gering und binnen wenigen Minuten erledigt. In meinem Beispiel, zeige ich wie man die Suche in den Header einbaut.

Zuerst schauen wir uns die Datei serachforms.php genauer an:

<form method=“get“ name=“searchform“ action=“<?php bloginfo(‚url‘); ?>/“>
<div><input type=“text“ value=“<?php the_search_query(); ?>“ name=“s“ style=“width: 95%;“ />
<span class=“art-button-wrapper“>
<span class=“l“> </span>
<span class=“r“> </span>
<input class=“art-button“ type=“submit“ name=“search“ value=“<?php _e(‚Search‘, ‚kubrick‘); ?>“/>
</span>
</div>
</form>

Hier gibt es zwei Dinge, die für uns wichtig sind. In Zeile 4 wird mit width: 95% die Breite vom Eingabefeld der Suche definiert. Die Breite wird mit dem Prozentualen Wert bestimmt, hier sind es 95%. Im Bild seht Ihr, das das Suchfeld auf 15% verkleinert ist. In den meisten Fällen reicht dies auch vollkommen aus. Als zweites gibt es die „input class“ „art-button“. Hiermit wird bestimmt, das ein Button (art-button) die Suche auslöst. Würde die Suche ohne Button gestartet werden, also mit der Enter Taste, dann würde dies mit „Input Type=Text“ versehen werden. Dazu komme ich später noch zu.

Damit wir unsere Suche nun im Header einbauen können, muss die header.php geöffnet werden und ein entsprechender PHP Code eingegeben. Im Prinzip kann man den Inhalt der searchform.php auch in den Header an geeigneter Stelle hinein kopieren, ist aber billige Pfuscherei was ich mir selber abgewöhnen will (man ist sonst immer so bequem).

Oftmals bietet es sich an, die Suche in die Navigationsleiste zu integrieren. Ist natürlich jedem selbst überlassen, wo die Suche im Header eingebaut werden soll. Platz ist eigentlich immer genug vorhanden. In meinem Fall habe ich die Suche in die Menüleiste (class=“art-menu“) eingebaut und in eine eigene DIV Class gepackt damit ich diese optisch vernünftig verändern kann:

<div class=“search“>
<?php include („searchform.php“);?>
</div>

Damit wird jetzt der Inhalt der Searchform abgerufen und im Header ausgegeben. Durch die DIV Klasse hat man nun auch auch die Möglichkeit, das ganze am Theme anzupassen. Dazu sind aber ein paar Grundlegende CSS Kenntnisse vonnöten. Besonders wenn man die Browser Komptabilität beachten will. Da jedes Theme auch anders aufgebaut ist, kommt Ihr nicht drum herum, ein paar Dinge selber ausprobieren zu müssen. Ist aber kein großes Problem, ich schaffe es ja auch und hangel mich mit meinem Halbwissen auch durch das Theme ;-) Um die Suchbox anzupassen, muss in die  CSS (stylesheet.css) die neue DIV Klasse eingetragen werden. Dies kann beispielsweise so aussehen:

.search {
color:#635b5c;
font-size:14px;
position: relative;
top: 3px;
bottom: 0px;
left:200px;
}

Denkt bitte daran, das Ihr diese Änderungen auch in die CSS für den IE6 und IE7 (style.ie6 und style.ie7) vornehmen müsst. Ansonsten kann es gut sein, das es in FireFox super aussieht, aber im InternetExplorer das komplette Theme zerschossen ist.

Artisteer – Searchform ohne Button

Geht natürlich auch und ist sehr schnell und einfach gemacht. Folgendes kopiert Ihr in die leere searchform.php:

<?php $search_text = "Suchbegriff eingeben"; ?>
<form method="get" id="searchform"   action="<?php bloginfo('home'); ?>/">
<input type="text" value="<?php echo $search_text; ?>"   name="s" id="s"   onblur="if (this.value == '')

{this.value = '<?php echo $search_text; ?>';}"   onfocus="if (this.value == '<?php echo $search_text; ?>')   {this.value = '';}" />
<input type="hidden" id="searchsubmit" />

</form>

Der Code stammt von Dagon Design und ich persönlich finde es immer noch die einfachste Methode. Header und CSS wie gehabt editieren. Ist ganz hilfreich wenn akuter Platzmangel herrscht, da lässt sich das recht gezielt einsetzen.

Artisteer – Suche mit Browser Button

Auch das geht ohne weiteres da jeder Browser einen eigenen Standard Button darstellen kann.

Allerdings sollte man nicht vergessen, das speziell diese Buttons, je nach Browser, unterschiedlich aussehen können. In der Regel eignen sich solche Buttons für Formulare.

Ich habe diese Möglichkeit dennoch mal mit in diesen Artikel herein genommen. Das Ergebnis seht Ihr im Bild links. In die leere searchform.php einfach diesen Code übernehmen:

<form id=“searchform“ method=“get“  action=“<?php bloginfo(‚url‘) ?>“>
<div>
<input type=“text“ name=“s“ id=“s“  />
<input type=“submit“ value=“Suche“ />
</div>
</form>

Die hier vorgestellten Möglichkeiten, eignen sich natürlich nicht nur mit Artisteer erstellte Themes sondern auch für alle anderen. Letztendlich ist es wirklich kein großer Aufwand. Allerdings muss man sich ein wenig mit CSS auseinandersetzen, das geht eben nicht anders. Stellt aber keine große Hürde dar und man lernt dabei auch etwas. Ist zumindest bei mir so. Viel Spaß beim editieren!