Suchen-Dialog integrieren

Publiziert im Januar 2013

  für die WordPress-Version 3.3.1

Suchen-Dialog rechts oben in die Navigationsleiste integrieren

In der Grundinstallation der WordPress-Version 3.3.1 kann der Suchen-Dialog nur über die Widget-Funktion in einer der verfügbaren Widget-Areas eingebunden werden.


Möchte man den Suchen-Dialog aber in die horizontale Navigationsleiste integrieren, sind Forschergeist und Programmiertechnik gefragt.
Nachfolgend ist erklärt, welche Schritte notwendig sind, um den Dialog einzubinden.

Die Datei \wp-content\themes\twentyten\header.php mit einem Quelltext-Editor öffnen. Wird ein anderes Theme als „twentyten“ verwendet, findet sich die Datei im entsprechenden Theme-Ordner. In dieser Datei den folgenden Codeabschnitt suchen (am Seitenende zu finden):

1
2
3
4
5
            </div><!-- #access -->
        </div><!-- #masthead -->
    </div><!-- #header -->

    <div id="main">

Und durch diesen Codeabschnitt ersetzen (copy & paste):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Search Box Begin-->
    <div style="margin-right: 5px; float: right;">
        <form method="get" id="navsearchform" action="<?php bloginfo('url'); ?>/">
            <input type="text" style="vertical-align:top; margin-top: 8px; width:150px;" value="Suchbegriff eingeben..." name="s" id="headersearchbox" onfocus="if (this.value == 'Suchbegriff eingeben...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Suchbegriff eingeben...';}" />
            <input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/images/search-button.png" value="Search" alt="Suche starten" title="Suche starten" style="margin-top: 7px; margin-left: 1px;" />
        </form>
    </div>
<!-- Search Box End -->

      </div><!-- #access -->
    </div><!-- #masthead -->
  </div><!-- #header -->

  <div id="main">

Die Datei speichern und anschließend auf den Server in den oben angegebenen Pfad hochladen, Homepage im Browser neu laden und freuen.

Grafik-Button


Im PHP-Codeabschnitt wird eine Grafik angegeben, die anstelle eines regulären Buttons verwendet wird: /images/search-button.png
Ein Rechtsklick und „Speichern unter“ bringt sie auf die Festplatte.
Anschließend muß die Grafik auf dem Server im Pfad \wp-content\themes\twentyten\ gespeichert werden, damit sie vom Codeabschnitt gefunden und angezeigt werden kann.
Wie oben angegeben, benutze ich das Theme „twentyten“. Wird ein anderes Theme verwendet, muß die Grafik im entsprechenden Theme-Ordner gespeichert werden. Dadurch muß die Pfadangabe im Codeabschnitt nicht geändert werden.

Back to the Roots

Das Suchfeld mußte auf on2r.eu wieder in die Seitenleiste wandern. Ich brauchte deren Platz in der Navigationsleiste für diese WordPress-Rubrik.


Zur Beachtung:
Ich verweise auf Programme, stelle diese jedoch nicht selbst her oder zur Verfügung. Ich übernehme keinerlei Verantwortung für deren Fehlerfreiheit und eventuelle Schäden, die durch die Nutzung auftreten könnten. Der Benutzer erklärt sich einverstanden, diese Programme auf eigene Gefahr hin zu nutzen.
Alle Angaben wurden mit Sorgfalt und nach bestem Wissen angefertigt, erheben jedoch keinerlei Anspruch auf Richtigkeit oder Vollständigkeit. Ich übernehme keinerlei Verantwortung für die Fehlerfreiheit obiger Angaben und eventuelle Schäden oder Kosten, die durch die Nutzung auftreten könnten. Der Benutzer erklärt sich einverstanden, die Angaben auf eigene Gefahr hin zu nutzen.

Sei bitte fair und schreib mir, was nicht gefällt!Sei bitte fair und schreib mir, was nicht gefällt!Geht so...Gefällt mir gut!Gefällt mir sehr gut! (No Ratings Yet)
Loading...

Schreibe einen Kommentar

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


3 + 2 =