Cum să faci un antet lipicios în WordPress

În ultimul deceniu sau cam asa ceva, s-a pus un accent din ce în ce mai mare pe navigarea pe site. Acest lucru a coincis cu utilizarea pe scară largă a smartphone-urilor care au opțiuni de navigare limitate în comparație cu interfața tradițională pentru desktop. Diferența în designul site-ului este mai mult decât evidentă dacă te uiți la o comparație între un site din 2011. și unul care a fost făcut acum.

Una dintre metodele principale care au fost utilizate în reconfigurarea layout-urilor site-ului au fost elementele lipicioase. Denumite corespunzător, aceste elemente se lipesc de pagină de pe marginile acesteia atunci când vă deplasați în jurul ei, adică își păstrează poziția inițială (gândiți-vă la înghețarea panourilor în Excel și veți avea o idee bună despre cum funcționează).

Sus, jos, stânga și dreapta

Elementele adezive sunt de obicei rezervate pentru meniuri, anteturi și/sau bare de stare; acestea aduc o mare flexibilitate vizitatorului, deoarece acesta poate trece instantaneu de la o pagină la alta, fără a fi nevoie deloc să dea înapoi. De asemenea, toate acestea sunt poziționate pe marginile paginii de sus și de jos pentru început, ceea ce funcționează bine cu întreaga premisă. Ar fi extrem de dificil să construiți o pagină în jurul unui element lipicios care este poziționat în centrul unei pagini.

Rareori pot fi găsite și pe marginile din stânga și din dreapta, cu aceleași funcții, doar un aspect diferit. În aceste cazuri, ele vor fi ascunse până când treceți cu mouse-ul peste ele cu cursorul sau le atingeți pe ecran.

Economii de spațiu

Lucrul interesant despre elementele lipicioase este că vă economisesc spațiu pe pagină și pe site în întregime - ele pot fi de fapt folosite pentru a înlocui pagini întregi. Acest lucru se datorează faptului că ele lasă intact corpul principal al site-ului și fac din borduri instrumente multifuncționale care preiau multe dintre funcțiile paginii de la sine. Gândiți-vă pentru un moment la aspectul mediu al site-ului.

Partea de sus este rezervată meniurilor care presupun pagini sortate pe categorii desemnate și o bară de căutare. Acestea sunt ambele ascunse în spatele unei bare în timp ce derulați și se extind atunci când este necesar. Dacă nu ar fi cazul, doar arborele de meniu ar ocupa toată secțiunea superioară a paginii și nu ar fi „urmărit” atunci când derulează în jos, astfel încât vizitatorul tău ar trebui să se miște constant în sus și în jos doar pentru a naviga prin pagini. .

Pe de altă parte, un element de jos lipicios poate înlocui destul de ușor o întreagă pagină de asistență - doar adăugați e-mailul și/sau numărul împreună cu un buton de chat și sunteți gata. Le oferiți vizitatorilor o modalitate constantă de a vă contacta. Încă o dată, aplicația practică este fantastică – un client navighează prin paginile de produse, are o întrebare și poate afla instantaneu de ce are nevoie făcând clic pe butonul de chat.

Crearea de elemente lipicioase

Când vorbim despre WordPress, există întotdeauna numeroase moduri de a face orice la care vă puteți gândi și același lucru este valabil și aici. Puteți crea elemente lipicioase manual în editorul implicit sau puteți utiliza un plugin care înlocuiește nevoia de codare cu o interfață prietenoasă pentru începători. Contrastul dintre rezultatele finale este minim, dar modul în care ajungi acolo face toată diferența. Pentru exemplul nostru, vom folosi anteturi lipicioase, deoarece sunt de departe cel mai comun element care este făcut să se lipească.

Crearea manuală a unui antet lipicios

Crearea manuală a unui antet lipicios în WordPress necesită utilizarea codului CSS. Fără a deveni prea tehnic, codul CSS este ceva ce putem adăuga practic oricărui element dintr-o pagină pentru a-i modifica proprietățile. Când codificăm manual, aceasta este metoda noastră principală de personalizare. Utilizarea CSS mai întâi necesită ca antetul să fie prezent pe o pagină, așa că asigurați-vă că există ceva de personalizat în primul rând. WordPress simplifică acest proces, deoarece chiar și editorul implicit oferă opțiunea de a-l adăuga cu un clic.

Odată ce aveți un antet cu care să lucrați, va trebui să accesați consola. Pur și simplu accesați secțiunea de aspect din partea stângă a tabloului de bord, alegeți „Personalizați”, apoi faceți clic pe „CSS suplimentar”. Cu consola acum deschisă, trebuie să introduceți codul care vă face antetul lipicios:

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

Codul de mai sus este doar un exemplu despre cum ar trebui să arate în general, nu o comandă definitivă. Rețineți că prima linie este întotdeauna specifică fiecărui site - înlocuiți #website-navigation cu clasa CSS sau ID-ul antetului de navigare înainte de a reveni la editorul de pagini.

După ce ați verificat funcționalitatea din fereastra de previzualizare a paginii/postării, doar publicați și aveți un antet lipicios. Trebuie să subliniem că probabil veți dori să extindeți codul CSS pentru a cuprinde mai mult decât atributul „lipicios” pentru un antet ca acesta – se recomandă adăugarea de lucruri care vor sublinia antetul vizual, cum ar fi fonturile de culoare, dimensiunea, indentare etc. Deoarece este o fixare permanentă pe o pagină, poate fi ușor trecută cu vederea, așa că ar trebui să încercați să o scoateți în evidență.

Crearea unui antet lipicios cu un plugin

Există o suprapunere uriașă între cei care au nevoie de un site web pentru afacerea sau blogul lor și cei care pur și simplu nu au cunoștințele necesare pentru a construi ceva care arată și se simte profesionist. Din fericire, cu WordPress, există atât de multe plugin-uri care fac viața mai ușoară tuturor; practic nu este nevoie să posedeți nimic mai mult decât cunoștințe de bază de software pentru a vă îndeplini obiectivele. WP Sticky este un exemplu grozav de plugin care înlocuiește toate codurile pe care le-am acoperit mai sus cu o interfață ușor de utilizat pe care oricine poate obține rapid. În același timp, oferă aceeași cantitate de funcționalitate pe care ați avea-o atunci când creați manual un antet lipicios. Să-l descompunem.

Crearea unui element

La fel cum trebuie să aveți un antet cu care începeți când utilizați CSS, trebuie să creați un element la care apoi adăugați atributul sticky.

Există două moduri distincte de a evidenția elementul - puteți introduce denumirea în câmpul necesar sau puteți alege elementul printr-o fereastră de previzualizare făcând clic pe el (acest lucru funcționează de minune dacă aveți probleme cu desemnările) . Atunci când alegeți elementul în fereastra de previzualizare, veți vedea desemnările în schimbare în partea de sus a ecranului.

Am descoperit că, după ce ați lucrat cu pluginul pentru ceva timp, vă veți simți atât de confortabil cu el, încât aproape că nu veți folosi selectorul vizual. Denumirile vor deveni familiare, ceea ce duce la introducerea lor simplă și manuală, economisind timp. Până când nu sunteți familiarizat cu această măsură, selecționerul vizual va fi cel mai bun prieten al tău. În cele din urmă, oricare dintre metode vă va duce în același loc - un antet lipicios pe front-end.

Fă-l să arate bine

Nu toate elementele lipicioase sunt create egale, iar nici al tău nu ar trebui să fie un exemplu banal. Secțiunea de setări vizuale vă va oferi o multitudine de opțiuni de personalizare cu care puteți lucra pentru a face antetul dvs. lipicios unic din toate punctele de vedere.

Primul lucru de care trebuie să ții cont este poziționarea elementului tău. Deoarece facem un antet, aceasta va fi o decizie ușoară – îl lipim în partea de sus a paginii. Poziționarea este esențială pentru un antet bun, așa că dacă nu doriți ca acesta să îmbrățișeze partea de sus a paginii, îl puteți muta în jos câțiva pixeli pentru o potrivire mai bună. În plus, dacă site-ul dvs. folosește o bară de instrumente de administrare pentru utilizatorii înregistrați, puteți face ca pluginul să îl verifice automat și să ajustați antetul în consecință.

Am atins puțin despre necesitatea ca un site să fie pe deplin receptiv, deoarece există atât de multe modalități prin care potenţialii vizitatori pot naviga pe web. Pentru a face site-ul dvs. complet adaptabil, puteți alege pe ce ecrane antetul va fi lipicios.

De obicei, ecranele mai mici beneficiază cel mai mult de anteturile lipicioase, în timp ce cele mai mari utilizate pe desktop-uri tradiționale care au mai multe opțiuni de navigare se descurcă bine fără ele. Dimensiunile sunt împărțite în patru grupuri care acoperă toate dimensiunile majore ale ecranului.

Indexul Z este o setare opțională care ar putea deruta mulți la prima vedere. Din cauza asta și a faptului că este o caracteristică opțională, mulți probabil o vor refuza și o vor ignora. Dacă totul funcționează, probabil că nici măcar nu vei privi înapoi; cu toate acestea, dacă există probleme cu afișajul, indexul Z ar putea fi o soluție de remediere rapidă. În esență, gândiți-vă la o pagină ca la o colecție de stive în care stivele de sus au numere mai mari decât cele de jos. Prin urmare, dacă ceva vă ascunde antetul lipicios, încercați să ridicați indicele Z (99999 este sugerat ca o valoare care funcționează)

Cu antetul tău lipicios „în partea de sus a stivelor”, este timpul să devii și mai creativ adăugând efecte în timp ce derulezi în jos. Când ambele opțiuni sunt dezactivate, antetul își va păstra poziția în partea de sus, ca o bucată decupată din pagina originală. Puteți adăuga mai mult flare cu efecte precum fade-in sau slide down. Luați în considerare designul vizual general al site-ului dvs. înainte de a opta pentru aceste tipuri de efecte; cu toate acestea – de multe ori, mai puțin este mai mult.

Efectele vizuale nu se limitează doar la cele care sunt legate de mișcare. De asemenea, puteți personaliza antetul în sine (pe lângă mișcările pe care le-ați făcut în timp ce creați antetul). Opacitatea este utilă dacă nu doriți ca antetul să ascundă orice alt conținut de pe pagină. Setarea acestuia la aproximativ 50% va face atât antetul, cât și conținutul de dedesubt relativ vizibile.

O caracteristică și mai utilă decât opacitatea este reglarea intervalului de defilare. În cazul în care aveți pagini foarte lungi, așa cum au de obicei blogurile, există un anumit punct în a naviga în jos, unde a avea un antet lipicios pur și simplu nu mai are sens. Acestea sunt momentele în care este o idee bună să dezlipești antetul după ce vizitatorul tău a derulat suficient de departe.

În cele din urmă, există o opțiune de a schimba culoarea de fundal a antetului atunci când este lipicios, făcându-l să iasă și mai mult în evidență, dar revenind la valorile sale originale atunci când antetul nu mai este lipicios.

Ultima parte a editării vizuale ne readuce cerc complet la editarea manuală a antetului lipicios prin CSS.

Chiar dacă într-adevăr nu trebuie să aveți cunoștințe anterioare de codificare pentru a utiliza cu succes WP Sticky, vă poate îmbunătăți munca dacă îl utilizați. Funcția este opțională, așa că depinde în întregime de dvs. dacă doriți să o utilizați și în ce măsură.

Opțiuni avansate

Secțiunea de opțiuni avansate se referă mai mult la excludere, adică în ce cazuri un antet lipicios va înceta să fie lipicios și va reveni la „programarea originală”.

Configurarea manuală a dimensiunii ecranului în cazul în care antetul nu este lipicios este un pas înainte față de cele patru dimensiuni implicite care sunt prezentate în secțiunea de setări vizuale. Aici, veți ajunge să fiți cât de specific doriți, așa că, dacă există vreodată un ecran sălbatic în viitor care nu se potrivește cu nici una dintre dimensiunile predeterminate, puteți face reguli care să funcționeze pentru el.

A face ca un antet să nu fie lipicios nu se referă numai la dimensiunea ecranului, ci și la conținutul site-ului dvs., mai precis la categorizare. Puteți face ca antetul să nu se lipească de pagini, postări și tipuri de postări desemnate, categorii specifice sau conținut cu anumite etichete. Toate aceste condiții pot fi amestecate și potrivite pentru a face compendiul perfect atunci când antetul lipicios este folosit și când nu este.

Similar cu modul în care ați ales elementul lipicios (în cazul nostru, antetul) încă de la început, puteți alege și un element push-up mai jos pe pagina pe care doriți să fie împins antetul. În esență, acest lucru va face ca antetul să se miște chiar la marginea acestui element, fără umplutură sau orice fel de spațiu între ele.

Pentru a pune capăt, atunci când te-ai săturat și nu mai vrei elementul tău lipicios, există întotdeauna opțiunea finală de a-l șterge complet. Fiți avertizat că aceasta este o acțiune permanentă și toată personalizarea pe care ați făcut-o elementului (în acest caz, antetul) se va pierde.

rezumat

Este greu de spus care mod de a face lucrurile este mai bun. Cu siguranță aveți mai multe opțiuni la dispoziție folosind CSS, dar aceasta este o soluție pentru foarte puțini oameni în general. Pe de altă parte, un plugin precum WP Sticky combină ușurința de utilizare cu funcționalitatea încă robustă, ceea ce îl face o alegere perfectă pentru începători sau pentru cei care încă nu sunt siguri despre codificarea de la zero. Probabil că cea mai bună modalitate de a face un antet lipicios și funcțional este să începeți cu cel din urmă și să treceți la primul.

Autor: Matej Milohnoja

Obișnuia să scrie despre jocuri și despre jocuri în general, dar de atunci a trecut la testarea și scrierea despre software-ul de dezvoltare web. Încă joacă o mulțime de jocuri, doar pentru distracția.