Quest for the perfect menu ...
To jest część 1 samouczek
Część 2 tego kursu uczy, jak budować pionowe menu + ciemny paletę kolorów dla całością
Zdecydowałem się tematem pracy dyplomowej, ponieważ jeden z moich klientów, poinformował mnie o kwestie zgodności Thesis i my wordpress site członkostwa MemberWing wtyczki. Poprawiłem go, a następnie postanowił bliżej przyjrzeć się pracy dyplomowej i rzeczywiście jedno, aby oglądać filmy na pierwszej stronie głównej witryny Thesis - Diythemes.com.
Co zrobiło na mnie wrażenie najbardziej, to dbałość o szczegóły, przyjazność dla użytkownika, a przede wszystkim - SEO funkcje, które są tak dobrze myśli.
MemberWing wtyczki członkostwa został zaprojektowany od podstaw do witryn członkostwa, które będą musiały wyciągnąć jak najwięcej soku SEO, jak to możliwe. Tak więc zwrócić uwagę na wiele wiele innych akcesoriów SEO i doskonałości w MemberWing. Wielu z moich klientów pyta o różne tematy do wykorzystania oraz o temat, który został tak dobrze SEO zoptymalizowane z głębi byłoby doskonałe dopasowanie do członkostwa w portalu przedsiębiorców.
Połączenie kompetencji SEO z MemberWing z uprawnień SEO z tematem pracy dyplomowej dałoby rankingu najlepszych okazji do moich klientów. Więc mam Thesis i grał z nią na dzień.
Jest to doskonały temat na wszelkie sposoby. Strony nawigacji to jednak jest nieco ograniczona w funkcji. Począwszy od Thesis 1.5 + jest tylko jeden poziom menu. Mój zwykły pragnieniem jest, aby móc dostosować nawigacji tyle, ile potrzeba. Niektóre witryny mają tylko kilka stron, wiele innych ton statycznych stron + zillions artykułów / stanowisk + wiele kategorii.
Tak więc w idealnym świecie o możliwość utworzenia estetyzacja hierarchicznie zorganizowany przyjazne dla użytkownika menu jest koniecznością. Prawo pracy dyplomowej off the bat ma good looking nawigacji, ale zauważyłem, że wszystkie Thesis oparte na stronach internetowych szukają jak bliźniacy. Dostosowywanie menu nawigacyjne Teza nie jest naprawdę łatwe, więc większość ludzi po prostu zostawić jak jest. Nie ma sposobu, aby zmienić kolejność kategorii w menu lub umieszczania ich w innych stron. I znowu, zdolność do tworzenia struktur zagnieżdżonych menu brakuje. Więc postanowiłem zobaczyć, co można zrobić.
Po próbie około pół tuzina menu / nawigacji związanych wtyczek ustawić wybór na Wordpress Navigation List Plugin NAVT.
Wtyczki NAVT zasadniczo nieuporządkowane generator lista super fajne i trochę trudno postać nietradycyjna interfejs administratora. Co błąd o to, że w rzeczywistości nie tworzyć fantazyjne menu szuka samodzielnie. To jest najtrudniejsza część pracy jednak - daje możliwość wizualnie współdziałać i generować listy nieuporządkowanej - szkielet menu-to-be. A może tworzyć zbyt wielu menu. Można wyciągnąć wszelkiego rodzaju rzeczy Wordpress w menu: strony, stanowisk, artykułów, kategorii, użytkowników, bloki kodu, linki zewnętrzne, przekładki, separatory i łączyć ze sobą i gniazdo i zorganizować i dostosować je w każdym strukturę drzewa można chcieć.
NAVT generuje dla Ciebie spowodowało HTML listy nieuporządkowanej. Druga piękna NAVT jest to, że pozwala, aby dodać nowe menu do Twojego tematu przez słynnego JQuery logice, ale bez konieczności, aby zmienić kod? NAVT pozwala na określenie: "# zastąpić ten element z moim nowym menu NAVT". # element może być dowód osobisty lub klasy drogi menu istniejących lub znacznika div element, który jest generowany przez aktualnego tematu. Więc NAVT to zastępstwo dla Ciebie bez zmusza, aby przejść do tematu kodu i uczynić go bardziej bałagan niż już jest. Jeśli to wszystko brzmi jak bełkot - nie martw się - ja Cię krok po kroku szybko. Wyzwanie część NAVT dla wszystkich jest to, że będziesz musiał wymyślić rzeczywistych CSS + zdjęcia + kod JavaScript do menu siebie. I to do Ciebie, aby dowiedzieć się, gdzie iw jaki sposób zintegrować te pliki i dokonać tych rzeczy odpowiednio połacz razem.
Z poważaniem, nie wiedząc, niektórzy JQuery + PHP + CSS + o godne doświadczenia z Wordpress - to jest to, trudno wyciągnąć.
Chętnie Wiem, że to rzeczy nieco, więc postanowiłem Bite the Bullet i ludzkości przewodnik do wolności w tworzeniu najlepszych z najlepszych menu nawigacyjne dla Wordpress. Ja po prostu potrzebne, aby dowiedzieć się źródłem niektórych estetyzacja menu poziome CSS. Wybrałem dynamiczny serwis pojazdów mechanicznych za najlepszy wybór, pokazy i źródeł.
Poświęciłem dzień na studia dyplomowe i bawić się z wtyczki NAVT. Pod koniec I dumnie utworzone niestandardowe, elastyczne, SEO, zoptymalizowany, wielopoziomowe, zagnieżdżonej struktury nagivation mojej + Wordpress Thesis miejscu postoju.
Lista funkcji wielopoziomowego, Wordpress zagnieżdżone menu nawigacyjne dla Thesis Theme
(you got to love this stuff):
- Profesjonalne, czyste spojrzenie i czuć.
- Wsparcie dla wszystkich nowoczesnych przeglądarkach, w tym 6,7 Firefox, Opera, Safari, Firefox 3.x, Google Chrome w obu JavaScript i inne rodzaje JavaScript.
- Wdziękiem downgradable dla non-javascript browsers. Jesteś menu będzie użyteczny, podobne wizualnie i działa nawet na wyłączony JavaScript przeglądarki (choć tylko najlepsze nawigacyjnego będzie widoczny i nie flyouts nastąpi oczywiście jak są wykonane przez javascript).
- SEO friendly funkcji - kod nieuporządkowane listy menu jest generowane w formacie HTML. Google i inne roboty będą mogły indeksować struktury nawigacji i znajdziesz linki do wewnętrznej strony.
- Wsparcie dla nieograniczonej gniazdowania poziomów i podpoziomów.
- Wsparcie dla dowolnej kolejności lub stron postów (przez zdefiniowane przez użytkownika URI), kategorii, użytkowników, bloki kodu niestandardowego i zewnętrznych linków w menu.
- Obsługa tekstu, jak również obraz elementów opartych menu. (Mam jeszcze spróbować tych though).
- Struktura menu i zawartość jest regulowana przez obszar wizualnie NAVT administratora.
- Compact: jQuery na flyouts dla zagnieżdżonych poziomów.
- Szybkie: jQuery do menu jest ładowany z serwerów Google (I'd love Thesis się do tego samego, a nie pociągając go lokalnie). W ten sposób przyspieszyć trochę rzeczy.
- Skalowalność - Ten rodzaj menu jest edytowalny i konfiguracji w dowolnym momencie ustawienia NAVT wtyczki bez konieczności kodowania wszędzie.
I used to doskonałe dynamiczne menu z portalu dysk jako podstawa. Musiałem dostosować kod JavaScript trochę jak również zawierać kawałek PHP w custom_functions.php aby to działało z tezą. Również wielu wcześniej istniejących już stron, kategorii i stanowisk z mojej witryny zostały wykorzystane w montażu strukturze menu. Twoje specyfika witryny będą różne - ale koncepcje będą takie same.
Więc niech dalej, dobrze?
Instrukcja krok po kroku do NAVT konfiguracji opartej zagnieżdżone, konfigurowalne, wielopoziomowe, SEO friendly
i po prostu cool looking menu dla Wordpress i Thesis Theme
- Przejdź do panelu WordPress Admin. Wtyczki-> Dodaj nowe wyszukiwanie "navt". Wtyczki będą wyświetlane. Kliknij [Install], [Zainstaluj teraz], "Uaktywnij Plugin".
- Narzędzia-> NAVT Lists "," Inside "Nawigacja Grupa" obszar znaleźć "nazwa grupy" i wpisz: "menu1" w polu, naciśnij przycisk [Utwórz] przycisk. "Menu1" prostokątnego obszaru dostał utworzony.
Ta "menu1" obszar będzie głównym placu zabaw dla budowy menu. Będziesz przeciągając je i upuszczając tutaj swój elementów menu. - W "aktywów" obszar znaleźć "inne" pola listy i kliknij przycisk "Start" wybór. "Home" thingie pojawi się wewnątrz "nieprzypisane" area. Dziwne, co? Bez obaw, tak długo, jak to działa - i to będzie dla nas.
- Przeciągnij "Home" thingie z "aktywów" w obszarze "menu1" prostokątnego obszaru. Stanie się ona "Home" w menu.
- Powtórz kroki 3-4 dla niektórych stron z "Strony" obszaru, jak również do kategorii "kategorie" obszarze. Drag wszelkie inne przedmioty, które chcesz być w menu wewnątrz "menu1" prostokąta. Możesz kliknąć na strony, kategorie użytkowników oraz niektóre elementy niestandardowe, takie jak "rozdzielacz liście" i "blok kodu". Blok kodu jest super sposób na dodanie niestandardowych fragmenty wewnątrz menu.
- Możesz przeciągnąć menu wewnątrz "menu1" obszar zmieniać ich kolejność.
- Można dostosować hierarchiczną pozycję każdej pozycji menu "<" i ">" strzałkami.
- Po kliknięciu na nazwę tekst każdej pozycji menu - otwiera umysł grzebanie się dodatkowe okno dostosowywania dla tej pozycji. I najczęściej używanych ustawień, ale technicznie można zwariować i zacząć tworzyć wizerunek opartych na wybory menu i dodać kawałki kodu HTML do niego. Postępować ostrożnie though.
- Dla linkless unclikable podmenu, które będą służyć jako "rodzicami" dla innych "sub-dzieci" Kiedyś "blok kodu" typ. Na przykład podczas dostosowywania takiej pozycji blok kodu wszedłem do "alias menu item" = "MemberWing" i "Enter blok kodu" = "<a href='#'> MemberWing </ a>". Po href = "#" sprawi, że nie klikać, ale działających w ważnych "rodzic" menu do wyboru.
- Oto jak mój NAVT "menu1" budować strukturę wyglądała prawie zakończona:
- Zakończ początkowej budynku, a następnie kliknij na "narzędzi", aby dostosować strukturę menu:
- Będzie on otwarty dialog z 4 zakładki: Opcje wyświetlania, CSS, tematu.
- Przejdź do sekcji "Opcje" kartę i upewnić, że wszystko jest zaznaczone i nazwa grupy mówi: "menu1"
- Wejdź na karcie "Ekran" i upewnij się, że wszystko w sprawie "grupy mapę nawigacji na ..." obszar jest zaznaczone [x]. Zostaw reszta na domyślne.
- Idź do "CSS" i zaznacz opcję (x) "Nie stosować klasy CSS.
- Przejdź do "tematu" kartę i wypełnić go tak:
INSERT INTO "Dodaj tagi przed ..." obszar ten kod:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
INSERT INTO "Dodaj tagi po ..." obszar ten kod:
<br style='clear: left' /></div> - Naciśnij przycisk [zapisz / zamknij] przycisk
- W tym budynku z punktu menu w opcji NAVT wtyczki jest kompletny.
Teraz nadszedł czas, aby zrobić trochę dostroić się do tematu pracy dyplomowej to get it ready. Do tego musimy dodać kilka plików niestandardowych - CSS i JavaScript, który należy do menu i aktualizacji custom_functions.php Thesis " - Pobierz kompletny zestaw plików tutaj.
- Rozpakuj archiwum. Jeśli masz zaktualizowany custom_functions.php z dostosowań - trzeba scalić je z rzeczy. I'll leave it up to you.
Jeśli nie dotknął go - proszę go zastąpić z kopalni. Uwaga: wolałem pozycji menu na stronie nagłówka (domyślnie jest powyżej) - tak mój korekty uwzględnionej tej preferencji, jak również. - Prześlij archiwum, w tym wszystkich podkatalogów i plików w swoim tematem pracy dyplomowej "custom" w katalogu, na przykład:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
I nie dotknął custom.css - Wolę zachować specyficzne menu CSS w ramach ich własnych miejsc, aby uniknąć tworzenia bałagan wewnątrz custom.css - W tym momencie można odświeżyć swoją stronę i zobaczyć nowe piękne nowe wielopoziomowe, zagnieżdżone, SEO, zoptymalizowany menu.
- Zawsze możesz wrócić do NAVT ustawień i dostosować menu do wyboru lub zmiany położenia więcej nic. Będzie to odbicie w witrynie automatycznie.
Droga przed nami ...
Ten przewodnik zawiera kreatywne przykład jeden rodzaj menu. Grałem z innym - wystarczy zobaczyć, jak ciemnej menu będzie wyglądać następująco:
Temat pracy dyplomowej - wielopoziomowe zagnieżdżone menu CSS - ciemna paleta
Myślę, że to całkiem miły. Istnieje wiele prób nawigacyjnych dostępnych na Dynamic Drive - wszystkie z nich można dostosować do pracy dyplomowej i inne tematy Wordpress z wysiłkiem:
Dynamic Drive poziome menu
Mam nadzieję, że znajdą Państwo ten wychowawczy pożyteczne i przydatne. Jak powiedziałem, jest to możliwe, aby dostosować żadnej z tych menu do pracy magisterskiej - to biorąc pod uwagę czas i chęci aby tak się stało.
Mogłem to zrobić dla Ciebie pracy 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 masz do budowy super SEO zoptymalizowany wordpress portalu Premium - najlepsze rozwiązanie dla tego:
Temat pracy dyplomowej + MemberWing wtyczki członkostwa + własny akademik Wordpress oczywiście.
