Die Suche nach dem perfekten Vertikal-Menü ...
Teil 1 dieses Tutorials beschrieben Schritt für Schritt Prozess des Aufbaus horizontale mehrstufige verschachtelte Menü für WordPress Thesis Theme . Teil 2 wird auch weiterhin auf, um diese Funktionalität zu verbessern. Hier werden wir hinzufügen, "dark"-Version der horizontalen Navigationsleiste und ich werde dich lehren, wie man zwischen "hell" und "dunkel"-Version zu wechseln. Teil 2 ist die Obermenge von Teil 1. Es beinhaltet alle aus Teil 1 + noch mehr coolen Sachen.
Wichtigste Idee, dass ich zu präsentieren wollte ist das Hinzufügen vertikales Menü zu Thesis Theme (und WordPress im Allgemeinen). Ich war für wirklich flexible Suche, SEO freundlich und Multi-Browser kompatibel vertikales Menü, das erlauben unbegrenzte Verschachtelungsebenen schaffen würde.
WEB hat Tonnen von Seiten zu diesem Thema, aber wenn ich all diese Proben versuchen begonnen - sie entweder kaputt, auseinander gefallen, unterstützt nur eine begrenzte Anzahl von Ebenen oder schlecht benommen in Gates + Ballmers junksplorer 6. Schließlich bekam ich zurück zum bewährten Dynamic Drive Menüs wie ihre vertikale Proben erwies sich als ein netter Fall, das meine Anforderungen passt sein. Ich musste sie allerdings erheblich ändern, um sicherzustellen, dass es passt Thesis Modell.
Das Streben nach Perfektion geht weiter ...
Ich verbrachte etwa 16 Stunden der Suche, Montage, Prüfung, Fixieren, Polier-und Tuning vertikale Menüs und CSS. JS-Code und 3/4 der Zeit verbrachten wir damit, in MSIE 6 zu arbeiten.
Wie auch immer, ich war zufrieden mit dem Endergebnis. Führte vertikale Navigationsmenü hat die gleichen Vorteile , dass horizontales Menü hat.
Mit Fähigkeit zu vertikalen Menü hinzuzufügen ist sehr wichtig, um etwa 70-80% von Portalen im Internet. Horizontale Menüs haben "Raum" begrenzt, viele Menüpunkte, sondern vertikales Menü nicht über diese Einschränkung und würde immens helfen unterzubringen. So here we go.
Viele Schritte, um sie geschehen sind bereits beschrieben in Teil 1 des Tutorials so wird dies es für ein bisschen kürzer zu machen, aber mit viel mehr funktionsreiche Ergebnisse.
Also hier geht es:
Gebäude SEO freundliche, vertikale, mehrstufige, hierarchisch verschachtelt Menü für WordPress und Thesis Thema. Schritt für Schritt
(... Was man nie für möglich gehalten ...)
- Installieren exec PHP Plugin und aktivieren. Wir brauchen es, weil ich PHP innerhalb des Text-Widget nutzen, um vertikales Menü "HTML-Code ausgeben.
- Führen Sie die Schritte 1 bis 6 von Teil 1 des Tutorials . Grundsätzlich müssen Sie installieren und aktivieren Sie NAVT Plugin + visuell bauen Sie Ihr Menü. Vergewissern Sie sich Ihr Menü Gruppenname ist "menu1 '. Dieser Name wird in custom_functions.php hardcoded
- Klicken Sie auf das 'Gang' Symbol für Ihren 'menu1' Gruppe um seine Eigenschaften zu bearbeiten:
- Folgt Steps 7,1 -7,3 Teil 1 Tutorial zu "Optionen", "Display" und "CSS" Tabs-Einstellungen festlegen.
- Jetzt auf dem "Theme" Registerkarte in diesem Dialog klicken. Wir überschreiben Reihe von Einstellungen gibt (wenn Sie im Anschluss wurde Schritt 1). Das ist ok - du wirst nichts verlieren - aber diese Veränderungen sind notwendig, weil ich etwas Code aus Schritt 1 geändert haben.
Hier ist, wie dieser Dialog muss ausgefüllt werden:- Innerhalb von "Theme XPath:" Betreten Sie diesen Code (es Befehle an einen beliebigen Tag mit diesen Klassen ersetzen):
.jquerycssmenu, .jqueryslidemenu - Stellen Sie "Action" auf "Ersetzen durch"
- Innerhalb von "Tags hinzufügen, bevor Navigation Group"-Bereich geben Sie diesen Code ein:
<div class='jquerycssmenu' style='margin-top:5px;'> - Innerhalb von "Tags hinzufügen Navigation nach Gruppe"-Bereich geben Sie diesen Code ein:
<br style='clear: left' /></div> - Klicken Sie auf [Speichern / Schließen] Taste.
- Innerhalb von "Theme XPath:" Betreten Sie diesen Code (es Befehle an einen beliebigen Tag mit diesen Klassen ersetzen):
- Jetzt bei WordPress Admin-Panel gehen -> Darstellung -> Widgets.
- Ziehen Sie "Text"-Widget (von der großen "Verfügbare Widgets"-Bereich) in die "Sidebar 1" auf der rechten Seite. Wir fügen Code in das Text-Widget, die uns helfen, vertikalen Menü materialisieren wird.
HINWEIS: Ich nehme an, Sie haben "Sidebar 1" in der Existenz. Thesis-Optionen ermöglicht es Ihnen, um sie auszuschalten - aber aus Gründen der dieses Tutorial lass es sein. - Sobald Sie per Drag & Drop Widget - es wird wie eine Blume (Ich fühle mich jetzt, dass MSIE romantischen Kampf vorbei ist) wird geöffnet.
- In "Titel" betreten "weltbesten vertikales Menü" ... Na, fühlen Sie sich frei, Ihre Kreativität zu verwenden -, dass der Text wird über Ihre neu geboren vertikales Menü zu gehen.
- Im großen Bereich für Text - geben Sie diesen PHP-Code:
<?php
if (function_exists('navt_getlist'))
$menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
else
$menu_html = "";
$menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
echo $menu_html;
?> - Drücken Sie [Speichern], auf "Schließen"-Link klicken.
- Aktualisierten Satz von Dateien hier herunterladen .
Dieses Archiv beinhaltet:- Aktualisierte Version von "hell" horizontales Menü-Code
- "Dark"-Version von horizontalen Menü
- Vertikale Menü-Codes
- Aktualisierte Version der custom_functions.php
- Jetzt müssen Sie dieses Archiv entpacken und laden Sie sie in die 'custom' Verzeichnis Ihrer Diplomarbeit Thema.
Hinweis: Wenn Sie alle Anpassungen innerhalb custom_functions.php getan haben - man bräuchte, um diese zusammenzuführen. Wenn nicht - fühlen Sie sich frei, um es mit meiner Version zu überschreiben. - Voila! Jetzt können Sie Ihre Website neu zu laden und sehen die gleiche "hell" horizontales Menü + neato vertikales Menü in der linken Seitenleiste.
- Bonus-Aufgabe: Lassen Sie ändern "hell" horizontales Menü auf den "dunklen" Farbschema.
- Innerhalb custom_functions.php Datei:
ersetzen diesen Code ein:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
mit diesem Code:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Grundsätzlich sind wir Auskommentieren einer Zeile und kommentiere das andere. - Jetzt bei WordPress Admin-> Tools-> NAVT Listen und klicken Sie auf oben genannten "Zahnrad"-Symbol um die Eigenschaften der "menu1 'Gruppe bearbeiten.
- Klicken Sie auf "Theme"-Registerkarte.
- Innerhalb von "Tags hinzufügen, bevor Navigation Group"-Bereich geben Sie diesen Code ein:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Jetzt - laden Sie Ihre Seite - und Ihre wichtigsten horizontalen Navigationsmenü "magische Weise" wurde dunkel, so etwas:
Thesis Thema - Multilevel verschachtelte CSS-Menü - dunkle Palette
Dunkle Farbpalette besser geeignet sein für bestimmte Standorte als die helle Farbe ein. So, jetzt haben Sie eine freie Wahl in Ihrem Leben!
- Um wieder auf "hell" Farbschema - gerade über "Bonus" Schritte rückgängig zu machen.
- Innerhalb custom_functions.php Datei:
- Fazit:
Ich liebe Thesis Theme, ich liebe WordPress und ich liebe die Tatsache, dass wir einen weiten Weg zu menschenwürdiger Navigations-Menüs auf unseren Portalen hinzuzufügen.
$ 20
Viel Spaß!
Gleb Esman
{Kommentare zu diesem Eintrag sind geschlossen}
