Dążenie do doskonałego menu pionowego ...
Część 1 niniejszego tutorialu opisane krok po kroku proces budowania poziome wielopoziomowe zagnieżdżone menu dla tematu WordPress tezy . Część 2 będzie na wzmocnienie tej funkcji. Tutaj będziemy dodawać "ciemny" wersję poziomym menu nawigacyjnym, a nauczę Cię jak przełączać się pomiędzy "jasny" i "ciemny" wersji. Część 2 jest rozszerzeniem części 1. Obejmuje ona wszystko z części 1 + dodaje więcej fajnych rzeczy.
Główną ideą, że chciałem przedstawić dodaje pionowe menu na temat tezy (i WordPress w ogóle). Szukałem bardzo elastyczny, przyjazny SEO i multi-zgodny z przeglądarkami pionowe menu, które pozwoli stworzyć nieograniczone zagnieżdżanie poziom.
WEB ma mnóstwo stron na ten temat, ale kiedy zacząłem próbować wszystkie te próbki - albo się zepsuł, rozpadło, wspierany jedynie ograniczoną liczbę poziomów lub nieposłuszne w Gates znak + junksplorer Ballmerem na 6. Wreszcie wróciłem do sprawdzonych i zaufanych dynamiczne menu Drive, ich pionowe próbki okazały się być miły tak, że pasuje do mojego surowe wymagania. Musiałem znacząco zmodyfikować je jednak upewnić się, że pasuje do modelu Thesis.
Dążenie do perfekcji trwa ...
Spędziłem około 16 godzin poszukiwań, montaż, testowanie, mocowania, polerowanie i strojenie pionowe menu w CSS i. kodu JS i 3/4 czasu poświęciliśmy co do pracy w MSIE 6.
W każdym razie, byłem zadowolony z efektu końcowego. Spowodowało pionowe menu nawigacyjne posiada wszystkie te same korzyści , że poziome menu ma.
Mając możliwość dodawania pionowe menu jest bardzo ważne do około 70-80% portali w sieci. Poziome menu mają ograniczone "przestrzeń", aby pomieścić wiele opcji menu, ale pionowe menu nie ma takiego ograniczenia i pomoże ogromnie. Tak więc zaczynamy.
Wiele kroków aby tak się stało są już opisane w części 1 tutorialu tak to zrobi to za bit jeden krótszy, ale znacznie bardziej fabularne wyników bogatych.
Więc o to idzie:
Budynek przyjazny SEO, pionowe, wielopoziomowe, hierarchicznie zagnieżdżone menu do WordPress i tematu pracy dyplomowej. Krok po kroku
(... Co nigdy, że to możliwe ...)
- Zainstaluj plugin exec php i aktywować go. Musimy, bo będę używał PHP wewnątrz widgetu tekstowego emitować pionowy menu 'kod HTML.
- Czy kroki 1 - 6 z części 1 kursu . Zasadniczo należy zainstalować i aktywować używać wtyczki NAVT + wizualnie zbudować menu. Upewnij się, że nazwa grupy menu jest "Menu1". Nazwa ta jest stałe w custom_functions.php
- Kliknij na 'bieg "ikony za twoją Menu1' grupy, aby ją edytować właściwości:
- Następujące kroki 7.1 -7.3 części 1 tutorialu ustawienie "Opcje", "Ekran" i "CSS" ustawienia tabs.
- Teraz kliknij na "temat" karty tego okna dialogowego. Będziemy zastąpić wiele ustawień tam (jeśli zostały po kroku 1). To jest ok - nie stracisz nic - ale te zmiany są potrzebne, ponieważ zmieniłem trochę kod z kroku 1.
Oto jak ten dialog musi być wypełniona:- Wewnątrz "Theme XPath:" obszar wpisać Kod ten (to nakazuje, aby zastąpić dowolny znacznik z tych klas):
.jquerycssmenu, .jqueryslidemenu - Ustaw "działanie" do "Replace with"
- Wewnątrz "Dodaj tagi przed nawigacji grupy" strefy wpisz ten kod:
<div class='jquerycssmenu' style='margin-top:5px;'> - Wewnątrz "dodaj tagi po nawigacyjnym grupy" strefy wpisz ten kod:
<br style='clear: left' /></div> - Kliknij na [Zapisz / Close].
- Wewnątrz "Theme XPath:" obszar wpisać Kod ten (to nakazuje, aby zastąpić dowolny znacznik z tych klas):
- Teraz przejdź do panelu administracyjnego WordPress -> Wygląd -> Widgety.
- Przeciągnij tekstowy widget (z wielkim "widgetów" Dostępne strefy) do "sidebar 1" obszar po prawej stronie. Dodamy kod do widgetu tekstowego, który pomoże nam urzeczywistnić pionowe menu.
UWAGA: Przypuszczam, masz "sidebar 1" w istnienie. Opcje Thesis pozwala go wyłączyć - ale przez wzgląd na tym kursie pozwoli uczynić go być. - Po przeciągać i upuszczać ten widget - to otwiera jak kwiat ust Czuję romantyczny teraz, że walka MSIE jest ponad).
- W "tytuł" obszar wpisać "najlepszą na świecie pionowe menu" ... Cóż, nie krępuj się korzystać z kreatywności - to tekst będzie powyżej twojego nowo narodzonego menu pionowym.
- W dużym obszarze dla tekstu - wpisz ten kod PHP:
<?php
if (function_exists('navt_getlist'))
$menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
else
$menu_html = "";
$menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
echo $menu_html;
?> - Naciśnij przycisk [Zapisz] przycisk, kliknij na "Zamknij" link.
- Pobierz zaktualizowany zestaw plików tutaj .
To archiwum zawiera:- Zaktualizowana wersja "jasny" kod poziomym menu
- "Ciemna" wersja z poziomym menu
- Pionowe menu kody
- Zaktualizowana wersja custom_functions.php
- Teraz trzeba rozpakować archiwum i przesłać go do 'CUSTOM' katalogu swojego tematu pracy dyplomowej.
Uwaga: jeśli zrobiłeś żadnych dostosowań wewnątrz custom_functions.php - należałoby je połączyć. Jeśli nie - prosimy go zastąpić z mojej wersji. - Voila! Teraz możesz przeładować stronę internetową i zobaczyć samo "jasne" poziome menu + Neato pionowe menu w lewym panelu.
- Zadanie BONUS: Niech zmieni "jasny" poziome menu na "ciemny" schemat kolorów.
- Wewnątrz pliku custom_functions.php:
zastąpić ten kod:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
z tego kodu:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Zasadniczo jesteśmy zakomentowanie jedną linię i odkomentowanie drugiego. - Teraz przejdź do WordPress Admin-> Narzędzia-> Listy NAVT i kliknij wyżej "gear" ikonę, aby edytować właściwości o 'Menu1' grupy.
- Kliknij "Theme" kartę.
- Wewnątrz "Dodaj tagi przed nawigacji grupy" strefy wpisz ten kod:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Teraz - przeładować stronę - i Twój główny poziome menu nawigacyjne "magicznie" się ciemno, coś takiego:
Tematem pracy dyplomowej - wielopoziomowe zagnieżdżone menu CSS - ciemny paleta
Ciemna kolorystyka może być bardziej odpowiedni dla pewnych miejsc niż światło jednego koloru. Więc teraz masz wolność wyboru w swoim życiu!
- Aby wrócić do "bright" schemat kolorów - wystarczy cofnąć powyżej "Bonus" kroków.
- Wewnątrz pliku custom_functions.php:
- Wnioski:
Kocham Theme Thesis, kocham WordPress i uwielbiam fakt, że mamy sposoby dodawania przyzwoite menu nawigacji do naszych portali.
20 dolarów
Enjoy!
Gleb esman
{Komentarze na tej pozycji są zamknięte}
