Siden slutningen af april 2015 har Google bemærket den stigende brug af mobile enheder, og Google har straffet websteder, hvis sider ikke er mobilklare. Konsekvens, for din SEO, skal du sørge for, at din hjemmeside vises anstændigt på både store og små skærme.
I denne artikel viser jeg dig, hvordan du kan placere dit websted på siden ved hjælp af reglen @media af CSS3.
Det er vigtigt at bemærke, at udtrykkene "lydhør" og "mobilkompatibel" ofte bruges om hinanden på trods af forskellen i deres virkelige betydning. At forstå, hvad hvert betyder, er vigtigt for at kunne sikre, at dit websted opfylder de nødvendige kriterier for at imødekomme alle skærmstørrelser.
Men før, hvis du aldrig har installeret WordPress-opdagelse Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog
Lad os derefter vende tilbage til, hvorfor vi er her.
Responsive og Mobil-kompatibel
Websteder der ikke er hverken lydhør nor-kompatibel mobil, vises identisk på alle skærme, dvs. versionen til store skærme vises overalt. På mindre skærme skal du rulle siden vandret for at se alt deres indhold. De er vanskelige at navigere på disse skærme.
Oplev også disse 8 WordPress plugins til at tilpasse udseendet af dit websted
Et websted er Mobile kompatible når det kun opfylder det strenge minimum, der skal ses på mobil, hvilket ikke gør det til et lydhørt websted. For eksempel kan et websted betragtes som mobilkompatibelt, hvis du ikke behøver at navigere vandret. Dette får dets elementer til at blive små og skelnes ikke fra hinanden. Du skal derefter zoome ind for at læse dets indhold.
På deres side hjemmesiderne lydhør tilpasse sig perfekt til forskellige skærmstørrelser. De omdefinerer deres elementer, så de let kan ses og bruges på mindre skærme. Dette er den type design, du ønsker til dit websted.
Se også vores 10 WordPress plugins for at oprette et reservationsskema på din hjemmeside
Du kender nu forskellen mellem lydhør og kompatibel mobil. Vi vil nu se reglen @media af CSS3, som giver dig mulighed for at opdatere din hjemmeside til responsiv eller ret nem at oprette WordPress-temaer med responsivt indhold.
Reglen @media af CSS3
For at gøre dit tema lydhør, skal du bruge reglen @media af CSS3. Dybest set giver det dig mulighed for at definere de stilarter, du vil bruge til en bestemt skærmtype (størrelse). Du bruger den som en anden CSS-regel (med seler) med den eneste forskel, at den indlejrer andre CSS-regler.
@media medietype (udtryk) {css-test-vælger {egenskab1: værdi1; ejendom2: værdi2; }}
I denne struktur er elementerne inde i reglen @ medier kun arbejde, når den faglige medier angivet til at være blevet opdaget. Hvilken type medie der er valgt, kan du specificere egenskaber med hensyn til dimensioner.
Oplev Sådan bruges interface og brugeroplevelse til WordPress
Reglen @media registrerer for dig den skærmtype, som dit websted er besøgt med, og vælger de regler, der bedst passer til denne type skærm. Alle større browsere har allerede integreret reglen @media.
Her er listen til din information: Chrome , Safari, Firefox, IE, Opera et Edge.
Definer målskærmbillederne
Hvis du ønsker at ændre en WordPress tema eksisterende, bedes du lave en sikkerhedskopi af sidstnævntes CSS for at kunne gå tilbage, hvis det er nødvendigt.
Læs også vores artikel om Sådan gradvist indlæses kommentarer fra Facebook og Disqus
Som vi har set i dens struktur, skal du videresende for at definere skærmtypen @media den type skærm, der er målrettet mod. Her er listen over de forskellige typer skærm:
- alle : for alle typer skærme eller for de dimensioner, der er angivet i udtryk
- skærm : til alle skærme, hvad enten det er mobil, tablet, laptop eller desktop
- trykke : til printere, hvis du vil have specifikke stilarter til de sider, der kan udskrives
- tale : til skærmlæsere, hvis du vil have typografier for synshandicappede.
Der er også operatører, som du kan placere før skærmtypen; som ikke for at vise stilarter til skærme, der er af en anden type end den angivne eller kun for kun at anvende stilarter på bestemte skærme. Du kan derfor have:
@media kun skærm
Definer stilarter til skærmdimensioner
Du kan bruge udtryk for at give detaljer om skærmens egenskaber. Efter @media indtaste , efterfulgt af udtrykket. Hvis du bruger flere udtryk, skal de alle adskilles af ,. Her er et eksempel på strukturen:
@media only screen og (max-width: 640px) {selector-css-example {/ * Din sædvanlige CSS her * /}}
I dette eksempel bruger jeg max-bredde med en værdi på 640px. Dette er for at indstille en maksimal skærmbredde på størrelsen af en iPhone eller en lille Android-smartphone. Med denne form for struktur har du kontrol over, hvordan dit websted ser ud på forskellige enheder. Her er en liste over egenskaber relateret til dimensioner, som du kan bruge i udtryk :
Oplev også vores 8 SEO WordPress plugins til optimering af SEO på dit websted
- mi bredde et max-bredde : henholdsvis den krævede minimums- og maksimumbredde til visning af typografier indeholdt i reglen @media. Én pixel og stilarter mere vises ikke.
- mi-højde et max-højde : henholdsvis den minimums- og maksimumhøjde, der kræves for at vise typografierne indeholdt i reglen @media. Fordi de fleste skærme er designet til at rulle sider lodret, egenskaber min-højde et max-højde er lidt brugt.
Her er en liste over skærmstørrelser for nogle terminaler:
- IPhone: 640px
- IPad: 1024px
- Tabletter: 1366 px
- Android-smartphone: 640px, 720px, 854px, 960px
- Android ekstra stor: 1024px, 1066px
- Windows-telefon: 480
- Windows-telefon stor: 768 px
- unge og gamle: 320 px
- Ultrabook / bærbare computere: 1366 px
- Desktops og tv: 1920px
Der er mange andre egenskaber, du kan bruge i udtryk. For eksempel, hvis du målretter mod desktops eller tv-skærme, der kan vise 16: 9-billedformatbilleder, kan du bruge en struktur som denne:
@media kun skærm og (min bredde: 1920px) og (enhedsformat: 16/9) {selector-css-eksempel {/ * Din sædvanlige CSS her * /}}
For mere komplette lister og eksempler, kontakt w3schools et Mozilla developpers.
Test den responsive funktionalitet på dit websted
Når du ændrer eller bygger din WordPress tema eller til sidst, hvis du kan lide overraskelser, skal du teste resultatet for at se, om det endelig reagerer. Husk, at Google holder øje med websteder, der ikke er responsive.
Se også disse 10 WordPress plugins for at oprette faner på din blog
Hvis du ikke har alle de mobile enheder, du målretter mod, er der (heldigvis for vores børser) et stort antal værktøjer til at se, hvordan dit websted tilpasser sig de forskellige skærme.
Direkte i browseren på din computer, kan du bruge Vindue Resizer Chrome-browseren Extension, ResponsiveResize, ResizeMe ou Firesizer. Nedenfor er et billede af BlogPasCher i Responsiv designvisning, som leveres som standard med Firefox.
Der er også websteder dedikeret til opgaven:
Denne hjemmeside har det særlige ved at lade dig vælge skærmdimensionerne selv. Vær opmærksom på, at denne hjemmeside indlæser din i en ramme. Så hvis din WordPress tema blev designet til ikke at blive vist i en ramme, så det er meget muligt, at det ikke vises her.
iPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Dette websted er nyttigt til test af dit websted på de nyeste Apple-, iPad- og iPhone-enheder. Indtast bare din url. Bemærk, at det er underlagt det samme rammeproblem som responsivepx.
På dette websted kan du teste din på små skærme og på ældre modeller af telefoner, som du vælger på højre side af skærmen. Du kan også konfigurere nogle skærmegenskaber.
Dette er en af de vigtigste tests, hvis ikke de vigtigste. Indtast bare din adresse i bjælken, og klik på Analyser for at starte testen. Efter testen viser værktøjet en rapport og en score. Hvis testen er positiv, så desto bedre bliver du ikke straffet af Google.
Hvis du ikke er en udvikler, anbefaler jeg dig en liste over lydhøre WordPress-temaer at starte.
Anbefalede ressourcer
Find også andre anbefalede ressourcer, der hjælper dig med at forføre dine partnere og abonnenter bedre, men også forbedre sikkerheden på dit websted.
- Sådan oprettes brugerdefinerede links på WordPress
- 5 WordPress plugins for at tilføje kundeanmeldelser til din blog
- Sådan skaber du et hjul af formue for kuponer på WooCommerce
- Oplev de bedste tilbud og kuponer til din blog
Konklusion
Her ! du ved alt, hvad der er at vide om, hvordan du gør dit websted eller WordPress-tema lydhørt ved hjælp af reglen @media af CSS3. Hvis vi savnede et WordPress-tema, der er dig, eller som du foretrækker, skal du efterlade et link i sektionen kommentarer nedenfor.
Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Vi inviterer dig også til del på dine forskellige sociale netværk.
...
