Quest doskonałego menu ...
Jest to część 1 poradnik
Część 2 tego kursu uczy, jak budować + menu pionowe ciemne palety kolorów dla poziomym
I postanowili się tematem pracy magisterskiej , bo jeden z moich klientów poinformował mnie o kwestie zgodności Praca i moje członkostwo w miejscu wordpress wtyczki MemberWing. Naprawiłem go, a następnie postanowił przyjrzeć się bliżej i rzeczywiście Praca w jedno, aby oglądać filmy na pierwszej stronie głównej serwisu Praca - Diythemes.com .
Pod wrażeniem tego, co mnie najbardziej jest dbałość o szczegóły, łatwość obsługi, a przede wszystkim - SEO funkcje, które są tak dobrze myśli.
MemberWing wtyczki członkostwa został zaprojektowany od podstaw dla członkostwo witryn, które będą musiały wyciągnąć jak najwięcej soku SEO jak to możliwe. Więc zwrócić uwagę na wiele wiele akcesoriów SEO i doskonałości w MemberWing. Wielu z moich klientów pyta o różne tematy w użyciu i temat o które było tak dobrze SEO zoptymalizowany z głębi byłoby doskonałe dopasowanie do członkostwa portal przedsiębiorców.
Łącząc kompetencje z MemberWing SEO SEO z uprawnień z tematem pracy magisterskiej to daje najlepsze możliwości w rankingu moich klientów. Więc mam Thesis i grał z nią na dzień.
Jest to doskonały temat na wszystkie sposoby. Część nawigacji to jest jednak nieco ograniczona w funkcji. Począwszy od Thesis 1.5 + jest tylko jeden poziom menu. My zwykle pragnie być w stanie dostosować nawigacji tyle, ile potrzeba. Niektóre witryny mają tylko kilka stron, wiele innych ton statycznych stron + zillions artykułów / postów + wiele kategorii.
Więc w idealnym świecie o szansę na stworzenie estetyzacja hierarchicznie zorganizowane przyjazne dla użytkownika menu jest koniecznością. Prawo Praca off the bat jest dobry patrząc nawigacji, ale zauważyłem, że wszystkie strony oparte Praca szukają jak bliźniacy. Dostosowywanie menu nawigacji Praca nie jest to łatwe więc większość ludzi po prostu zostawić jak jest. Nie ma możliwości zmiany kolejności kategorii w menu lub w ich miejsce między stronami. I znowu, możliwość tworzenia struktur zagnieżdżonych menu brakuje. Więc postanowiłem zobaczyć, co można zrobić.
Po próbie około pół tuzina menu / plugins związane nawigacji ustawiam mój wybór na Wordpress Plugin NAVT Lista nawigacji .
plugin NAVT jest zasadniczo z nieuporządkowaną listę generator super wyobraźnia i trochę trudno postać nietradycyjny panelu administracyjnego. Co wprowadza w błąd, to że faktycznie nie stworzyć fajne menu szuka sama. To nie najtrudniejsza część pracy jednak - daje możliwość wizualnie współdziałać i generowania listy nieuporządkowanej - szkielet menu-to-be. I mogą tworzyć zbyt wielu menu. Można wyciągnąć wszelkiego rodzaju rzeczy Wordpress w menu: strony, postów, artykułów, kategorii, użytkowników, bloków kodu, linków zewnętrznych, rozdzielacze, separatory i łączyć ze sobą i gniazdo i zorganizować i dostosować je w każdej strukturze drzewa jak ty chcesz.
NAVT generuje dla Ciebie spowodowało HTML nieuporządkowane listy. Drugi piękno NAVT jest to, że pomaga, aby dodać nowe menu na swój temat za pośrednictwem słynnego logika opiera JQuery, ale bez konieczności zmiany kodu! NAVT pozwala na określenie: "zastąpić ten element # z moim nowym menu NAVT". # Element może być id lub klasy drogi istniejące lub menu tag elementu div, który jest generowany przez aktualnego tematu. Tak 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 szybko. Część NAVT wyzwanie dla wszystkich jest to, że będziesz musiał pochodzić z rzeczywistych obrazów + CSS + kod JavaScript menu dla siebie. I to do ciebie, aby dowiedzieć się, gdzie i jak zintegrować te pliki, sprawiając, że rzeczy się prawidłowo ze sobą połączone.
Szczerze, nie wiedząc, JQuery + trochę + PHP + CSS o godnej doświadczenie w Wordpress - to jest to trudno wyciągnąć.
Chętnie Wiem, że to rzeczy nieco więc postanowiłem ugryźć kulę i wolności człowieka przypomnienie tego budynku w najlepsze z najlepszych menu nawigacji dla Wordpress. Właśnie potrzeba, aby dowiedzieć się źródłem niektórych estetyzacja poziome menu CSS. Wybrałem dysk dynamiczny serwis za najlepszy wybór, pokazy i źródeł.
I jeden dzień poświęcony na studia Praca i bawić się z wtyczki NAVT. Na koniec I dumnie utworzone niestandardowe, elastyczne, SEO zoptymalizowane, wielopoziomowe, zagnieżdżone struktury nagivation Wordpress + dla mojej pracy dyplomowej na miejscu.
Lista funkcji wielopoziomowego, Wordpress zagnieżdżonych menu nawigacji dla Thesis Theme
(Musisz kochać tych rzeczy):
- Zawodowych, czyste spojrzenie i czuć.
- Wsparcie dla wszystkich nowoczesnych przeglądarek, włącznie z MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome w obu trybach javascript i nie-javascript.
- Wdziękiem downgradable dla przeglądarek innych niż javascript. Ci menu będzie użyteczny, podobne z wyglądu i pracy nawet dla wyłączoną obsługę JavaScript przeglądarki (choć tylko na poziomie górnej nawigacji będą widoczne i nie flyouts stanie się oczywiście jak są wykonane przez javascript).
- SEO friendly funkcji - menu listy nieuporządkowane kod generowany jest w HTML. Google i inne roboty będą mogły indeksować struktury nawigacji i linki do stron wewnętrznych.
- Wsparcie dla nieograniczonej gniazdowania poziomów i podpoziomów.
- Wsparcie dla dowolnej kolejności lub stron, postów (zdefiniowane przez użytkownika URI), kategorii, użytkowników, niestandardowe bloków kodu i linków zewnętrznych, w menu.
- Poparcie tekstu, jak również obraz na bazie elementów menu. (Mam jeszcze spróbować tych chociaż).
- Struktura menu i zawartość jest regulowana przez wizualnie obszarze NAVT admin.
- Compact: JQuery na flyouts dla zagnieżdżonych poziomów.
- Szybko: JQuery do menu jest ładowane z serwerów Google (Thesis miłości bym się do tego samego, a nie wyciągając go na miejscu). To przyspieszyć co nieco.
- Skalowalność - Tego typu menu można edytować i konfiguracji w dowolnym momencie poprzez ustawienia NAVT plugin bez potrzeby pisania kodu w dowolnym miejscu.
Kiedyś to doskonałe dynamiczne menu z dysku portal jako baza. Musiałem dostosować kodu javascript nieco, jak również zawierać fragment PHP w custom_functions.php, aby pracować z Thesis. Również liczbę stron wcześniej, kategorii i stanowisk z mojej strony były używane do montażu konstrukcji menu. Specyfika witryny będą różne - ale koncepcje będą takie same.
Niech więc kontynuować, dobrze?
Instrukcja krok po kroku skonfigurować NAVT oparte zagnieżdżonych, konfigurowalne, wielopoziomowe, SEO friendly
i po prostu fajne menu patrząc na Wordpress i Thesis Theme
- Przejdź do panelu admin Wordpress. Plugins-> Dodaj, wyszukaj "navt". Plugin nie zostaną pokazane. Kliknij przycisk [Install], [Zainstaluj teraz], "Uaktywnij Plugin".
- Narzędzia-> NAVT Listy, Inside "Navigation Group" obszar znaleźć "Nazwa grupy" i wpisz: "menu1" w polu, naciśnij [przycisk Utwórz]. "Menu1" obszar prostokąta, ale stworzył.
Ta "menu1" obszar będzie głównym menu na budowę placu zabaw. Będziesz przeciąganie i upuszczanie elementów o swoje menu. - W "aktywów" obszar znaleźć "inne" listbox i kliknij "Start wyboru. "Home" ukaże się thingie wewnątrz "nieprzypisane" obszar. Dziwne, co? Nie martw się, tak długo, jak to działa - i to będzie dla nas.
- Przeciągnij "Home" z thingie "aktywów" w obszarze "menu1" obszar prostokąta. Stanie się ona "Home" w menu.
- Powtórz kroki 3-4 dla niektórych stron z "Strony obszarze, jak również w kategorii" kategorii "obszar. Drag 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 "rozdzielacz liście" i "bloku kodu. bloku kodu jest fajny sposób dodać własne fragmenty wewnątrz menu.
- Można przeciągać elementy menu wewnątrz "menu1" obszar Aby zmienić ich kolejność.
- Można dostosować hierarchiczną pozycję każdej pozycji z menu "<" i ">" strzałkami.
- Kliknięcie na nazwę tekst każdej pozycji menu - otwiera umysł grzebanie dodatkowe okno dostosowywania do tej pozycji. I najczęściej używane ustawienia domyślne, ale technicznie można zwariować i zacząć tworzyć obraz wyborów opartych na menu i dodać fragmenty kodu HTML do niego. Należy uważać, though.
- Dla linkless unclikable podmenu, które będą służyć jako "rodzice" dla innych "sub-dzieci" kiedyś "blok Code" typu. Na przykład, gdy taki element dostosowywania bloku kodu wpisałem do "Menu pozycji alias" = "MemberWing" i "Enter blok kodu:" = "<a href='#'> MemberWing </ a>". O href = "#" sprawi, że nie klikać, ale działa jako ważny "macierzystego" wybór menu.
- Oto jak mój NAVT "menu1" budować struktury wyglądała prawie ukończone:
- kliknij przycisk Zakończ początkowej budynku, a następnie "narzędzia", aby dostosować strukturę menu:
- Będzie on otwarty dialog z 4 zakładki: Opcje, Wyświetlacz, CSS, tematu.
- Przejdź do "Options" karty i upewnić, że wszystko jest zaznaczone i "nazwa grupy", mówi: "menu1"
- Przejdź do sekcji "Display" karty i upewnić, że wszystko w sprawie "grupy Pokaż żeglugi na ..." obszar jest zaznaczone [x]. Resztę pozostawić na domyślnych.
- Przejdź do "CSS i zaznacz opcję (x)" Nie należy stosować klasy CSS ".
- Przejdź do "tematu" kartę i wypełnić go tak:
Wstawić w "Dodaj tagi przed ..." obszar ten kod:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Wstawić w "Dodaj tagi po ..." obszar ten kod:
<br style='clear: left' /></div> - Naciśnij [Zapisz / zamknij] przycisk
- W tym miejscu budynek z menu opcji w NAVT plugin jest kompletny.
Teraz nadszedł czas, aby zrobić trochę dostroić się do tematu pracy magisterskiej , aby było gotowe. Na, że musimy dodać kilka własnych plików - CSS i JavaScript, który należy do menu i aktualizacja custom_functions.php Thesis " - Pobierz kompletny zestaw plików tutaj .
- Rozpakuj archiwum. Jeśli masz zaktualizowany custom_functions.php z dostosowań - trzeba je połączyć z moich rzeczy. Zostawię go dla Ciebie.
Jeśli jeszcze nie dotknął go - proszę go zastąpić z kopalni. Uwaga: wolałem pozycji menu w nagłówku strony (domyślnie jest to powyżej) - a więc moje korekty uwzględnionej tej preferencji, jak również. - Prześlij archiwum w tym wszystkie podkatalogi i pliki pod tematem pracy magisterskiej "custom" katalogu, na przykład:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Nie dotykałem custom.css - Wolę zachować specyficzne menu CSS w ramach ich własnych miejsc unikać tworzenia bałagan wewnątrz custom.css - W tym momencie można przeładować stronę i sprawdzić nowe piękne nowe wielopoziomowe, zagnieżdżone, SEO zoptymalizowane menu.
- Zawsze możesz wrócić do ustawień NAVT i dostosować menu większy wybór lub położenia nic. zostanie uwzględnione w witrynie automatycznie.
Droga przed nami ...
Ten tutorial zawiera kreatywne przykład jednego typu menu. Grałem z innym - wystarczy zobaczyć, jak ciemne menu będzie wyglądać:
Temat pracy magisterskiej - wielopoziomowe menu CSS zagnieżdżonych - ciemne palety
Myślę, że jest całkiem miły. Istnieje wiele innych próbek nawigacyjnych dostępnych na Dynamic Drive - wszystkie z nich można dostosować do pracy magisterskiej i innych tematów Wordpress z wysiłkiem:
Dynamic Drive poziome menu
Mam nadzieję, że znajdziesz tego kursu korzystne i pożyteczne. Jak powiedziałem, jest to możliwe, aby dostosować żadnej z tych menu dla Thesis - to biorąc pod uwagę czas i chęci aby tak się stało.
Mógłbym to zrobić dla ciebie pracę na podstawie umowy. Wystarczy wybrać z menu chcesz, skontaktuj się ze mną , a ja pracy nad kodem i instrukcje dla Twojej witryny.
20 dolarów
I oczywiście jeśli do budowy super zoptymalizowany SEO wordpress członkostwo premium portal - najlepsze rozwiązanie dla tego:
Thesis Theme + plugin członkostwa MemberWing + własny akademik Wordpress oczywiście.
