Constatând utilizarea tot mai mare a dispozitivelor mobile, de la sfârșitul lunii aprilie 2015, Google a penalizat site-urile ale căror pagini nu sunt pregătite pentru mobil. Consecință, pentru dumneavoastră SEO, trebuie să vă asigurați că site-ul dvs. web se afișează decent atât pe ecrane mari, cât și pe cele mici.
În acest articol, vă voi arăta cum puteți pune site-ul dvs. pe pagină utilizând regula @media din CSS3.
Este important să rețineți că termenii „receptiv” și „compatibil cu dispozitivele mobile” sunt adesea folosiți interschimbabil, în ciuda diferenței în sensul lor real. Înțelegerea a ceea ce înseamnă fiecare este importantă pentru a vă asigura că site-ul dvs. web îndeplinește criteriile necesare pentru a găzdui toate dimensiunile ecranului.
Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs.
Apoi, să revenim la motivul pentru care suntem aici.
Responsabil și compatibil-mobil
Site-uri care nu sunt nici reactive, nici compatibile-mobile, sunt afișate identic pe toate ecranele, adică versiunea pentru ecrane mari este afișată peste tot. Pe ecranele mai mici, trebuie să derulați pagina orizontal pentru a vedea întregul conținut al acestora. Sunt greu de navigat pe aceste ecrane.
Descoperă și acestea Pluginurile 8 WordPress pentru a particulariza aspectul site-ului dvs.
Un site web este mobile compatibile atunci când îndeplinește strictul minim pentru a fi văzut pe mobil, ceea ce nu îl face un site web receptiv. De exemplu, un site web poate fi considerat compatibil cu dispozitivele mobile dacă nu trebuie să navigați orizontal. Acest lucru face ca elementele sale să devină mici și să nu se distingă. Apoi trebuie să măriți pentru a citi conținutul acestuia.
De partea lor site-urile web sensibil se adaptează perfect la diferite dimensiuni de ecran. Ele își redefinesc elementele astfel încât să poată fi văzute și utilizate cu ușurință pe ecrane mai mici. Acesta este tipul de design pe care îl doriți pentru site-ul dvs. web.
Vezi și nostru Pluginurile 10 WordPress pentru a crea un formular de rezervare pe site-ul dvs.
Știți acum diferența dintre telefonul receptiv și cel compatibil. Vom vedea acum regula @media de CSS3 care vă permite să vă actualizați site-ul web pentru a fi responsive sau pentru a crea destul de ușor Teme WordPress cu conținut receptiv.
Regula @media de la CSS3
Pentru a-ți răspunde tema, vei avea nevoie de regula @media din CSS3. Practic, vă permite să definiți stilurile pe care doriți să le utilizați pentru un anumit tip (dimensiune) de ecran. O veți folosi ca o altă regulă CSS (cu aparate dentare) cu singura diferență că imbrică alte reguli CSS.
@media media-type (expression) {css-test-selector {property1: value1; proprietate2: valoare2; }}
În această structură, elementele din interiorul regulii @ media funcționează numai atunci când un fel de-media specificat să fi fost detectat cu succes. Tipul de suport ales, puteți specifica caracteristicile în funcție de dimensiuni.
Descopera Cum să aplici interfața și experiența utilizatorului pe WordPress
Regula @media detectează pentru dvs. tipul de ecran cu care este vizitat site-ul dvs. web și alege regulile care se potrivesc cel mai bine acestui tip de ecran. Toate browserele majore au integrat deja regula @media.
Iată lista pentru informații: Chrome , Safari, Firefox, IE, Operă et Margine.
Definiți ecranele țintă
Dacă doriți să modificați un WordPress temă unul existent, vă rugăm să faceți o copie de rezervă a CSS-ului acestuia din urmă pentru a putea reveni dacă este necesar.
Citiți și articolul nostru pe Cum să încărcați treptat comentariile Facebook și Disqus
Așa cum am văzut în structura sa, pentru a defini tipul de ecran, trebuie să redirecționați @media tipul de ecran vizat. Iată lista diferitelor tipuri de ecran:
- toate : pentru toate tipurile de ecrane sau pentru dimensiunile specificate în expresie
- ecran : pentru toate ecranele, fie ele mobile, tabletă, laptop sau desktop
- imprima : pentru imprimante, dacă doriți anumite stiluri pentru paginile care pot fi tipărite
- discurs : pentru cititoarele de ecran, dacă doriți stiluri pentru persoanele cu deficiențe de vedere.
Există, de asemenea, operatori pe care îi puteți pune înaintea tipului de ecran; la fel de nu pentru a afișa stiluri pentru ecrane care sunt de un tip diferit de cel specificat sau afară pentru a aplica stiluri numai ecranelor specificate. Prin urmare, puteți avea:
numai ecranul @media
Definiți stiluri pentru dimensiunile ecranului
Poți folosi expresie pentru a oferi mai multe detalii despre caracteristicile ecranului. După @media introduce și urmată de expresie. Dacă utilizați mai multe expresii, toate ar trebui să fie separate prin și. Iată un exemplu de structură:
@media numai ecran și (max-width: 640px) {selector-css-example {/ * CSS-ul dvs. obișnuit aici * /}}
În acest exemplu îl folosesc max-width cu o valoare de 640px. Aceasta este pentru a seta o lățime maximă a ecranului de dimensiunea unui iPhone sau a unui smartphone Android mic. Cu acest tip de structură, aveți control asupra modului în care arată site-ul dvs. web pe diferite dispozitive. Iată o listă de proprietăți legate de dimensiuni în care puteți utiliza expresie :
Descoperiți și noi 8 Plugin-uri SEO WordPress pentru a optimiza SEO-ul site-ului dvs.
- mîn lățime et max-width : respectiv lățimea minimă și maximă necesară pentru afișarea stilurilor conținute în regulă @media. Încă un pixel și stiluri nu sunt afișate.
- mîn înălțime et max înălțime : respectiv înălțimea minimă și maximă necesară pentru afișarea stilurilor conținute în regulă @media. Deoarece majoritatea ecranelor sunt proiectate pentru a derula paginile pe verticală, proprietățile min înălțime et max înălțime sunt puțin folosite.
Iată o listă cu dimensiunile ecranului pentru unele terminale:
- IPhone: 640px
- iPad: 1024px
- Tablete: 1366 px
- Smartphone Android: 640px, 720px, 854px, 960px
- Android foarte mare: 1024px, 1066px
- Telefon Windows: 480
- Telefon Windows mare: 768 px
- tineri și bătrâni: 320px
- Ultrabook / laptopuri: 1366px
- Desktop-uri și televizoare: 1920px
Există multe alte proprietăți în care puteți utiliza expresie. De exemplu, dacă vizați desktopuri sau ecrane de televiziune capabile să afișeze imagini cu raport de aspect 16: 9, puteți utiliza o structură de genul acesta:
@media numai ecran și (lățime minimă: 1920px) și (raport aspect-dispozitiv: 16/9) {selector-css-example {/ * CSS-ul dvs. obișnuit aici * /}}
Pentru mai multe liste și exemple complete, consultați w3schools et Mozilla Developers.
Testați funcționalitatea receptivă a site-ului dvs. web
Pe măsură ce modificați sau construiți WordPress temă sau la sfârșit, dacă vă plac surprizele, trebuie să testați rezultatul pentru a vedea dacă acesta este în sfârșit receptiv. Amintiți-vă, Google urmărește site-urile web care nu sunt receptive.
Vezi și acestea 10 pluginurile WordPress pentru a crea file pe blogul dvs.
Dacă nu aveți toate dispozitivele mobile pe care le vizați, există (din fericire pentru bursele noastre de valori) o serie de instrumente pentru a vedea modul în care site-ul dvs. web se adaptează la diferite ecrane.
Direct din browserul computerului pe care îl puteți utiliza Window Resizer Extensie browser Chrome, ResponsiveResize, ResizeMe ou Firesizer. Mai jos este o imagine a BlogPasCher din View Responsive Design care vine implicit cu Firefox.
Există, de asemenea, site-uri web dedicate sarcinii:
Acest site web are particularitatea de a vă permite să alegeți singur dimensiunile ecranului. Rețineți că acest site îl încarcă pe al dvs. într-un cadru. Deci, dacă dvs WordPress temă a fost conceput să nu fie afișat într-un cadru, așa că este foarte posibil ca acesta să nu fie afișat aici.
IPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Acest site este util pentru testarea site-ului dvs. web pe cele mai recente dispozitive Apple, iPad și iPhone. Introduceți doar adresa URL. Rețineți că este supus aceleiași probleme de cadru ca și responsivepx.
Pe acest site web îl puteți testa pe ecrane mici și pe modele mai vechi de telefoane pe care le selectați în partea dreaptă a ecranului. De asemenea, puteți configura unele proprietăți ale ecranului.
Acesta este unul dintre cele mai importante teste, dacă nu chiar cel mai important. Introduceți adresa dvs. în bară și faceți clic pe Analiza pentru a începe testul. După test, instrumentul afișează un raport și un scor. Dacă testul este pozitiv, cu atât mai bine, nu veți fi penalizat de Google.
Dacă nu sunteți dezvoltator, vă sfătuiesc o listă de teme WordPress responsive pentru a începe.
Resurse recomandate
Descoperă și alte resurse recomandate care te vor ajuta să-ți atragi mai bine partenerii și abonații, dar și să îmbunătățești securitatea site-ului tău.
- Cum de a crea cursuri de link-uri personalizate pe WordPress
- Pluginurile 5 WordPress pentru a adăuga recenziile clienților la blogul dvs.
- Cum de a crea o roată de avere pentru cupoane pe WooCommerce
- Descoperiți cele mai bune oferte și cupoane pentru blogul dvs.
Concluzie
Aici ! știți tot ce trebuie să știți despre cum să faceți site-ul dvs. web sau tema WordPress receptivă folosind regula @media din CSS3. Dacă am ratat o temă WordPress care vă este dragă sau pe care o preferați, vă rugăm să lăsați un link în secțiune comentarii CI-Dessous.
Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Vă invităm și la împărtășiți-vă pe diferitele rețele sociale.
...
