Die Suche nach dem perfekten Menü ...

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

Ich beschloss zu bekommen Thesis Thema , weil einer meiner Kunden informierte mich über Kompatibilitätsprobleme zwischen Thesis und meine WordPress Plugin Mitgliedschaft Website MemberWing. Ich reparierte es und entschied sich dann Thesis einen genaueren Blick auf und tatsächlich die Mühe gemacht, zu sehen Videos auf dem Titelblatt der Website Hauptthese - Diythemes.com .
Was mich am meisten beeindruckt ist die Liebe zum Detail, Benutzerfreundlichkeit und vor allem - SEO Features, die so gut gedacht sind.
MemberWing Mitgliedschaft Plugin wurde von Grund auf für die Mitgliedschaft Websites, die Notwendigkeit, so viel wie möglich zu SEO Saft 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 fragen zu bedienen und mit Thema, das so gut war SEO optimierte aus der Tiefe wäre eine ausgezeichnete Passform für die Mitgliedschaft sein Portal Unternehmer.

Kombinieren SEO Befugnisse MemberWing mit SEO Befugnisse des Thesis Thema wäre Clients geben die besten Chancen zu meinem Ranking. Also habe ich Thesis und spielte mit ihm für einen Tag.

Es ist ein hervorragendes Thema in allen ihren Formen. Die Navigation Teil davon ist jedoch ein wenig in der Funktion eingeschränkt. Ausgehend von der These 1.5 + Es ist nur eine Ebene im Menü. Mein Wunsch ist es üblich zu können, Navigation anpassen, so viel wie nötig. Einige Websites haben nur wenige Seiten, viele andere haben Tonnen von statischen Seiten + Abermillionen von Artikeln / posts + viele Kategorien.
So in der idealen Welt, die eine Chance, gut aussehende hierarchisch organisierten benutzerfreundliche Navigation zu erstellen ist ein Muss. Thesis auf Anhieb eine gute Navigation suchen, aber ich merkte, dass alle Thesis-basierte Websites sind wie Zwillinge suchen. Customizing Thesis Navigation ist nicht wirklich einfach so die meisten Menschen einfach so belassen wird. Es gibt keinen Weg, um der Kategorien im Menü ändern oder Position sie zwischen den Seiten. Und wieder ist die Fähigkeit, verschachtelte Menüstrukturen erstellen fehlen. Also beschloss ich, zu sehen, was könnte man dagegen tun werden.
Nach dem Versuch über ein halbes Dutzend Menü / Navigation bezogene Erweiterungen ich meine Wahl auf Wordpress Plugin NAVT Navigation List .
NAVT Plugin ist im Wesentlichen Liste Generator mit super Phantasie und ein wenig ungeordnete hart-zu-Figur untraditional Admin-Interface. Was irreführend ist, daß es tatsächlich nicht schaffen fancy aussehende Menüs von selbst aus. Es ist der schwierigste Teil der Arbeit aber - gibt Ihnen die Fähigkeit, optisch an einem Strang ziehen, und erzeugen ungeordnete Liste - Skelett Ihr Menü-zu-sein. Und Sie können viele Menüs zu erstellen. Sie können alle Arten von Wordpress Zeug in die Navigation ziehen: Seiten, Beiträge, Artikel, Kategorien, Benutzer, ordnen Code-Blöcke, externe Links, Raumteiler, Separatoren und mix and match und Nest und und passen sie in jede Baumstruktur Sie wollen.
NAVT generiert für Sie führte HTML ungeordnete Liste. Zweite Schönheit NAVT ist, dass es Ihnen hilft, legen Sie Ihre neue Menü in Ihrem Thema über berühmte JQuery basierte Logik, sondern ohne die Notwendigkeit, Code zu ändern! NAVT können Sie angeben: "Ersetzen Sie das #-Element mit meinem neuen NAVT Menü". # Element könnte eine ID oder Klasse der Weg der vorhandenen Menüs oder div-Element-Tag, der von Ihrer aktuellen Thema generiert werden. So geht diese NAVT Ersatz für Sie ohne dass Sie ins Thema Code zu gehen und machen es chaotisch, als es ohnehin schon ist. Wenn das alles klingt wie Kauderwelsch - keine Sorge - ich werde Sie Schritt für Schritt bald. Der schwierigste Teil der NAVT für jedermann ist, dass Sie haben, um mit aktuellen CSS + Bilder + JavaScript-Code für Ihr Menü selber. Und es liegt an Ihnen, herauszufinden, wo und wie diese Dateien zu integrieren und dieses Zeug richtig zusammen zu vernetzen.
Mit freundlichen Grüßen, ohne zu wissen JQuery + einige PHP + CSS + unter menschenwürdigen Erfahrung mit Wordpress - das Ding ist schwer zu ziehen.
Gerne Ich kenne dieses Zeug, damit ich ein bisschen in den sauren Apfel beißen und Führer der Menschheit in den Bau der besten der besten Navigations-Menüs für Wordpress Freiheit entschieden. Ich musste nur herausfinden, Quellen für einige gut aussehende horizontale CSS Menüs. Ich nahm Dynamic Drive-Website für ihre beste Auswahl, Demos und Quellen.

Ich widmete einen Tag, um Thesis und spielen mit NAVT Plugin zu studieren. Am Ende habe ich mit Stolz erstellt kundenspezifische, flexible, SEO optimiert, mehrstufige, verschachtelte Struktur springen für meine Diplomarbeit + Wordpress basierte Seite.

Liste der Features von mehrstufigen, verschachtelte Wordpress Navigationsmenü für Thesis Theme
(Du liebe dieses Zeug zu):

• Professionelle, saubere Optik und Haptik.
• Support für alle modernen Browsern, einschließlich 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome in JavaScript und non-JavaScript-Modi.
• Anmutig downgradable für Nicht-JavaScript-Browser. Sie im Menü genutzt werden kann, 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 passieren, da sie von JavaScript gemacht werden).
• SEO freundliches Features - ungeordnete Liste Menü-Code ist in HTML generiert. Google und andere Suchmaschinen können Ihre Navigationsstruktur Index und finden Sie Links zu den inneren Seiten.
• Support für eine unbegrenzte Verschachtelung Ebenen und Unterebenen.
• Support für jede Bestellung oder Seiten, Beiträge (über benutzerdefinierte URIs), Kategorien, Benutzer, benutzerdefinierte Code-Blöcke und externe Links im Menü.
• Support von Text-sowie Bild-basierten Menü-Elemente. (Ich habe noch zu versuchen, diese aber).
• Menü-Struktur und Inhalte visuell einstellbar über NAVT Admin-Bereich.
• Kompakt: JQuery basierte Flyouts für verschachtelte Ebenen.
• Schnell: JQuery für das Menü von Google-Servern (ich würde gerne Thesis selbst das Gleiche zu tun, anstatt sie lokal zu ziehen) geladen. Dadurch würden die Dinge ein wenig.
• Skalierbarkeit - Diese Art von Menü ist editierbare und konfigurierbare jederzeit über NAVT Plugin-Einstellungen, ohne dass der Codierung überall.

Ich benutzte diese ausgezeichnete Menü von Dynamic Drive -Portal als Basis. Ich musste JavaScript-Code ein wenig anpassen, sowie auch in PHP Stück 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 montieren. Ihre Website Spezifika wird anders sein - aber die gleichen Konzepte werden.
Also lassen Sie gehen, sollen wir?

Schritt für Schritt Anweisungen, um das Setup NAVT -basierten nested, anpassbare, mehrstufige, freundliche SEO
und einfach nur cool aussehende Navigationsmenü für Wordpress und Thesis Theme

1. Zur Wordpress Administrationsbereich. Plugins-> Neu hinzufügen, suchen Sie nach "NAVt". Das Plugin wird angezeigt. Klicken Sie auf [Install], Install [jetzt], "Activate Plugin".
2. Extras-> NAVT Listen, Inside "Navigation Group"-Bereich zu finden "group name" und geben Sie ein: "menu1" im Feld, drücken Sie [Create]-Taste. "Menu1" Rechteck Bereich bekam erstellt.
   Diese "menu1" Bereich werden die wichtigsten Spielplatz für Bau-Menü werden. Sie werden per Drag & Drop hier Ihr Menü-Elemente.
3. In "Vermögen" Bereich zu finden "andere" Listenfeld und klicken Sie auf "Home" Wahl. "Home" wird im Inneren des thingie erscheint "nicht zugewiesen"-Bereich. Weird, eh? Keine Sorge, solange es funktioniert - und es wird für uns.
4. Ziehen Sie diesen "Home" thingie von "Assets"-Bereich in "menu1" Rechteck Bereich. Es wird "Home" im Menü den Eintrag 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ü drin sein "menu1" Rechteck. Sie können klicken Sie auf den Seiten, Kategorien, Benutzer und einige benutzerdefinierte Elemente wie "Liste Teiler" und "Code-Block". Code-Block ist cool hin zum Custom-Schnipsel im Menü hinzuzufügen.
   • Sie können Menüpunkte innen ziehen "menu1" Gebiet zu ordnen ihre Reihenfolge.
   • Sie können hierarchische Position eines jeden Menüpunkt mit Adjust "<" und ">" Pfeile.
   • Mit einem Klick auf Text Namen der einzelnen Menüpunkt - öffnet das übersteigt jede Vorstellungskraft extra Anpassungsdialogfeld für diesen Artikel. Ich meist standardmäßig verwendet, aber technisch kann man verrückt werden und beginnen Sie, image-based Menüoptionen und fügen Brocken von HTML-Code hinein. Gehen Sie mit Vorsicht aber.
   • Für linkless unclikable Untermenüs, die als "Eltern" für andere "sub-Kinder" Früher habe ich "Code-Block" Art dienen wird. Zum Beispiel beim Customizing dieser Codeblock Artikel, den ich für "Alias eingegeben Menüpunkt" = "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. Finish ursprünglichen Gebäudes und klicken Sie dann auf "Gear"-Symbol, um Ihre Menüstruktur:
   
7. Es wird offener Dialog mit 4 Registerkarten: Optionen, Display, CSS, Theme.
   1. Zur Registerkarte "Optionen" und stellen Sie sicher alles deaktiviert ist und "Gruppen-Name", sagt: "menu1"
   2. Zur Registerkarte "Anzeige" und stellen Sie sicher, alles auf "Show-Gruppe Navigation auf ..." Bereich überprüft [x]. Lassen Sie den Rest auf Standardwerte.
   3. Gehen Sie zu "CSS" und wählen Optionsfeld (x) "nicht zur Anwendung CSS-Klassen".
   4. Gehen Sie zu "Theme"-Reiter und füllen es in etwa so aus:
      
      INSERT INTO "Tags hinzufügen, bevor ..." area diesen Code ein:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      INSERT INTO "Tags hinzufügen ... nach" area diesen Code ein:
      <br style='clear: left' /></div>
   5. Drücken Sie [Speichern / Schließen] Taste
8. An diesem Punkt im Menü Gebäude von innen NAVT Plugin-Optionen abgeschlossen ist.
   Jetzt ist es Zeit zu Zeit ein wenig zu tun bis zur Diplomarbeit Thema , um es fertig. Dafür haben wir ein paar eigene Dateien hinzufügen - CSS und JavaScript, um das Menü gehört und aktualisieren Thesis "custom_functions.php brauchen
9. Download des kompletten Satz von Dateien hier .
10. Entpacken Archiv. Wenn Sie Ihr custom_functions.php mit Ihren Anpassungen aktualisiert - Sie müssen sie mit meinen Sachen zu verschmelzen. Ich überlasse es Ihnen.
    Wenn Sie noch nicht berührt - zögern Sie es mit mir zu überschreiben. Bitte beachten Sie: Ich zog es auf die Position im Menü unter der Website-Header (default ist oben) - so meine Einstellung enthalten diese Einstellung auch.
11. Upload-Archiv inklusive aller Unterverzeichnisse und Dateien im Rahmen Ihrer Diplomarbeit Thema 'custom' Verzeichnis, etwa so:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Ich habe nicht custom.css berührt - ich ziehe es im Menü-spezifische CSS unter ihren eigenen Standorten zu vermeiden, halten Mess Inside custom.css
12. An dieser Stelle können Sie Ihre Website neu laden und sehen neue schöne neue mehrstufige, verschachtelte, optimierte SEO-Menü.
13. Sie können jederzeit zurück zu gehen und NAVT Einstellungen Passen Sie Ihr Menü mit mehr Wahlmöglichkeiten oder neu positionieren nichts. Es wird auf Live-Site wider automatisch.

Der Weg vor uns ...

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

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

Ich denke, es ist ziemlich nett. Es gibt viele weitere Beispiele finden Sie unter Navigationsinstrumente Dynamic Drive - alle von ihnen sind möglich Aufwand anpassen für Diplomarbeiten und andere Themen Wordpress mit einigen:

Dynamic Drive horizontalen Menüs

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

Ich könnte diese Arbeit für Sie erledigen auf Vertragsbasis. Wählen Sie einfach das Menü Sie möchten, kontaktieren Sie mich und ich werde gehen Arbeiten am Code und Anleitungen für Ihr.

$ 20

Und natürlich, wenn man es zu tun, um Gebäude Super Premium Wordpress SEO optimiert Mitgliedschaft Portal - die beste Lösung für Sie:
Thesis Theme + MemberWing Mitgliedschaft Plugin + selbst gehosteten Wordpress natürlich.

Tagged as: CSS-Menü für WordPress , Thema der Dissertation , Diplomarbeit Thema hierarchische Menüs , Diplomarbeit Thema Multilevel-Menü , Diplomarbeit Thema springen , Thema der Dissertation verschachtelten Menüs , Thema der Dissertation Tutorial , WordPress css-Menü , wordpress verschachtelte Menüs