Vzhledem k rostoucímu používání mobilních zařízení Google od konce dubna 2015 penalizoval weby, jejichž stránky nejsou připraveny pro mobily. Důsledek pro vás SEO, musíte zajistit, aby se váš web zobrazoval slušně na velké i malé obrazovce.
V tomto článku vám ukážu, jak můžete svůj web umístit na stránku pomocí pravidla @media CSS3.
Je důležité si uvědomit, že výrazy „responzivní“ a „kompatibilní s mobilními zařízeními“ jsou často používány zaměnitelně navzdory rozdílu v jejich skutečném významu. Pochopení toho, co každý z nich znamená, je důležité, abyste se ujistili, že váš web splňuje nezbytná kritéria pro přizpůsobení všem velikostem obrazovky.
Ale dříve, pokud jste nikdy nenainstalovali WordPress objevit Jak nainstalovat 7 kroků WordPress blogu et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu
Pak se vraťme k tomu, proč jsme tady.
Citlivý a kompatibilní mobilní
Webové stránky, které nejsou ani citlivé ani kompatibilní, se zobrazují shodně na všech obrazovkách, tj. verze pro velké obrazovky se zobrazuje všude. Na menších obrazovkách musíte stránku vodorovně posouvat, abyste viděli veškerý jejich obsah. Na těchto obrazovkách se obtížně orientují.
Objevte také tyto Zásuvné moduly 8 WordPress pro přizpůsobení vzhledu vašich webových stránek
Web je mobilní kompatibilní když splňuje pouze přísné minimum, které lze vidět na mobilních zařízeních, což z něj nedělá responzivní web. Například web lze považovat za kompatibilní s mobilními zařízeními, pokud nemusíte navigovat vodorovně. To způsobí, že jeho prvky budou malé a nerozeznatelné. Poté musíte přiblížit a přečíst jeho obsah.
Na jejich straně webové stránky citlivý dokonale se přizpůsobit různým velikostem obrazovky. Předefinují své prvky tak, aby je bylo možné snadno vidět a použít na nejmenších obrazovkách. Toto je typ designu, který chcete pro svůj web použít.
Viz také naše Zásuvné moduly 10 WordPress k vytvoření rezervačního formuláře na vašich webových stránkách
Nyní víte rozdíl mezi responzivními a kompatibilními mobilními telefony. Nyní uvidíme pravidlo @media CSS3, který vám umožní aktualizovat váš web tak, aby byl responzivní, nebo jej vytvořit poměrně snadno Témata WordPress s responzivním obsahem.
Pravidlo @media z CSS3
Aby vaše téma reagovalo, budete potřebovat pravidlo @media CSS3. V zásadě vám umožňuje definovat styly, které chcete použít pro určitý typ (velikost) obrazovky. Použijete jej jako další pravidlo CSS (se složenými závorkami) s jediným rozdílem, že překrývá jiná pravidla CSS.
@media media-type (výraz) {css-test-selector {vlastnost1: hodnota1; vlastnost2: hodnota2; }}
V této struktuře prvky uvnitř pravidla @ media pracovat pouze tehdy, když druh-of-média určeno, že bylo úspěšně detekováno. Typ vybraného média, můžete určit charakteristiky z hlediska rozměrů.
Discover Jak aplikovat rozhraní a uživatelské prostředí na WordPress
Pravidlo @media zjistí pro vás typ obrazovky, se kterou je váš web navštěvován, a zvolí pravidla, která se nejlépe hodí pro tento typ obrazovky. Pravidlo již integrovaly všechny hlavní prohlížeče @media.
Zde je seznam informací: chróm , Safari, Firefox, IE, Opera et Hrana.
Definujte cílové obrazovky
Pokud chcete upravit a WordPress téma stávajícího, vytvořte si prosím záložní kopii CSS druhého, abyste se v případě potřeby mohli vrátit.
Přečtěte si také náš článek o Jak postupně načítat komentáře Facebook a Disqus
Jak jsme viděli v jeho struktuře, k definování typu obrazovky musíte postupovat vpřed @media typ cílené obrazovky. Zde je seznam různých typů obrazovek:
- všechno : pro všechny typy obrazovek nebo pro rozměry uvedené v výraz
- obrazovka : pro všechny obrazovky, ať už mobilní, tablet, notebook nebo stolní počítač
- vytisknout : pro tiskárny, pokud chcete konkrétní styly pro stránky, které lze tisknout
- řeč : pro čtečky obrazovky, pokud chcete styly pro zrakově postižené.
Existují také operátory, které můžete umístit před typ obrazovky; tak jako ne k zobrazení stylů pro obrazovky, které jsou jiného typu než ten, který je uveden, nebo 👔 použít styly pouze na určené obrazovky. Můžete tedy mít:
@media pouze
Definujte styly pro rozměry obrazovky
Můžete použít výraz poskytnout podrobnosti o vlastnostech obrazovky. Po @media vstoupit a následovaný výrazem. Pokud použijete více než jeden výraz, měly by být všechny odděleny znakem a , Zde je příklad struktury:
Obrazovka @media only a (max-width: 640px) {selector-css-example {/ * Vaše obvyklé CSS zde * /}}
V tomto příkladu používám max šířkou s hodnotou 640px. Jedná se o nastavení maximální šířky obrazovky velikosti iPhone nebo malého smartphonu se systémem Android. S tímto druhem struktury máte kontrolu nad tím, jak váš web vypadá na různých zařízeních. Zde je seznam vlastností souvisejících s dimenzemi, ve kterých můžete použít výraz :
Objevte také naše 8 SEO WordPress pluginy pro optimalizaci SEO vašich webových stránek
- mv-šířce et max šířkou : minimální a maximální šířka požadovaná pro zobrazení stylů obsažených v pravidle @media, Ještě jeden pixel a styly se nezobrazí.
- min-výšky et max-výšky : minimální a maximální výška požadovaná pro zobrazení stylů obsažených v pravidle @media, Protože většina obrazovek je navržena tak, aby stránky svisle rozbalovala, vlastnosti min-výška et max-výšky jsou málo zvyklí.
Zde je seznam velikostí obrazovky pro některé terminály:
- IPhone: 640px
- iPad: 1024 pixelů
- Tablety: 1366 pixelů
- Android smartphone: 640px, 720px, 854px, 960px
- Android extra velký: 1024px, 1066px
- Windows phone: 480
- Windows phone large: 768px
- mladí i staří: 320 pixelů
- Ultrabook / notebooky: 1366 pixelů
- Stolní počítače a televizory: 1920px
Existuje mnoho dalších vlastností, které můžete použít v výraz. Pokud například cílíte na stolní počítače nebo televizní obrazovky schopné zobrazovat obrázky v poměru 16: 9, můžete použít strukturu jako tato:
Obrazovka @media only a (min. šířka: 1920px) a (poměr stran zařízení: 16/9) {selector-css-example {/ * Vaše obvyklé CSS zde * /}}
Podrobnější seznamy a příklady naleznete v části Konzultace w3schools et Mozilla Developers.
Otestujte responzivní funkčnost svého webu
Jak upravujete nebo sestavujete svůj WordPress téma nebo na konci, pokud máte rádi překvapení, musíte otestovat výsledek, abyste zjistili, zda je konečně citlivý. Pamatujte, že Google sleduje webové stránky, které nereagují.
Viz také tyto 10 WordPress pluginy pro vytváření záložek na vašem blogu
Pokud nemáte všechna mobilní zařízení, na která cílíte, existuje (naštěstí pro naše burzy) spousta nástrojů, pomocí kterých můžete zjistit, jak se váš web přizpůsobuje různým obrazovkám.
Přímo v prohlížeči v počítači můžete použít Rozšíření prohlížeče prohlížeče Chrome Resizer, ResponsiveResize, ResizeMe ou Firesizer, Níže je obrázek BlogPasCher v zobrazení Responsive Design View, které se standardně dodává s Firefoxem.
Tomuto úkolu se věnují také webové stránky:
Tato webová stránka se vyznačuje tím, že vám umožňuje vybrat si rozměry obrazovky sami. Uvědomte si, že tento web načte váš v rámci. Pokud tedy vaše WordPress téma byl navržen tak, aby se nezobrazoval v rámečku, takže je dost možné, že se zde nezobrazí.
IPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Tento web je užitečný pro testování vašeho webu na nejnovějších zařízeních Apple, iPad a iPhone. Stačí zadat adresu URL. Všimněte si, že se na něj vztahuje stejný problém s rámcem jako responsivepx.
Na tomto webu si můžete vyzkoušet ten svůj na malých obrazovkách a na starších modelech telefonů, které vyberete na pravé straně obrazovky. Můžete také nakonfigurovat některé vlastnosti obrazovky.
Test služby Google Mobile Friendly
Toto je jeden z nejdůležitějších testů, ne-li nejdůležitější. Jednoduše zadejte svou adresu do lišty a klikněte na Analyzovat zahájit test. Po testu nástroj zobrazí zprávu a skóre. Pokud je test pozitivní, pak o to lépe, že vás Google nebude penalizovat.
Pokud nejste vývojář, doporučuji vám seznam responzivních témat WordPress začít.
Doporučené zdroje
Objevte také další doporučené zdroje, které vám pomohou lépe svést své partnery a předplatitele, ale také zlepšit bezpečnost vašeho webu.
- Jak vytvořit vlastní odkazy kurzů na WordPress
- 5 WordPress pluginy pro přidání hodnocení zákazníků do vašeho blogu
- Jak vytvořit kolo štěstí pro kupóny na WooCommerce
- Objevte nejlepší nabídky a kupóny pro svůj blog
Proč investovat do čističky vzduchu?
Tady ! víte vše, co musíte vědět o tom, jak zajistit, aby vaše webové stránky nebo téma WordPress reagovaly pomocí pravidla @media CSS3. Pokud jsme zmeškali téma WordPress, které je vám drahé nebo které dáváte přednost, zanechte prosím odkaz v této sekci commentaires níže.
Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Zveme vás také sdílet na různých sociálních sítích.
...
