W poszukiwaniu idealnego menu ...

Jest to część 1 samouczek
Część 2 tego tutoriala uczy jak zbudować pionowe menu + ciemna paleta kolorów dla poziomym

Zdecydowałem się tematem pracy magisterskiej , bo jeden z moich klientów poinformował mnie o problemy z kompatybilnością między Thesis i moje członkostwo wordpress strony wtyczki MemberWing. Naprawiłem go, a następnie postanowił bliżej przyjrzeć się pracy dyplomowej i faktycznie chciało się oglądać filmów na pierwszej stronie głównej witryny Thesis - Diythemes.com .
Co mnie zadziwiło najbardziej to dbałość o szczegóły, łatwość obsługi i przede wszystkim - funkcje SEO, które są tak dobrze myśli.
Wtyczki członkostwa MemberWing został zaprojektowany od podstaw dla witryn członkostwa, które należałoby wyciągnąć jak najwięcej soku SEO jak to możliwe. Więc zapłaciłem dużo uwagi do wielu ulepszeń i SEO doskonałości w MemberWing. Wielu z moich klientów pyta o różnych tematów i posiadające temat ten został tak dobrze SEO zoptymalizowane z głębi będzie doskonałe dopasowanie dla przedsiębiorców portal członkostwa.

Połączenie kompetencji SEO MemberWing z uprawnień SEO temat pracy magisterskiej to daje najlepsze rankingu możliwości moich klientów. Więc mam Thesis i bawił się nim przez jeden dzień.

Jest to doskonały temat na wszelkie sposoby. Część nawigacji to jednak jest nieco ograniczony w swoich funkcjach. Począwszy od Thesis 1.5 + jest to jeden poziom menu tylko. Mój zwykły pragnieniem jest, aby być w stanie dostosować nawigację nawet w razie potrzeby. Niektóre witryny mają tylko kilka stron, wiele innych ton statycznych stron + miliardy artykułów / postów + wiele kategorii.
Tak więc w idealnym świecie o szansę na stworzenie ładne, zorganizowane hierarchicznie przyjazne dla użytkownika menu nawigacji jest koniecznością. Prawo pracy magisterskiej off the bat ma dobrą nawigację szuka, ale zauważyłem, że wszystkie tezy oparte na stronach internetowych szukasz jak bliźniaki. Dostosowywanie menu Praca nie jest to łatwe, więc większość ludzi po prostu zostawić tak jak jest. Nie ma sposobu, aby zmienić kolejność kategorii w menu lub umieścić je w między stronami. I znowu, zdolność do tworzenia struktury zagnieżdżone menu brakuje. Więc postanowiłem zobaczyć, co można zrobić.
Po próbie o pół tuzina menu / nawigacja wtyczek związanych mogę ustawić wybór na Wordpress NAVT Lista Plugin nawigacji .
Wtyczki NAVT jest zasadniczo nieuporządkowana generator lista z bardzo fantazyjne i trochę trudno postać nietradycyjne administratora. Co mylące jest to, że faktycznie nie tworzyć fantazyjne patrząc menu samodzielnie. To nie jest najtrudniejsza część pracy jednak - daje możliwość wizualnie współdziałać i generować listę nieuporządkowaną - szkielet menu-to-be. I może stworzyć wiele menu też. Możesz wyciągnąć wszelkiego rodzaju rzeczy Wordpress w menu: strony, wiadomości, artykuły, kategorie użytkowników, bloki kodu, linki zewnętrzne, rozdzielacze, separatory i łączyć ze sobą i gniazdo i zorganizować i dostosować je w każdej strukturze drzewa-jak ty chcesz.
NAVT generuje można spowodowało HTML nieuporządkowaną listę. Druga piękna NAVT jest to, że pozwala, aby wstawić nowe menu do motywu przez słynnego JQuery opartych na logice, ale bez potrzeby zmiany kodu! NAVT pozwala na określenie: "wymienić ten element # z moim nowym menu NAVT". # Elementem może być identyfikator lub klasy drogi istniejących menu lub tag elementu div, który jest generowany przez aktualnego tematu. Więc NAVT to wymiana dla Ciebie bez wymuszania, aby przejść do kodu tematu i uczynić go bardziej brudny, niż jest obecnie. Jeśli to wszystko brzmi jak bełkot - nie martw się - ja Cię krok po kroku wkrótce. Wyzwaniem w NAVT dla wszystkich jest to, że będziesz musiał pochodzić z rzeczywistych CSS + zdjęcia + javascript kod menu siebie. I to do ciebie, aby dowiedzieć się, gdzie i jak zintegrować te pliki i zrobić te rzeczy właściwie się ze sobą połączone.
Z poważaniem, nie wiedząc, JQuery + niektóre PHP + CSS + o godne doświadczenia z Wordpress - to coś jest trudne do ciągnięcia.
Chętnie Wiem, że to rzeczy trochę więc postanowiłem zacisnąć zęby i ludzkości przewodnik do wolności w budowaniu najlepszych z najlepszych menu nawigacji dla Wordpress. I po prostu potrzebne, aby dowiedzieć się źródłem niektórych ładne menu poziome CSS. Wybrałem dynamicznej strony internetowej napęd na ich najlepszy wybór, dema i źródeł.

I poświęcił dzień na studia Praca i grać z wtyczki NAVT. Na koniec I dumnie utworzone niestandardowe, elastyczne, SEO zoptymalizowane, wielopoziomowe, zagnieżdżone struktury nagivation mojej pracy Wordpress + witryn w oparciu.

Lista możliwości wielopoziomowego, zagnieżdżone menu nawigacji dla Wordpress Theme Thesis
(Musisz kochać te rzeczy):

• Professional, czysty wygląd.
• Wsparcie dla wszystkich nowoczesnych przeglądarkach, w tym MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome, zarówno javascript i nie javascript trybach.
• Wdziękiem downgradable dla przeglądarek bez javascript. Jesteś menu będzie użyteczny, podobne wizualnie i pracy nawet dla wyłączoną obsługę JavaScript przeglądarki (choć tylko na górnym pasku nawigacyjnym poziomie będą widoczne i nie paletach wysuwanych się stanie, oczywiście jak są wykonane przez javascript).
• SEO friendly cechy - nieuporządkowana kod menu lista jest generowana w HTML. Google i innych wyszukiwarek będzie w stanie indeksować struktury nawigacji i linki do wewnętrznej strony.
• Wsparcie dla nieograniczonej poziomy zagnieżdżenia i podpoziomów.
• Wsparcie dla dowolnej kolejności lub stron, postów (poprzez zdefiniowane przez użytkownika URI), kategorii, użytkowników, własne bloki kodu i zewnętrznych linków w menu.
• Obsługa tekstu, a także oparty na obrazie elementy menu. (I jeszcze spróbować tych chociaż).
• Struktura menu i zawartość jest wizualnie regulowane przez obszar NAVT admin.
• Compact: JQuery na paletach wysuwanych dla zagnieżdżonych poziomów.
• Szybko: JQuery dla menu jest ładowany z serwerami Google (Chciałbym Thesis się zrobić to samo, zamiast ciągnąc go lokalnie). To przyspieszyć rzeczy trochę.
• Skalowalność - Ten typ menu jest edytowalny i konfiguracji w dowolnym momencie za pośrednictwem NAVT ustawienia wtyczki bez konieczności kodowania w dowolnym miejscu.

Kiedyś to doskonałe menu z dynamiczną jazdę portal jako baza. Musiałem dostosować kod javascript trochę jak to fragment PHP w custom_functions.php, aby pracować z pracy dyplomowej. Także liczba istniejących wcześniej stron, kategorii i postów z mojej strony były używane do montażu struktury menu. Twój specyfiki obiektach będą różne - ale koncepcje będą takie same.
Więc dalej, dobrze?

Instrukcje krok po kroku skonfigurować NAVT oparte zagnieżdżone, konfigurowalne, wielopoziomowe, SEO friendly
i po prostu fajnie wyglądający menu dla Wordpress i Thesis Theme

1. Idź do Wordpress panelu administracyjnego. Wtyczki-> Dodaj nowe, szukaj "navt". Wtyczka pojawi się. Kliknij [Zainstaluj], [Zainstaluj teraz], "Activate Plugin".
2. Narzędzia-> Listy NAVT, Inside "Nawigacja Grupa" obszar znaleźć "Nazwa grupy" i wpisz: "menu1" w polu, naciśnij przycisk [Create] przycisku. "Menu1" prostokątnego obszaru, ale stworzył.
   Ta "menu1" obszar będzie głównym placem zabaw dla budowy menu. Będziesz przeciąganie i upuszczanie tutaj swoją elementów menu.
3. W "aktywów" obszar znaleźć "inne" pole listy i kliknij przycisk "Home" wyboru. "Home" thingie pojawi się wewnątrz "nieprzypisane" obszar. Dziwne, co? Nie martw się, tak długo, jak to działa - i to będzie dla nas.
4. Przeciągnij "Home" thingie od "aktywów" w obszarze "menu1" obszar prostokąta. Stanie się "Home" w menu.
   • Powtórz kroki 3-4 dla niektórych stron z "Strony" obszaru, jak również kategorie w "kategorii" obszaru. Przeciągnij inne elementy, które mają być dostępne w menu wewnątrz "menu1" prostokąta. Możesz kliknąć na strony, kategorie użytkowników oraz niektóre niestandardowe elementy, takie jak "dzielnik list" i "blok kodu". Bloku kodu jest fajny sposób na dodawanie własnych fragmentów wewnątrz menu.
   • Można przeciągać elementy menu wewnątrz "menu1" obszar zmienić ich kolejność.
   • Możesz dostosować pozycji hierarchicznej każdej pozycji menu "<" i ">" strzałkami.
   • Kliknięcie na nazwę tekst z każdej pozycji w menu - otwiera umysł grzebanie dodatkowych dialogowym Dostosowywanie dla tej pozycji. I najczęściej używane ustawienia domyślne, ale technicznie można zwariować i zacząć tworzyć na podstawie obrazów wybór menu i dodać fragmenty kodu HTML do niego. Postępuj ostrożnie jednak.
   • Dla linkless unclikable podmenu, które będą służyć jako "rodzice" dla innych "sub-dzieci" Kiedyś "blok kodu" typu. Na przykład podczas dostosowywania takich pozycji bloku kodu wszedłem do "alias menu item" = "MemberWing" i "Enter bloku kodu:" = "MemberWing href='#'> </ a>". Po href = "#" sprawi, że nie można klikać, ale działa jako ważny "rodziców" menu do wyboru.
5. Oto jak mój NAVT struktury "menu1" zbudować wyglądało już na ukończeniu:
   
6. Zakończ początkowej budynku, a następnie kliknij na "biegu", aby dostosować strukturę menu:
   
7. Otworzy się okno dialogowe z 4 zakładki: Opcje, Display, CSS, Theme.
   1. Idź do "Opcje" i upewnij się że wszystko jest odznaczone, a "Nazwa grupy" mówi: "menu1"
   2. Idź do "Display" i upewnij się że wszystko "grupy nawigacji Pokaż ..." obszar jest zaznaczone [x]. Resztę zostaw na domyślnych.
   3. Idź do "CSS" i wybierz opcję (x) "Nie stosować klasy CSS".
   4. Przejdź do "tematu" kartę i wypełnić go tak:
      
      Włóż w "Dodaj tagi przed ..." obszar ten kod:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Włóż w "Dodaj tagi po ..." obszar ten kod:
      <br style='clear: left' /></div>
   5. Naciśnij przycisk [save / Close]
8. W tym budynku menu punkt w opcji NAVT wtyczki jest kompletny.
   Teraz nadszedł czas, aby zrobić trochę podkręcić na temat pracy magisterskiej , aby było gotowe. Do tego musimy dodać kilka własnych plików - CSS i JavaScript, który należy do menu i Thesis update 'custom_functions.php
9. Pobierz kompletny zestaw plików tutaj .
10. Rozpakuj archiwum. Jeśli masz zaktualizowany custom_functions.php z dostosowań - trzeba je połączyć z moich rzeczy. Zostawiam to do ciebie.
    Jeśli nie dotknął - prosimy go zastąpić z kopalni. Uwaga: wolałem pozycji menu pod nagłówkiem strony (domyślnie jest to powyżej) - więc moje regulacji zawartych tej preferencji, jak również.
11. Prześlij archiwum w tym wszystkie podkatalogi i pliki pod tematem pracy magisterskiej "custom" katalogu, np.:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Nie tknąłem custom.css - Wolę zachować specyficzne menu CSS w ramach ich własnych miejscach, aby uniknąć tworzenia bałagan wewnątrz custom.css
12. W tym momencie można przeładować stronę internetową i zobaczyć nowe piękne nowe wielopoziomowe zagnieżdżone, SEO zoptymalizowane menu.
13. Zawsze można wrócić do NAVT ustawienia i dostosować menu większy wybór lub położenie czegokolwiek. Będzie to widoczne na witrynie w automatycznie.

Droga ...

Ten poradnik zawiera kreatywne przykład jednego typu menu. Grałem z innym - wystarczy zobaczyć, jak ciemne menu wygląda tak:

Temat pracy magisterskiej - wielopoziomowe zagnieżdżone menu CSS - ciemne palety

Myślę, że jest ładna. Istnieje wiele próbek nawigacyjne dostępne w wersji Dynamic-Drive - wszystkie z nich są możliwe do dostosowania do pracy magisterskiej i innych tematów Wordpress z pewnym wysiłkiem:

Dynamic Drive poziome menu

Mam nadzieję, że znajdziesz ten tutorial korzystne i pożyteczne. Jak powiedziałem, możliwe jest dostosowanie każdej z tych menu do pracy magisterskiej - to biorąc pod uwagę czas i chęć, żeby tak było.

Co mogłem zrobić, to działa, na podstawie umowy. Wystarczy wybrać z menu chcesz, skontaktuj się ze mną , a ja pracy nad kodem i instrukcje na swojej stronie internetowej.

20 dolarów

I oczywiście jeśli do budynku bardzo SEO zoptymalizowane Premium Wordpress członkostwa portal - najlepsze rozwiązanie dla tego:
Temat pracy dyplomowej + wtyczki członkostwa MemberWing + self gospodarzem Wordpress oczywiście.

Tagged as: menu CSS dla wordpress , temat pracy , praca motyw menu hierarchicznym , temat pracy wielopoziomowe menu , nagivation tematu pracy , tezy temat menu zagnieżdżone , samouczek temat pracy , wordpress css menu , wordpress zagnieżdżone menu