Med tanke på den ökande användningen av mobila enheter, sedan slutet av april 2015, har Google straffat webbplatser vars sidor inte är mobilklara. Konsekvens, för din SEO, måste du se till att din webbplats visas anständigt på både stora och små skärmar.
I den här artikeln visar jag dig hur du kan sätta din webbplats på sidan med regeln @media av CSS3.
Det är viktigt att notera att termerna "lyhörd" och "mobilkompatibel" ofta används omväxlande trots skillnaden i deras verkliga betydelse. Att förstå vad var och en betyder är viktigt för att kunna säkerställa att din webbplats uppfyller nödvändiga kriterier för att passa alla skärmstorlekar.
Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg
Låt oss sedan gå tillbaka till varför vi är här.
Responsiv och mobilkompatibel
Webbplatser som inte är det varken lyhörd eller mobilkompatibel, visas identiskt på alla skärmar, dvs. versionen för stora skärmar visas överallt. På mindre skärmar måste du rulla sidan horisontellt för att se allt innehåll. De är svåra att navigera på på dessa skärmar.
Upptäck också dessa 8 WordPress plugins för att anpassa utseendet på din webbplats
En webbplats är Mobile kompatibel när det bara uppfyller det strikta minimum som ska ses på mobilen, vilket inte gör det till en lyhörd webbplats. Till exempel kan en webbplats anses vara mobilkompatibel om du inte behöver navigera horisontellt. Detta gör att dess element blir små och oskiljbara. Du måste sedan zooma in för att läsa dess innehåll.
På deras sida webbplatserna mottaglig anpassa sig perfekt till olika skärmstorlekar. De omdefinierar sina element så att de lätt kan ses och användas på de minsta skärmarna. Det här är den typ av design du vill ha för din webbplats.
Se även vår 10 WordPress plugins för att skapa en bokningsformulär på din webbplats
Nu vet du skillnaden mellan lyhörd och kompatibel mobil. Vi kommer nu att se regeln @media av CSS3 som låter dig uppdatera din webbplats för responsiv eller att skapa ganska enkelt WordPress-teman med responsivt innehåll.
Regeln @media från CSS3
För att göra ditt tema lyhörd behöver du regeln @media av CSS3. I grund och botten kan du definiera de stilar du vill använda för en viss typ (storlek) av skärmen. Du använder den som en annan CSS-regel (med hängslen) med den enda skillnaden att den överlappar andra CSS-regler.
@media mediatyp (uttryck) {css-test-väljare {property1: value1; fastighet2: värde2; }}
I denna struktur elementen inuti regeln @ media funktion endast när typ-av-media anges för att ha upptäckts framgångsrikt. Den typ av media som väljs, du kan ange egenskaperna i form av dimensioner.
Upptäck Hur man använder gränssnitt och användarupplevelse på WordPress
Regeln @media upptäcker för dig vilken typ av skärm som din webbplats besöks med och väljer de regler som bäst passar den här typen av skärm. Alla större webbläsare har redan integrerat regeln @media.
Här är listan för din information: krom , Safari, firefox, IE, Opera et kant.
Definiera målskärmarna
Om du vill ändra en Wordpress tema befintlig, gör en säkerhetskopia av CSS för den senare för att kunna gå tillbaka om det behövs.
Läs också vår artikel om Hur du gradvis laddar Facebook- och Disqus-kommentarer
Som vi har sett i dess struktur måste du vidarebefordra för att definiera skärmtypen @media vilken typ av skärm du riktar dig till. Här är listan över de olika typerna av skärm:
- alla : för alla typer av skärmar eller för de dimensioner som anges i Uttrycket
- screen : för alla skärmar, antingen mobil, surfplatta, bärbar dator eller skrivbord
- skriv ut : för skrivare, om du vill ha vissa stilar för sidorna som kan skrivas ut
- tal : för skärmläsare, om du vill ha stilar för synskadade.
Det finns också operatörer som du kan lägga före skärmtypen; som inte för att visa stilar för skärmar som är av annan typ än den som anges eller endast för att bara använda stilar på angivna skärmar. Du kan därför ha:
@media endast skärm
Definiera stilar för skärmdimensioner
Du kan använda Uttrycket för att ge mer information om skärmens egenskaper. Efter @media ange och följt av uttrycket. Om du använder mer än ett uttryck bör de alla separeras av och. Här är ett exempel på strukturen:
@media endast skärm och (max-bredd: 640px) {selector-css-exempel {/ * Din vanliga CSS här * /}}
I det här exemplet använder jag max-bredd med ett värde av 640px. Detta för att ställa in en maximal skärmbredd på storleken på en iPhone eller en liten Android-smartphone. Med denna typ av struktur har du kontroll över hur din webbplats ser ut på olika enheter. Här är en lista över egenskaper relaterade till dimensioner som du kan använda i Uttrycket :
Upptäck också vår 8 SEO WordPress plugins för att optimera SEO på din webbplats
- mi-bredd et max-bredd : respektive den lägsta och högsta bredden som krävs för visning av stilar som ingår i regeln @media. Ytterligare en pixel och stilar visas inte.
- mi-höjd et max-höjd : respektive den lägsta och högsta höjd som krävs för att visa stilarna i regeln @media. Eftersom de flesta skärmar är utformade för att rulla upp sidor vertikalt, egenskaper min-höjd et max-höjd är lite använda.
Här är en lista över skärmstorlekar för vissa terminaler:
- IPhone: 640px
- IPad: 1024px
- Tabletter: 1366 pixlar
- Android-smartphone: 640 pixlar, 720 pixlar, 854 pixlar, 960 pixlar
- Android extra stor: 1024px, 1066px
- Windows-telefon: 480
- Windows-telefon stor: 768 pixlar
- unga och gamla: 320 pixlar
- Ultrabook / bärbara datorer: 1366px
- Stationära och TV-apparater: 1920 pixlar
Det finns många andra egenskaper du kan använda i Uttrycket. Om du till exempel riktar dig mot stationära datorer eller TV-skärmar som kan visa bilder i bildförhållandet 16: 9 kan du använda en sådan struktur:
@media endast skärm och (min-bredd: 1920 pixlar) och (enhet-bildförhållande: 16/9) {selector-css-exempel {/ * Din vanliga CSS här * /}}
För mer kompletta listor och exempel, kontakta w3schools et Mozilla Developpers.
Testa din känsliga funktionalitet på din webbplats
När du modifierar eller bygger din Wordpress tema eller i slutet om du gillar överraskningar måste du testa resultatet för att se om det äntligen är responsivt. Kom ihåg att Google tittar efter webbplatser som inte är responsiva.
Se även dessa 10 WordPress plugins för att skapa flikar på din blogg
Om du inte har alla mobila enheter som du riktar dig mot finns det (lyckligtvis för våra börser) ett stort antal verktyg för att se hur din webbplats anpassar sig till de olika skärmarna.
Direkt i webbläsaren på din dator kan du använda Window Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. Nedan visas en bild av BlogPasCher i Responsiv designvy som levereras som standard med Firefox.
Det finns också webbplatser avsedda för uppgiften:
Den här webbplatsen har det speciella med att låta dig välja skärmdimensioner själv. Var medveten om att den här webbplatsen laddar din i en ram. Så om din Wordpress tema designades för att inte visas i en ram, så det är mycket möjligt att det inte visas här.
IPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Denna webbplats är användbar för att testa din webbplats på de senaste Apple-, iPad- och iPhone-enheterna. Ange bara din URL. Observera att den är föremål för samma ramproblem som responsivepx.
På den här webbplatsen kan du testa din på små skärmar och på äldre modeller av telefoner som du väljer på höger sida av skärmen. Du kan också konfigurera vissa skärmegenskaper.
Detta är ett av de viktigaste testerna, om inte det viktigaste. Ange bara din adress i fältet och klicka på Analysera för att starta testet. Efter testet visar verktyget en rapport och en poäng. Om testet är positivt kommer du inte att bestraffas av Google, desto bättre.
Om du inte är utvecklare rekommenderar jag dig en lista med lyhörda WordPress-teman till att börja med.
Rekommenderade resurser
Upptäck även andra rekommenderade resurser som hjälper dig att bättre locka dina partners och prenumeranter, men också för att förbättra säkerheten på din webbplats.
- Hur man skapar egna linksbanor på Wordpress
- 5 WordPress plugins för att lägga till kundrecensioner på din blogg
- Hur man skapar ett hjul av förmögenhet för kuponger på WooCommerce
- Upptäck de bästa erbjudandena och kupongerna för din blogg
Slutsats
Här! du vet allt som finns att veta om hur du gör din webbplats eller WordPress-tema lyhörd med regeln @media av CSS3. Om vi saknade ett WordPress-tema som du älskar eller som du föredrar, vänligen lämna en länk i avsnittet commentaires nedan.
Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Vi inbjuder dig också till dela på dina olika sociala nätverk.
.
