• Articles
• admin

Jede WordPress-Seite ist anders. Dies liegt daran, dass jeder ein anderes Thema oder „Look and Feel“ für seine Website wählt. Das Erstellen einer Kopfzeile und eines oberen Navigationsmenüs in WordPress ist für jede Site ein etwas anderer Vorgang.

Hier verwende ich das Genesis Theme Framework für WordPress, weil ich es absolut liebe. Es wird jedoch wichtige Punkte in diesem Artikel geben, die jedem mit einer WordPress-Website helfen werden.

Dies ist Teil einer Reihe von Artikeln und Videos, in denen ich eine Website von Grund auf neu erstelle. Ich habe zuerst erklärt, wie man ein untergeordnetes Thema für das Genesis-Framework erstellt, und dann darüber geschrieben, wie man das Thema durch Hinzufügen von Hintergrund und Logo gestaltet.

Hinzufügen von Facebook-Link, Twitter-Link und anderen Informationen zur Kopfzeile

Nachdem wir das Logo bereits oben links in der Kopfzeile unserer Website hinzugefügt haben, werden wir nun einige zusätzliche Informationen auf der rechten Seite unserer Kopfzeile hinzufügen. In diesem Fall werden wir Twitter- und Facebook-Links usw. hinzufügen., durch ein Widget.

Ich muss zugeben, dass ich in letzter Zeit ein bisschen verrückt geworden bin, nachdem ich sie in der Vergangenheit ein wenig abgelehnt habe. Was ist ein Widget? Nun, sie sind in sich geschlossene Teile einer Website, die Sie über einen benutzerfreundlichen Widget-Bereich ziehen und steuern können.

Eine der vielen Schönheiten von Genesis ist die mühelose Möglichkeit, jeden Bereich der Website zu erweitern. Also:

• Wenn Sie eine andere Reihenfolge der Felder in der Seitenleiste wünschen, können Sie dies in Sekundenschnelle tun.
• Wenn Sie hier einen Beitrag mit den neuesten 5-Kategorieüberschriften mit Miniaturansichten auf der Startseite wünschen, können Sie dies in Sekundenschnelle tun.
• Wenn Sie eine Suchleiste, Social Sharing, Twitter-Feed, Kalender, Tag Cloud usw. wünschen., hier, dort oder irgendwo, können Sie es in Sekunden tun.

Diese intuitive, benutzerfreundliche Backend-Funktionalität ist besonders nützlich, wenn Sie Websites für Kunden erstellen, die alle Bereiche einer Website steuern möchten, aber nicht über die erforderlichen Fähigkeiten verfügen.

Wie auch immer, in diesem Fall müssen wir unser eigenes benutzerdefiniertes Widget erstellen und das tun wir, indem wir über ein Text-Widget in den rechten Header-Bereich in der Appearance > Widgets-Oberfläche in WordPress ziehen.

Und in diesem Text-Widget können Sie HTML einfügen. Hier ist der HTML-Code, den ich für diese bestimmte Site eingefügt habe. Ich habe nur einen Facebook-Link, einen Twitter-Link und eine Telefonnummer.

<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>

Und hier ist das CSS, um das Obige zu stylen:

#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}

Folgendes erscheint als Ergebnis auf der rechten Seite des Kopfes:

Video zum Hinzufügen von Überschrifteninformationen und Navigationsmenü

In diesem Video zeige ich, wie Sie das Widget zur Kopfzeile hinzufügen und das Menü in Genesis gestalten.

Erstellen des oberen Navigationsmenüs

Die oberen Navigationsmenüs (oder „Navigationsleisten“) waren früher der Fluch meiner Existenz, aber jetzt habe ich mit Genesis und WordPress-Menüs ein wirklich einfaches System entwickelt, um sie zu erstellen Das dauert Sekunden im Gegensatz zu Stunden.

Genesis hat bereits die Möglichkeit, ein primäres und sekundäres Navigationsmenü zu haben. In diesem speziellen Beispiel habe ich das sekundäre Navigationsmenü mithilfe der Genesis-Designeinstellungen entfernt, da der Client nur eines wollte.

Im obigen Video zeige ich, wie ich das CSS ändere, damit das Menü wie in der PSD-Grafik aussieht, die ich erstellt habe.

Mithilfe der Chrome Developer Tools oder des Firebug-Add-Ons für Firefox können Sie feststellen, welche Selektoren im HTML-Code im CSS zum Formatieren des Menüs verwendet werden.

#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }

Wie Sie im obigen Video sehen können, habe ich den Radius der abgerundeten Ecken vergrößert, einen Verlaufshintergrund hinzugefügt und die Rahmenfarbe des Menüs geändert. Jetzt sieht das Menü nicht mehr wie das langweilige graue aus, das Sie mit einer Vanilla Genesis-Installation erhalten.

Ich habe auch das folgende CSS hinzugefügt, um die Farbe des Textes im Menü in Weiß zu ändern.

#nav li a {color: #fff; }

Es besteht auch die Möglichkeit, den Stil der aktuellen Seitenlinks, der Hover-Links, der Unterseiten-Links und der Unterseiten-Links zu ändern.

Mit Genesis können Sie problemlos Dropdown-Menüs für Unterseiten (oder untergeordnete Seiten) und dann Fly-Out-Links für untergeordnete Unterseiten (oder Enkelseiten) erstellen. Sie können diese sowohl im primären als auch im sekundären Navigationsmenü haben.

Erstellen von Seiten, untergeordneten Seiten und Enkelseiten

Hier ist mein Video, in dem ich dem WordPress-Menü neue Seiten hinzufüge, damit sie im Navigationsmenü als Seiten, untergeordnete Seiten (als Dropdown) und Enkelseiten (als Flyouts) angezeigt werden.

Sie können eine Seite als Kind- oder Enkelseite unter Eltern im Seiteneditor auswählen. Und wenn Sie sich die Seiten ansehen (unter Seiten > Alle Seiten), werden die Seiten für Kinder und Enkelkinder unter ihren Eltern eingerückt. Dadurch erhalten sie auch eine logische URL (z. B. www.site.com/music/jazz/charlie-parker, wobei die Seite „Charlie Parker“ ein Kind von „Jazz“ ist, das ein Kind von „Musik“ ist).

Erstellen eines Navigationsmenüs mit Drop-Downs und Fly-outs

Damit diese Seiten korrekt im Navigationsmenü angezeigt werden, müssen Sie sie nur per Drag & Drop an ihre jeweiligen Positionen in den > -Menüs ziehen. Auch hier werden untergeordnete Seiten unter ihren übergeordneten Seiten eingerückt. Vergessen Sie nicht, dem Menü einen Namen zu geben (z. B. „Navigationsleiste“) und es als primäres Navigationsmenü festzulegen.

Also, Seiten im WordPress-Erscheinungsbild anordnen > Menüs Bereich wie folgt…

… wird ein Dropdown-Menü mit Fly-outs wie folgt erstellen:

Bitte sehen Sie das Video oben für eine Demonstration davon.

Was denken Sie?

Was halten Sie von dieser Methode zum Bearbeiten der Kopfzeile und des Navigationsmenüs einer Website? Machst du es anders?