Duke vënë në dukje rritjen e përdorimit të pajisjeve mobile, që nga fundi i prillit 2015, Google ka penalizuar faqet e internetit, faqet e të cilave nuk janë gati për celular. Pasoja, për tuaj SEO, duhet të siguroheni që faqja juaj e internetit të shfaqet mirë si në ekranet e mëdha ashtu edhe në ato të vogla.
Në këtë artikull, unë do t'ju tregoj se si mund ta vendosni faqen tuaj në faqe duke përdorur rregullin @ medias e CSS3.
Importantshtë e rëndësishme të theksohet se termat "i përgjegjshëm" dhe "i pajtueshëm me celularë" shpesh përdoren në mënyrë të njëjtë, pavarësisht nga ndryshimi në kuptimin e tyre real. Të kuptuarit se çfarë do të thotë secila është e rëndësishme për të siguruar që faqja juaj në internet të përmbushë kriteret e nevojshme për të akomoduar të gjitha madhësitë e ekranit.
Por më parë, nëse nuk keni instaluar kurrë WordPress zbuloni Si të instaloj një WordPress blog hapa 7 et Si të kërkoni, instaloni dhe aktivizoni një temë WordPress në blogun tuaj
Atëherë, le të kthehemi te pse jemi këtu.
I përgjegjshëm dhe i pajtueshëm-celular
Uebfaqe që nuk janë as i përgjegjshëm as i pajtueshëm-celular, shfaqen identikisht në të gjitha ekranet, d.m.th. versioni për ekranet e mëdha shfaqet kudo. Në ekranet më të vegjël, duhet të lëvizni faqen horizontalisht për të parë të gjithë përmbajtjen e tyre. Ata janë të vështirë për të lundruar në këto ekrane.
Zbuloni edhe këto Shtojcat 8 WordPress për të rregulloje pamjen e faqes suaj të internetit
Një faqe në internet është Mobile compatible kur plotëson vetëm minimumin e rreptë për tu parë në celular, gjë që nuk e bën atë një faqe në internet të përgjegjshme. Për shembull, një faqe në internet mund të konsiderohet e pajtueshme me celularin nëse nuk keni nevojë të lundroni horizontalisht. Kjo bën që elementët e tij të bëhen të vegjël dhe të padallueshëm. Pastaj duhet të zmadhoni për të lexuar përmbajtjen e tij.
Nga ana e tyre faqet e internetit responsiv përshtaten në mënyrë të përkryer me madhësi të ndryshme të ekranit. Ata ripërcaktojnë elementet e tyre në mënyrë që të mund të shihen dhe përdoren lehtësisht në ekranet më të vogla. Ky është lloji i dizajnit që dëshironi për faqen tuaj të internetit.
Shihni edhe tonë 10 WordPress plugins për të krijuar një formular rezervimi në faqen tuaj te internetit
Tani e dini ndryshimin midis celularit të përgjegjshëm dhe të pajtueshëm. Tani do ta shohim rregullin @ medias i CSS3 i cili ju lejon të përditësoni faqen tuaj të internetit për të përgjegjshme ose për të krijuar mjaft lehtë Temat e WordPress me përmbajtje reaguese.
Rregulli @ medias nga CSS3
Për ta bërë temën tuaj të përgjegjshme, do t'ju duhet rregull @ medias të CSS3. Në thelb, kjo ju lejon të përcaktoni stilet që dëshironi të përdorni për një lloj (madhësi) të veçantë të ekranit. Do ta përdorni si një rregull tjetër CSS (me formatimin e teksteve) me ndryshimin e vetëm që vendos rregullat e tjera të CSS.
@ media type-type (shprehja) {css-test-selector {property1: value1; vetia2: vlera2; }}
Në këtë strukturë elementet brenda rregullit @ media punojnë vetëm kur lloj-e-medias specifikuar të jenë zbuluar me sukses. Lloji i mediave të zgjedhura, ju mund të specifikoni karakteristikat në aspektin e dimensioneve.
Zbuloj Si të aplikoni ndërfaqen dhe përvojën e përdoruesit në WordPress
Rregulli @ medias zbulon për ju llojin e ekranit me të cilin faqja juaj e internetit vizitohet dhe zgjedh rregullat që i përshtaten më mirë këtij lloji të ekranit. Të gjithë shfletuesit kryesorë tashmë kanë integruar rregullin @ medias.
Këtu është lista për informacionin tuaj: krom , ekspeditë gjuetine, Firefox, IE, Operë et Buzë.
Përcaktoni ekranet e synuara
Nëse dëshironi të modifikoni një WordPress theme ekzistues, ju lutemi bëni një kopje rezervë të CSS të kësaj të fundit në mënyrë që të mund të ktheheni nëse është e nevojshme.
Lexoni gjithashtu artikullin tonë në Si të ngarkojmë gradualisht komentet në Facebook dhe Disqus
Siç kemi parë në strukturën e tij, për të përcaktuar llojin e ekranit, duhet të përcjellni @ medias lloji i ekranit të synuar. Këtu është lista e llojeve të ndryshme të ekranit:
- të gjithë : për të gjitha llojet e ekraneve ose për dimensionet e specifikuara në shprehje
- ekran : për të gjitha ekranet, qoftë celular, tablet, laptop apo desktop
- shtyp : për printerët, nëse doni stile të veçanta për faqet që mund të shtypen
- fjalim : për lexuesit e ekranit, nëse dëshironi stile për personat me shikim të dobët.
Ka edhe operatorë që mund t'i vendosni përpara llojit të ekranit; si nuk për të shfaqur stilet për ekranet që janë të një lloji tjetër nga ai i specifikuar ose është vetëm për të aplikuar stilet vetëm në ekranet e specifikuara. Prandaj mund të keni:
@media vetëm ekran
Përcaktoni stilet për dimensionet e ekranit
Ju mund ta përdorni shprehje për të dhënë më shumë detaje mbi karakteristikat e ekranit. Pas @ medias hyj e ndjekur nga shprehja. Nëse jeni duke përdorur shprehje të shumëfishta, të gjitha ato duhet të ndahen me . Këtu është një shembull i strukturës:
Ekran vetëm në media dhe (gjerësia maksimale: 640px) {zgjedhës-css-shembull {/ * CSS-ja juaj e zakonshme këtu * /}}
Në këtë shembull unë përdor max-gjerësi me një vlerë prej 640px. Kjo është për të vendosur një gjerësi maksimale të ekranit me madhësinë e një iPhone ose një smartphone të vogël Android. Me këtë lloj strukture, ju keni kontroll mbi mënyrën se si duket faqja juaj e internetit në pajisje të ndryshme. Këtu është një listë e pronave në lidhje me dimensionet në të cilat mund të përdorni shprehje :
Zbuloni edhe tonë Shtojcat 8 SEO WordPress për të optimizuar SEO-në e faqes suaj të internetit
- min-gjeresi et max-gjerësi : përkatësisht gjerësia minimale dhe maksimale e nevojshme për shfaqjen e stileve që përmbahen në rregull @ medias. Një piksel dhe stilet e tjera nuk shfaqen.
- min-lartësi et max-height : përkatësisht lartësia minimale dhe maksimale e nevojshme për shfaqjen e stileve që përmbahen në rregull @ medias. Për shkak se shumica e ekraneve janë krijuar për të zhbllokuar faqet vertikalisht, vetitë min-height et max-height janë pak të përdorura.
Këtu është një listë e madhësive të ekranit për disa terminale:
- IPhone: 640px
- IPad: 1024px
- Tabletat: 1366px
- Smartphone Android: 640px, 720px, 854px, 960px
- Android shumë i madh: 1024px, 1066px
- Telefoni i Windows: 480
- Telefoni Windows i madh: 768px
- të rinj dhe të moshuar: 320px
- Ultrabook / Laptopë: 1366px
- Desktop dhe TV: 1920px
Ka shumë prona të tjera në të cilat mund të përdorni shprehje. Për shembull, nëse jeni duke synuar desktopët ose ekranet televizive të afta të shfaqin imazhe me raport aspektesh 16: 9, mund të përdorni një strukturë si kjo:
Ekran vetëm në media dhe (gjerësia min: 1920px) dhe (raporti i aspektit të pajisjes: 16/9) {selector-css-shembull {/ * CSS-ja juaj e zakonshme këtu * /}}
Për lista dhe shembuj më të plotë, konsultohuni w3schools et Zhvilluesit e Mozilla-s.
Testoni funksionalitetin e përgjegjshëm të faqes tuaj të internetit
Ndërsa modifikoni ose ndërtoni tuajin WordPress theme ose në fund nëse ju pëlqejnë surprizat, duhet ta provoni rezultatin për të parë nëse përfundimisht është i përgjegjshëm. Mos harroni, Google shikon për faqet e internetit që nuk janë të përgjegjshme.
Shihni edhe këto Shtojcat 10 WordPress për të krijuar skeda në blogun tuaj
Duke mos pasur të gjitha pajisjet mobile që synoni, ka (për fat të mirë për bursat tona) një numër mjetesh për të parë se si uebfaqja juaj përshtatet në ekrane të ndryshme.
Direkt në shfletuesin e kompjuterit tuaj ju mund të përdorni Window Resizer Chrome Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. Më poshtë është një imazh i BlogPasCher në Pamjen e Dizajnit Përgjegjës i cili vjen si parazgjedhje me Firefox.
Ka edhe faqe në internet të dedikuara për këtë detyrë:
Kjo faqe interneti ka veçorinë që ju lejon të zgjidhni vetë dimensionet e ekranit. Kini parasysh se kjo faqe interneti ngarkon tuajën në një kornizë. Pra, nëse juaji WordPress theme është projektuar të mos shfaqet në një kornizë, kështu që është mjaft e mundur që ai të mos shfaqet këtu.
IPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Kjo faqe në internet është e dobishme për të testuar faqen tuaj në pajisjet më të fundit Apple, iPad dhe iPhone. Thjesht shkruani url-në tuaj. Vini re se ajo i nënshtrohet të njëjtit problem kornizë si responsivepx.
Në këtë faqe në internet mund të provoni tuajat në ekranet e vogla dhe në modelet e vjetra të telefonave të cilët zgjidhni në anën e djathtë të ekranit. Ju gjithashtu mund të konfiguroni disa veti të ekranit.
Ky është një nga testet më të rëndësishme, nëse jo më i rëndësishmi. Thjesht shkruani adresën tuaj në shirit dhe klikoni mbi Analizoj për të filluar provën. Pas provës, mjeti shfaq një raport dhe një rezultat. Nëse testi është pozitiv, atëherë aq më mirë, nuk do të penalizoheni nga Google.
Nëse nuk jeni zhvillues, ju këshilloj një listë me temat e përgjegjshme të WordPress për të filluar.
Burimet e rekomanduara
Zbuloni gjithashtu burime të tjera të rekomanduara që do t'ju ndihmojnë të tërheqni më mirë partnerët dhe pajtimtarët tuaj, por edhe të përmirësoni sigurinë e faqes suaj të internetit.
- Si të krijoni kurse lidhjesh me porosi në WordPress
- Shtojcat 5 WordPress për të shtuar komentet e klientëve në blogun tuaj
- Si të krijoni një rrotë të fatit për kuponat në WooCommerce
- Zbuloni ofertat më të mira dhe kuponat për Blogun tuaj
Përfundim
Këtu! ju dini gjithçka që duhet të dini se si ta bëni faqen tuaj të internetit ose WordPress të përgjegjshme duke përdorur rregullin @ medias e CSS3. Nëse kemi humbur një temë WordPress që është e dashur për ju ose që ju preferoni, ju lutemi lini një lidhje në seksion komente më poshtë.
Megjithatë, gjithashtu do të jeni në gjendje të konsultoheni me ne RESSOURCES, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Ne gjithashtu ju ftojmë të ndajeni në rrjetet tuaja të ndryshme sociale.
...
