Vzhľadom na rastúce používanie mobilných zariadení od konca apríla 2015 spoločnosť Google penalizovala webové stránky, ktorých stránky nie sú pripravené pre mobilné zariadenia. Dôsledok pre vás SEO, musíte zabezpečiť, aby sa váš web zobrazoval slušne na veľkých aj malých obrazovkách.
V tomto článku vám ukážem, ako môžete umiestniť svoj web na stránku pomocou pravidla @media z CSS3.
Je dôležité poznamenať, že výrazy „responzívne“ a „kompatibilné s mobilnými“ sa často používajú zameniteľné napriek rozdielom v ich skutočnom význame. Pochopenie toho, čo každý znamená, je dôležité, aby ste sa mohli ubezpečiť, že váš web spĺňa kritériá potrebné pre všetky veľkosti obrazoviek.
Ale predtým, ak ste nikdy nenainštalovali WordPress objaviť Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu
Potom sa vráťme k tomu, prečo sme tu.
Reagujúci a kompatibilný mobilný
Webové stránky, ktoré nie sú ani citlivé ani kompatibilné mobilné, sa zobrazujú rovnako na všetkých obrazovkách, t. j. verzia pre veľké obrazovky sa zobrazuje všade. Na menších obrazovkách musíte stránku vodorovne posúvať, aby ste videli všetok ich obsah. Na týchto obrazovkách sa ťažko orientujú.
Objavte aj tieto Zásuvné moduly 8 WordPress na prispôsobenie vzhľadu vašich webových stránok
Webová stránka je mobilný kompatibilné keď spĺňa iba striktné minimum, ktoré je možné vidieť v mobilných zariadeniach, čo z neho nerobí responzívny web. Napríklad webovú stránku možno považovať za kompatibilnú s mobilnými zariadeniami, ak nemusíte navigovať vodorovne. To spôsobí, že jeho prvky budú malé a nerozoznateľné. Potom musíte priblížiť, aby ste si prečítali jeho obsah.
Na ich strane webové stránky citlivý dokonale sa prispôsobiť rôznym veľkostiam obrazovky. Predefinujú svoje prvky tak, aby ich bolo možné ľahko vidieť a použiť na menších obrazovkách. Toto je typ vzoru, ktorý chcete pre svoju webovú stránku.
Pozri tiež naše Zásuvné moduly 10 WordPress na vytvorenie rezervačného formulára na vašich webových stránkach
Teraz poznáte rozdiel medzi responzívnym a kompatibilným mobilným telefónom. Teraz uvidíme pravidlo @media CSS3, ktorý vám umožňuje aktualizovať vašu webovú stránku tak, aby bola responzívna, alebo ju jednoducho vytvárať Témy WordPress s responzívnym obsahom.
Pravidlo @media z CSS3
Ak chcete, aby vaša téma reagovala, budete potrebovať pravidlo @media CSS3. V zásade vám umožňuje definovať štýly, ktoré chcete použiť pre konkrétny typ (veľkosť) obrazovky. Použijete ho ako iné pravidlo CSS (so zloženými zátvorkami) s jediným rozdielom, že vnorí ďalšie pravidlá CSS.
@media media-type (expression) {css-test-selector {property1: value1; vlastnosť2: hodnota2; }}
V tejto štruktúre prvky vo vnútri pravidla @ media pracovať len vtedy, keď druh-of-médiá ktoré boli úspešne zistené. Typ vybraného média môžete určiť z hľadiska rozmerov.
Discover Ako aplikovať rozhranie a užívateľské skúsenosti na
Pravidlo @media detekuje za vás typ obrazovky, s ktorou je váš web navštívený, a vyberie pravidlá, ktoré sa najviac hodia pre tento typ obrazovky. Pravidlo už majú integrované všetky hlavné prehliadače @media.
Tu je zoznam vašich informácií: chróm , safari, Firefox, IE, Opera et hrana.
Definujte cieľové obrazovky
Ak chcete upraviť a WordPress tému existujúceho, vytvorte si záložnú kópiu CSS druhého, aby ste sa v prípade potreby mohli vrátiť späť.
Prečítajte si tiež náš článok o Ako postupne načítať komentáre Facebook a Disqus
Ako sme videli na jeho štruktúre, na definovanie typu obrazovky musíte postupovať ďalej @media typ cieľovej obrazovky. Tu je zoznam rôznych typov obrazoviek:
- všetko : pre všetky typy obrazoviek alebo pre rozmery uvedené v výraz
- plátno : pre všetky obrazovky, či už ide o mobilné zariadenia, tablety, prenosné počítače alebo počítače
- vytlačiť : pre tlačiarne, ak chcete pre stránky, ktoré je možné vytlačiť, špecifické štýly
- reč : pre čítačky obrazovky, ak chcete štýly pre zrakovo postihnutých.
Existujú aj operátory, ktoré môžete umiestniť pred typ obrazovky; ako nie na zobrazenie štýlov obrazoviek iného typu, ako je uvedený, alebo iba použiť štýly iba na určené obrazovky. Preto môžete mať:
@media len obrazovka
Definujte štýly pre rozmery obrazovky
Môžete použiť výraz na poskytnutie ďalších podrobností o vlastnostiach obrazovky. Po @media vstúpiť a nasledovaný výrazom. Ak používate viac výrazov, mali by byť všetky oddelené znakom a, Tu je príklad štruktúry:
Obrazovka @media only and (max-width: 640px) {selector-css-example {/ * Váš obvyklý CSS tu * /}}
V tomto príklade používam max šírkou s hodnotou 640px. Toto slúži na nastavenie maximálnej šírky obrazovky veľkosti iPhone alebo malého smartphonu s Androidom. Vďaka tomuto druhu štruktúry máte kontrolu nad tým, ako vyzerá váš web na rôznych zariadeniach. Tu je zoznam vlastností súvisiacich s dimenziami, ktoré môžete použiť v výraz :
Objavte aj naše 8 SEO WordPress pluginy na optimalizáciu SEO vašich webových stránok
- mv-šírke et max šírkou : minimálna a maximálna šírka požadovaná na zobrazenie štýlov obsiahnutých v pravidle @media, Jeden ďalší pixel a štýly sa nezobrazia.
- min-výšky et max-height : minimálna a maximálna výška požadovaná na zobrazenie štýlov obsiahnutých v pravidle @media, Pretože väčšina obrazoviek je navrhnutá tak, aby stránky vertikálne rozbaľovala, vlastnosti min-výška et max-height sú málo používané.
Tu je zoznam veľkostí obrazoviek pre niektoré terminály:
- IPhone: 640px
- iPad: 1024 pixelov
- Tablety: 1366 pixelov
- Android smartphone: 640px, 720px, 854px, 960px
- Android extra veľký: 1024px, 1066px
- Windows phone: 480
- Windows phone large: 768px
- mladí aj starí: 320 pixelov
- Ultrabook / notebook: 1366 pixelov
- Stolné počítače a televízory: 1920px
Existuje mnoho ďalších vlastností, ktoré môžete použiť v výraz. Napríklad, ak zacieľujete na desktopy alebo televízne obrazovky, ktoré sú schopné zobraziť obrázky s pomerom strán 16: 9, môžete použiť nasledujúcu štruktúru:
Obrazovka @media only a (minimálna šírka: 1920px) a (pomer strán zariadenia: 16/9) {selector-css-example {/ * Váš obvyklý CSS tu * /}}
Podrobnejšie zoznamy a príklady nájdete na stránke w3schools et Mozilla Developers.
Otestujte responzívnu funkčnosť svojich webových stránok
Ako si upravujete alebo vytvárate svoje WordPress tému alebo na konci, ak máte radi prekvapenia, musíte otestovať výsledok, aby ste zistili, či konečne reaguje. Pamätajte, že Google sleduje webové stránky, ktoré nereagujú.
Pozri tiež tieto 10 WordPress pluginy na vytváranie kariet na vašom blogu
Ak nemáte všetky mobilné zariadenia, na ktoré zacieľujete, existuje (našťastie pre naše burzy) niekoľko nástrojov, pomocou ktorých môžete zistiť, ako sa váš web prispôsobuje rôznym obrazovkám.
Priamo v prehliadači počítača môžete použiť Rozšírenie prehliadača Chrome Resizer prehliadača, ResponsiveResize, Resize ou Firesizer, Nižšie je obrázok BlogPasCher v zobrazení responzívneho dizajnu, ktorý je predvolene dodávaný s prehliadačom Firefox.
Úloha sa venuje aj webovým stránkam:
Táto webová stránka sa vyznačuje tým, že vám umožňuje vybrať si rozmery obrazovky sami. Uvedomte si, že táto webová stránka načítava vaše v rámci. Ak teda tvoj WordPress tému bol navrhnutý tak, aby sa nezobrazoval v ráme, takže je dosť možné, že sa tu nezobrazí.
IPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Táto webová stránka je užitočná na testovanie vašej webovej stránky na najnovších zariadeniach Apple, iPad a iPhone. Stačí zadať adresu URL. Všimnite si, že podlieha rovnakému problému s rámcami ako responseivepx.
Na tomto webe môžete testovať svoje na malých obrazovkách a na starších modeloch telefónov, ktoré vyberiete na pravej strane obrazovky. Môžete tiež nakonfigurovať niektoré vlastnosti obrazovky.
Toto je jeden z najdôležitejších testov, ak nie najdôležitejší. Stačí do panela zadať svoju adresu a kliknúť na Analyzovať na spustenie testu. Po teste nástroj zobrazí správu a skóre. Ak je test pozitívny, tým lepšie, že vás spoločnosť Google nebude penalizovať.
Ak nie ste vývojár, radím vám zoznam responzívnych tém WordPress pre štart.
Odporúčané zdroje
Objavte tiež ďalšie odporúčané zdroje, ktoré vám pomôžu lepšie prilákať svojich partnerov a predplatiteľov, ale tiež zvýšiť bezpečnosť vášho webu.
- Ako vytvoriť vlastné odkazy kurzov na WordPress
- 5 WordPress pluginy pridať hodnotenie zákazníkov na váš blog
- Ako vytvoriť koleso šťastia pre kupóny na WooCommerce
- Objavte najlepšie ponuky a kupóny pre svoj blog
záver
Tu ! viete všetko, čo treba vedieť o tom, ako dosiahnuť, aby váš web alebo téma WordPress reagovali pomocou pravidla @media z CSS3. Ak nám unikla téma WordPress, ktorá je vám drahá alebo ktorú uprednostňujete, nechajte prosím odkaz v tejto časti Komentáre nižšie.
Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Pozývame vás tiež zdieľať na rôznych sociálnych sieťach.
...
