Die Suche nach dem perfekten Menü ...

Dies ist Teil 1 des Tutorials
Teil 2 dieses Tutorials lehrt, wie man vertikales Menü + dunkle Farbpalette für die horizontale bauen

Ich beschloss, Thesis Thema , weil einer meiner Kunden informierte mich über Kompatibilitätsprobleme zwischen Thesis und mein wordpress Mitgliedschaft Website Plugin MemberWing. Ich reparierte es und dann beschlossen, einen genaueren Blick auf Thesis zu nehmen und tatsächlich die Mühe gemacht, zu sehen Videos auf der Titelseite der Hauptthese Ort - Diythemes.com .
Was mich am meisten beeindruckt ist die Liebe zum Detail, Bedienerfreundlichkeit und vor allem - SEO Features, so auch von sich dachte.
MemberWing Mitgliedschaft Plugin wurde von Grund auf für die Mitgliedschaft Websites, die Notwendigkeit, so viel SEO Saft wie möglich ziehen würde entworfen. Also zahlte ich viel Liebe zum Vielzahl von SEO Erweiterungen und Vollkommenheiten in MemberWing. Viele meiner eigenen Kunden über verschiedene Themen zu benutzen fragen und mit Thema, das so gut war SEO aus der Tiefe optimiert wäre eine ausgezeichnete Passform für die Mitgliedschaft Portal Unternehmer sein.

Die Kombination SEO Befugnisse MemberWing mit SEO Befugnisse der Thesis Thema würde den besten Ranking Chancen für meine Kunden. Also habe ich Thesis und spielte mit ihm für einen Tag.

Es ist ein hervorragendes Thema in jeder Hinsicht. Die Navigation Teil davon ist jedoch ein wenig in der Funktion eingeschränkt. Ausgehend von Thesis 1,5 + ist es eine Menü-Ebene nur. Meine übliche Wunsch ist es, zur Navigation anpassen so viel wie nötig. Einige Websites haben nur wenige Seiten, viele andere Tonnen statische Seiten + Abermillionen von Artikeln / posts + viele Kategorien.
So in idealen Welt eine Chance, um gut aussehende hierarchisch organisiert benutzerfreundliche Navigation zu erstellen ist ein Muss. Thesis auf Anhieb hat gut aussehende Navigation aber ich merkte, dass alle Thesis-basierte Websites sind wie Zwillinge suchen. Anpassen Thesis Navigationsmenü wird nicht einfach so die meisten Leute lassen Sie es einfach wie es ist. Es gibt keine Möglichkeit, Reihenfolge der Kategorien im Menü ändern oder positionieren Sie sie in zwischen den Seiten. Und wieder, die Fähigkeit, verschachtelte Menüstrukturen erstellen fehlt. Also beschloss ich, zu sehen, was dagegen getan werden.
Nach dem Versuch über ein halbes Dutzend Menü / Navigation libaa ich meine Wahl auf Wordpress Navigation Liste Plugin NAVT .
NAVT Plugin ist im wesentlichen ungeordnete Liste Generator mit super schickes und ein wenig schwer zu Figur unkonventionelle Administrationsoberfläche. Was irreführend daran ist, dass es nicht wirklich schaffen fancy aussehende Menüs für sich. Es ist der schwierigste Teil der Arbeit aber - gibt Ihnen die Fähigkeit, visuell an einem Strang ziehen, und erzeugen ungeordnete Liste - Skelett Ihr Menü-to-be. Und Sie können viele Menüs zu erstellen. Sie können ziehen alle Arten von Wordpress Zeug in der Navigation: Seiten, Beiträge, Artikel, Kategorien, Benutzer, Code-Blöcke, externe Links, Trennwände, Separatoren und mix and match und Nest und arrangieren und passen sie in jede Baumstruktur Sie wollen.
NAVT generiert für Sie führte HTML ungeordnete Liste. Zweite Schönheit NAVT ist, dass Sie Ihr neues Menü in Ihrem Thema einfügen via berühmten JQuery basierte Logik, sondern, ohne dass jeder Code zu ändern hilft! NAVT können Sie angeben: "replace this # Element mit meinem neuen NAVT-Menü". # Element könnte eine ID oder Klasse von Weg der vorhandenen Menüs oder div-Element-Tag, die von Ihrem aktuellen Thema generiert werden. So NAVT tut dies Ersatz für Sie ohne dass Sie in Thema Code gehen und machen es chaotisch, als es ohnehin schon ist. Wenn das alles klingt wie Kauderwelsch - keine Sorge - ich Sie Schritt für Schritt werde bald. Der schwierigste Teil NAVT für jedermann ist, dass Sie haben, um mit aktuellen CSS + Bilder + Javascript-Code für Ihr Menü selbst. Und es liegt an Ihnen, herauszufinden, wo und wie Sie diese Dateien zu integrieren und dieses Zeug richtig miteinander verbunden zu bekommen.
Mit freundlichen Grüßen, ohne zu wissen JQuery + einige PHP + CSS + mit anständigen Erfahrungen mit Wordpress - dieses Ding ist schwer zu ziehen.
Gerne Ich kenne das Zeug ein bisschen, damit ich in den sauren Apfel und führen die Menschheit in die Freiheit Biss in die Entwicklung der besten der besten Navigations-Menüs für Wordpress entschieden. Ich musste nur herausfinden, Quellen für einige gut aussehende horizontale CSS-Menüs. Ich hob Dynamic Drive Website für ihre beste Auswahl, Demos und Quellen.

Widmete ich einen Tag, um Thesis studieren und spielen mit NAVT Plugin. Am Ende habe ich mit Stolz erstellte benutzerdefinierte, flexible, SEO optimiert, mehrstufige, verschachtelte Navigaton springen Struktur für mein Wordpress + Thesis basierte Website.

Liste der Merkmale der mehrstufigen, verschachtelte Wordpress Navigationsmenü für Thesis Theme
(Du hast das Zeug lieben):

• Professionelle, saubere Optik und Haptik.
• Support für alle modernen Browsern, darunter MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome in beiden javascript und nicht-javascript-Modi.
• Anmutig downgradable für nicht-javascript-Browsern. Sie Menü nutzbar sein, optisch ähnlich und Arbeitsbedingungen auch für JavaScript-fähige Browser (wenn auch nur Top-Level-Navigation sichtbar sein wird und keine Flyouts wird natürlich geschehen, wie sie durch javascript gemacht werden).
• SEO freundliche Features - ungeordnete Liste Menü-Code innerhalb von HTML generiert wird. Google und andere Suchmaschinen können die Indizierung Ihrer Navigationsstruktur und finden Sie Links zu inneren Seiten.
• Unterstützung für unbegrenzte Verschachtelungsebenen und Unterstufen.
• Unterstützung für jede Bestellung oder Seiten, Beiträge (über benutzerdefinierte URIs), Kategorien, Benutzer, benutzerdefinierte Code-Blöcke und externe Links im Menü.
• Unterstützung von Text-sowie Bild-basierten Menü-Elemente. (Ich habe noch diese aber versuchen).
• Menüstruktur und Inhalt ist optisch einstellbar über NAVT Admin-Bereich.
• Kompakt: JQuery Basis Flyouts für verschachtelte Ebenen.
• Schnell: JQuery für das Menü von Google-Servern (ich würde Thesis selbst Liebe zu derselben stattdessen tun zu ziehen es vor Ort) geladen. Dies würde zu beschleunigen Dinge ein wenig.
• Skalierbarkeit - Diese Art von Menü ist leicht zu bearbeiten und konfigurierbare jederzeit über NAVT Plugin-Einstellungen, ohne dass der Codierung überall.

Ich benutzte diese hervorragende Menü Dynamic Drive -Portal als Basis. Ich musste anpassen Javascript-Code ein bisschen sowie auch Brocken von PHP in custom_functions.php, um es mit Thesis Arbeit. Auch die Zahl der bereits bestehenden Seiten, Kategorien und Beiträge von meiner Website wurden verwendet, um Menü-Struktur zu montieren. Ihre Website Spezifika wird anders sein - sondern Konzepte werden die gleichen sein.
Also lassen Sie gehen, sollen wir?

Schritt für Schritt Anweisungen, um das Setup NAVT -basierte verschachtelte, anpassbare, mehrstufige, SEO freundlich
und einfach nur cool aussehende Navigationsmenü für Wordpress und Thesis Theme

1. Zum Wordpress Admin-Panel. Plugins-> Add new, suchen Sie nach "navt". Das Plugin wird angezeigt. Klicken Sie auf [Install], [Jetzt installieren], "Activate Plugin".
2. Extras-> NAVT Lists, Inside "Navigation Group" Bereich zu finden "group name" und geben ein: "menu1" in das Feld, drücken Sie [Create]-Taste. "Menu1" Rechteck-Bereich bekam erstellt.
   Diese "menu1"-Bereich werden die wichtigsten Spielplatz für Menü aufgebaut sein. Sie werden per Drag & Drop hier Ihr Menü-Elemente.
3. In "Assets"-Bereich zu finden "andere" Listenfeld und klicken Sie auf "Home" Wahl. "Home" thingie wird im Inneren erscheinen von "nicht zugeordnet"-Bereich. Weird, eh? Keine Sorge, solange es funktioniert - und es wird für uns.
4. Ziehen Sie dieses "Home" thingie von "Assets"-Bereich in "menu1" Rechteck-Bereich. Es wird "Home" Option im Menü geworden.
   • Wiederholen Sie die Schritte 3-4 für einige Seiten von "Pages"-Bereich, sowie für die Kategorien in "Kategorien"-Bereich. Ziehen Sie alle anderen Elemente, die Sie in Ihrem Menü inside "menu1" Rechteck. Sie können auf den Seiten, Kategorien, Benutzer und einige benutzerdefinierte Elemente wie "Liste Teiler" und "Code-Block" klicken. Code-Block ist cool Möglichkeit, benutzerdefinierte Schnipsel im Menü hinzuzufügen.
   • Sie können per Drag Menüpunkte inside "menu1"-Bereich, um ihre Reihenfolge zu ändern.
   • Sie können hierarchische Position eines jeden Menüpunkt mit "<" und ">" Pfeile einstellen.
   • Klick auf Text Namen der einzelnen Menüpunkte - öffnet umwerfend zusätzliche Anpassungsdialogfeld zu diesem Artikel vor. Ich meistens verwendet Standardwerte, aber technisch kann man verrückt werden und anfangen, image-based Menüoptionen und fügen Stücke von HTML-Code hinein. Gehen Sie mit Vorsicht though.
   • Für linkless unclikable Untermenüs, die als "Eltern" für andere "sub-Kinder" Früher habe ich "Code-Block" Art dienen soll. Zum Beispiel bei der Anpassung solcher Code-Block Element trat ich für "Menüpunkt alias" = "MemberWing" und "Enter Code-Block:" = "<a href='#'> MemberWing </ a>". Nachdem href = "#" wird es nicht anklickbar, sondern als eine gültige "Eltern"-Menüwahl.
5. Hier ist, wie meine NAVT 'menu1' Build-Struktur wie fast abgeschlossen betrachtet:
   
6. Fertig ersten Gebäude und klicken dann auf "Gang"-Symbol, um Ihre Menüstruktur anpassen:
   
7. Optionen, Display, CSS, Theme: Es wird den Dialog mit 4 Registerkarten zu öffnen.
   1. Gehen Sie auf "Optionen" und stellen Sie sicher, alles ist deaktiviert und "group name" sagt: "menu1"
   2. Zur Registerkarte "Anzeige" und stellen Sie sicher, alles auf "Show navigation Gruppe auf ..."-Bereich ist [x] überprüft. Lassen Sie den Rest auf den Standardwerten.
   3. Gehen Sie auf "CSS" und wählen Sie Radio-Button (x) "Wenden Sie keine CSS-Klassen".
   4. Gehen Sie zu "Theme"-Reiter und füllen Sie es in etwa so aus:
      
      Legen Sie in "Add tags zuvor ..." area diesen Code ein:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Legen Sie in "Add tags nach ..."-Bereich diesen Code ein:
      <br style='clear: left' /></div>
   5. Drücken Sie [Speichern / close]-Taste
8. An diesem Punkt im Menü Gebäude von innen NAVT Plugin Optionen abgeschlossen ist.
   Jetzt ist es Zeit, eine kleine Melodie zu tun bis zur Thesis Thema , um es fertig. Dafür brauchen wir ein paar eigene Dateien hinzufügen - CSS und JavaScript, das gehört zu den Menü-und Update-Thesis "custom_functions.php
9. Laden Sie die komplette Reihe von Dateien hier .
10. Entpacken Sie Archiv. Wenn Sie Ihren custom_functions.php mit Ihren Anpassungen aktualisiert haben - Sie brauchen, um sie mit meinen Sachen zu verschmelzen. Ich überlasse es ganz Ihnen überlassen.
    Wenn Sie es nicht berührt haben - feel free to es mit mir zu überschreiben. Bitte beachten Sie: Ich zog es vor-Menü unter der Website-Header (default ist oben) Position - so meine Einstellung enthalten diese Einstellung auch.
11. Upload-Archiv inklusive aller Unterverzeichnisse und Dateien unter Ihrer Thesis Thema 'custom' Verzeichnis, wie folgt aus:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Ich habe nicht custom.css berührt - ich bevorzuge zum Menü-spezifische CSS unter ihren eigenen Standorten zu halten, damit Sie keine Unordnung in custom.css
12. An dieser Stelle können Sie laden Sie Ihre Website und sehen neue schöne neue mehrstufige, verschachtelte, SEO optimierte Menü.
13. Sie können jederzeit zurückgehen, um die Einstellungen NAVT und passen Sie Ihre Speisekarte mit mehr Auswahl oder neu zu positionieren nichts. Es wird auf Live-Site wider automatisch.

Der Weg vor uns ...

Dieses Tutorial enthalten kreatives Beispiel eine Art von Menü. Ich spielte mit einem anderen - nur um zu sehen, wie dunkel gefärbten Menü aussehen würde:

Thesis Thema - Multilevel verschachtelten CSS-Menü - dunkle Palette

Ich denke, es ist recht nett. Es gibt viele weitere Navigations-Proben zur Verfügung zu Dynamic Drive - alle von ihnen sind möglich, für Diplomarbeiten und andere Wordpress Themes mit einigem Aufwand anpassen:

Dynamic Drive horizontalen Menüs

Ich hoffe, Sie finden dieses Tutorial nützlich und sinnvoll. Wie ich schon sagte, ist es möglich, eines dieser Menüs für Thesis anpassen - das ist Zeit und Lust, um sie geschehen gegeben.

Ich konnte diese Arbeit für Sie tun, auf der Grundlage von Verträgen. Wählen Sie einfach das Menü Sie möchten, kontaktieren Sie mich und ich werde auf den Code und Instruktionen für Ihre Website zu arbeiten.

$ 20

Und natürlich, wenn Sie bis zum Aufbau Super SEO optimierte Premium-Mitgliedschaft wordpress-Portal - die beste Lösung für diese:
Thesis Theme + MemberWing Mitgliedschaft Plugin + selbst gehosteten Wordpress natürlich.

Tagged as: CSS Menü für WordPress , Diplomarbeit Thema , These Thema hierarchischen Menüs , Diplomarbeit Thema Multilevel-Menü , Diplomarbeit Thema Navigaton springen , Diplomarbeit Thema verschachtelten Menüs , Diplomarbeit Thema tutorial , wordpress css-Menü , wordpress verschachtelte Menü