• Articles
• admin

fiecare site WordPress este diferit. Acest lucru se datorează faptului că toată lumea alege o temă diferită sau „arata si se simt” pentru site-ul lor. Crearea unui antet și a unui meniu de navigare de sus în WordPress va fi un proces ușor diferit pentru fiecare site.

aici folosesc cadrul tematic Genesis pentru WordPress pentru că îmi place absolut. Cu toate acestea, vor exista puncte importante în acest articol care vor ajuta pe oricine cu un site web WordPress.

aceasta face parte dintr-o serie de articole și videoclipuri în care creez un site web de la zero. Am explicat mai întâi cum să fac o temă copil pentru Cadrul Genesis și apoi am scris despre începerea stilului temei adăugând fundalul și logo-ul.

adăugarea Facebook link, Twitter link și alte informații la antetul

după ce am adăugat deja logo-ul în partea stângă sus a antetului site-ului nostru, vom adăuga acum câteva informații suplimentare în partea dreaptă a antetului nostru. În acest caz, vom adăuga link-uri Twitter și Facebook etc., prin intermediul unui widget.

trebuie să recunosc că am înnebunit puțin în ultima vreme, fiind puțin disprețuitor în trecut. Ce este un widget? Ei bine, sunt biți autonomi ai unui site web pe care îl puteți trage și controla printr-o zonă de widget ușor de utilizat.

una dintre multele frumuseți ale Genezei este capacitatea fără efort de a lărgi orice zonă a site-ului web. Deci:

• dacă doriți o ordine diferită de casete pe bara laterală, o puteți face în câteva secunde.
• dacă doriți o postare prezentată aici, 5 cele mai recente titluri de categorii cu miniaturi acolo pe pagina de pornire, o puteți face în câteva secunde.
• dacă doriți o bară de căutare, partajare socială, flux Twitter, calendar, nor de etichete etc., aici, acolo sau oriunde, o puteți face în câteva secunde.

această funcționalitate back-end intuitivă și ușor de utilizat este deosebit de utilă atunci când creați site-uri web pentru clienții care doresc capacitatea de a controla toate zonele unui site web, dar nu au abilitățile necesare pentru a face acest lucru.

oricum, în acest caz, avem nevoie pentru a crea propriul nostru widget personalizat și facem acest lucru prin glisarea peste un Widget Text în zona din dreapta antet în aspectul > Widgets interfață în WordPress.

și în acest Widget Text puteți pune HTML. Aici este HTML am pus pentru acest site special. Am doar un link pagina de Facebook, un link Twitter și un număr de telefon.

<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>

și aici este CSS la stilul de mai sus:

#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;}

Iată ce apare în partea dreaptă a capului ca rezultat:

Video de adăugarea titlu info și meniul de navigare

în acest film am arăta cum să adăugați widget la antetul și cum să stil sus meniul din Geneza.

crearea meniului de navigare de sus

meniuri de navigare de Sus (sau „navbars”) folosit pentru a fi bane existenței mele, dar acum, cu Genesis și meniuri WordPress, am dezvoltat un sistem foarte ușor de a le crea, care durează secunde, spre deosebire de ore.

Genesis are deja posibilitatea de a avea un meniu de navigare primar și secundar. Pentru acest exemplu particular, am scăpat de meniul de navigare secundar folosind setările temei Genesis, deoarece clientul dorea doar unul.

în videoclipul de mai sus vă arăt cum modific CSS-ul pentru ca meniul să arate ca cel din vizualul PSD pe care l-am făcut.

utilizând Chrome Developer Tools sau Firebug add-on pentru Firefox, puteți spune ce selectoare din HTML sunt utilizate în CSS pentru a stiliza meniul.

#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; }

după cum puteți vedea în videoclipul de mai sus, am mărit raza colțurilor rotunjite, am adăugat un fundal de gradient și am schimbat culoarea marginii meniului. Deci, acum meniul nu arată ca cel gri plictisitor pe care îl obțineți cu o instalare vanilla Genesis.

am adăugat, de asemenea, următorul CSS pentru a schimba culoarea textului din meniu în alb.

#nav li a {color: #fff; }

există, de asemenea, posibilitatea de a schimba stilul de link-uri pagina curentă, link-uri hover, link-uri sub-pagină și link-uri sub-sub-pagină.

cu Genesis, puteți avea cu ușurință meniuri drop-down pentru sub-pagini (sau pagini copil) și apoi fly-out link-uri pentru sub-sub-pagini (sau pagini nepot). Le puteți avea atât în meniurile de navigare primare, cât și în cele secundare.

crearea de pagini, pagini copil și pagini nepot

Iată videoclipul meu în care adaug pagini noi în meniul WordPress, astfel încât acestea să apară în meniul de navigare ca pagini, pagini copil (ca drop-down-uri) și pagini nepot (ca flyouts).

puteți alege o pagină pentru a fi o pagină copil sau nepot sub părinte în editorul de pagini. Și când te uiți la paginile (Sub Pagini > toate paginile) paginile copilului și nepotului sunt indentate sub părintele lor. Făcând acest lucru le va oferi și o adresă URL logică (de exemplu, www.site.com/music/jazz/charlie-parker unde pagina „Charlie Parker” este un copil al „Jazz” care este un copil al „muzicii”).

crearea unui meniu de navigare cu drop-down-uri și fly-out-uri

pentru ca aceste pagini să apară corect în meniul de navigare, trebuie doar să le glisați și să le fixați în pozițiile respective în meniurile aspect >. Din nou, paginile copil sunt indentate sub părintele lor. Nu uitați să dați meniului un nume (cum ar fi „navbar”, de exemplu) și setați-l să fie meniul principal de navigare.

deci, aranjarea paginilor în aspectul WordPress > zona meniurilor ca aceasta…

… va crea un meniu drop-down cu fly-out ca aceasta:

vă rugăm să consultați videoclipul de mai sus pentru o demonstrație a acestui lucru.

ce crezi?

ce părere aveți despre această metodă de editare a antetului și a meniului de navigare al unui site web? O faci într-un mod diferit?