Tworzenie nagłówka i menu nawigacyjnego w WordPress
każda witryna WordPress jest inna. Dzieje się tak dlatego, że każdy wybiera inny motyw lub „wygląd” dla swojej witryny. Tworzenie nagłówka i górnego menu nawigacyjnego w WordPress będzie nieco innym procesem dla każdej witryny.
tutaj używam Genesis theme framework dla WordPressa, ponieważ absolutnie go kocham. Jednak w tym artykule znajdą się ważne punkty, które pomogą każdemu z witryną WordPress.
jest to część serii artykułów i filmów, w których tworzę stronę internetową od podstaw. Najpierw wyjaśniłem, jak stworzyć motyw potomny dla Genesis framework, a następnie napisałem o rozpoczęciu stylizacji motywu poprzez dodanie tła i logo.
dodawanie linku do Facebooka, linku do Twittera i innych informacji do nagłówka
po dodaniu logo do lewego górnego rogu nagłówka naszej strony, dodamy teraz dodatkowe informacje do prawej strony naszego nagłówka. W takim przypadku dodamy linki do Twittera i Facebooka itp., poprzez widżet.
muszę przyznać, że ostatnio trochę zwariowałem. w przeszłości trochę ich lekceważyłem. Co to jest widget? Cóż, są to samodzielne fragmenty strony internetowej, które można przeciągać i kontrolować za pomocą łatwego w użyciu obszaru widżetów.
jednym z wielu piękności Genesis jest bezproblemowa zdolność do widgetize dowolnego obszaru strony internetowej. Więc:
- jeśli chcesz inną kolejność pól na pasku bocznym, możesz to zrobić w kilka sekund.
- jeśli chcesz wyróżniony post tutaj, 5 najnowszych nagłówków kategorii z miniaturami na stronie głównej, możesz to zrobić w kilka sekund.
- jeśli chcesz pasek wyszukiwania, udostępnianie społecznościowe, kanał na Twitterze, kalendarz, Chmura tagów itp. tutaj, tam czy gdziekolwiek, możesz to zrobić w kilka sekund.
ta intuicyjna, łatwa w użyciu funkcjonalność zaplecza jest szczególnie przydatna podczas tworzenia stron internetowych dla klientów, którzy chcą kontrolować wszystkie obszary witryny, ale nie mają do tego umiejętności.
w każdym razie, w tym przypadku musimy utworzyć własny widget niestandardowy i robimy to przeciągając widget tekstowy do prawego obszaru nagłówka w wyglądzie > interfejs widgetów w WordPress.
a w tym widżecie tekstowym możesz umieścić HTML. Oto HTML, który umieściłem dla tej konkretnej strony. Mam tylko link do strony na Facebooku, Twittera i numer telefonu.
<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>
a oto CSS do stylizacji powyższego:
#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}
oto, co pojawia się po prawej stronie głowy w wyniku:
film o dodawaniu informacji o nagłówku i menu nawigacji
w tym filmie pokazuję jak dodać widżet do nagłówka i jak wystylizować menu w Genesis.
Tworzenie górnego menu nawigacyjnego
górne menu nawigacyjne (lub „paski nawigacyjne”) było zmorą mojego istnienia, ale teraz, dzięki Menu Genesis i WordPress, opracowałem naprawdę łatwy system ich tworzenia, który zajmuje sekundy, a nie Godziny.
Genesis ma już możliwość posiadania głównego i dodatkowego menu nawigacyjnego. W tym konkretnym przykładzie pozbyłem się wtórnego Menu nawigacyjnego za pomocą ustawień motywu Genesis, ponieważ klient chciał tylko jednego.
w powyższym filmie pokazuję, jak zmienić CSS, aby menu wyglądało tak, jak w wizualizacji PSD, którą zrobiłem.
korzystając z narzędzi programistycznych Chrome lub dodatku Firebug dla Firefoksa, możesz określić, które selektory w HTML są używane w CSS do stylizacji menu.
#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }
jak widać w powyższym filmie, zwiększyłem promień zaokrąglonych rogów, dodałem gradientowe tło i zmieniłem kolor obramowania menu. Więc teraz menu nie wygląda jak nudne szare, które dostajesz z instalacją waniliową Genesis.
dodałem również następujący CSS, aby zmienić kolor tekstu w menu na biały.
#nav li a {color: #fff; }
istnieje również możliwość zmiany stylu linków do bieżącej strony,linków najeżdżających, linków do podstrony i linków do podstrony.
dzięki Genesis możesz łatwo mieć rozwijane menu dla podstron (lub stron potomnych), a następnie wyskakujące linki dla podstron (lub stron wnuków). Możesz je mieć zarówno w głównym, jak i dodatkowym menu nawigacyjnym.
tworzenie stron, stron potomnych i stron wnuków
Oto mój film, w którym dodaję nowe strony do menu WordPress, aby pojawiały się w menu nawigacyjnym jako strony, strony potomne (jako rozwijane) i strony wnuków (jako flyouty).
możesz wybrać stronę jako stronę dziecka lub wnuka w sekcji rodzic w edytorze stron. A kiedy spojrzysz na strony (pod Pages > wszystkie strony) strony dziecka i wnuka są wcięte pod ich rodzicem. W ten sposób uzyskają również logiczny adres URL (na przykład www.site.com/music/jazz/charlie-parker, gdzie strona „Charlie Parker” jest dzieckiem „jazzu”, który jest dzieckiem „muzyki”).
tworzenie menu nawigacyjnego z rozwijanymi i fly-outami
aby te strony wyświetlały się poprawnie w menu nawigacyjnym, wystarczy przeciągnąć je i upuścić na odpowiednie pozycje w menu Wygląd >. Ponownie strony potomne są wcięte pod ich rodzicem. Nie zapomnij nadać menu nazwy (na przykład „navbar”) i ustawić go jako główne menu nawigacyjne.
tak więc układanie stron w wyglądzie WordPressa > menu w ten sposób…
… stworzy rozwijane menu z fly-outami takimi jak ten:
proszę zobaczyć film powyżej, aby to pokazać.
co o tym sądzisz?
co sądzisz o tej metodzie edycji nagłówka i menu nawigacyjnego strony internetowej? Czy robisz to w inny sposób?