Mobilversjon av wordpress c 2. Hvordan lage en mobilversjon av en mal for WordPress

I tilfelle du ikke er klar over det, danner mobile gadgets i dag grunnlaget for Internett-trafikkforbruk i en rekke land og regioner, og verktøy som iMessage og WhatsApp behandler tonnevis av brev og meldinger ikke på papir, men på skjermen. I økende grad henvender folk seg til mobilnettsteder i stedet for skrivebordsversjonene. Hvordan kan du forsikre deg om at nettstedet ditt ser ut og fungerer som det skal, ikke bare på en bærbar PC eller PC-skjerm, men også på en smarttelefon og nettbrett? Pluginene som vi vil fortelle deg om i dag vil definitivt hjelpe deg med å takle denne oppgaven.

Så du må gjøre om det vanlige WordPress-nettstedet ditt til et mobilresponsivt nettsted. Her er plugins som, selv om de er helt gratis, vil hjelpe deg og gjøre nettstedet ditt tilgjengelig for mobilbrukere samtidig som det opprettholder design og struktur.

1. JetPack

La oss starte med den enkleste og kanskje mest effektive måten å gjøre en WordPress-side mobilvennlig på. Sett med verktøy JetPack lar deg løse dette problemet ved å trykke på bare én knapp. Dessuten: du har sannsynligvis allerede installert den blant andre grunnleggende plugins. Hvis ja, klikker du ganske enkelt på "JetPack"-koblingen i sideadministratormenyen og går til modulersiden. Der må du aktivere " Mobilt tema"- og alt er klart.

2.WPtouch

Det nest mest effektive verktøyet på listen over gratisverktøy er en plugin. WPtouch. Den er allerede lastet ned mer enn 4,3 millioner ganger. Den lar deg lage et vakkert og raskt mobilnettsted på bare et par minutter, uten å skrive en eneste linje med kode. Den betalte versjonen, kalt WPtouch Pro, tilbyr også et eget adminpanel og støtte i billettsystemet.

3.WP mobildetektor

Denne plugin har automatisk gjenkjenning av vanlige mobiltelefoner og smarttelefoner. Avhengig av dette, lastes nettstedet i en kompatibel versjon for hver spesifikke mobiltelefon eller annen gadget (tar hensyn til skjermoppløsning, diagonal og andre parametere). Det er totalt 7 forhåndsinstallerte mobiltemaalternativer. Denne pluginen endrer også automatisk størrelsen og oppløsningen på bildene avhengig av brukerens skjerm. I tillegg har den sine egne widgets og statistikksamling.

Nøkkelegenskaper:

• Automatisk enhetsdeteksjon basert på en database med mer enn 5 tusen forskjellige mobiltelefoner og smarttelefoner.
• Evnen til å skille mellom standard oppringere og avanserte mobile gadgets.
• Innsamling av statistikk om mobilbrukere, inkludert antall unike besøk, søketrafikk osv.

4. WordPress Mobile Pack

Denne plugin-en støtter domenekartlegging og søkeagenter for å identifisere ulike populære mobile enheter og vise innhold i oppløsningen og kvaliteten som kreves av en bestemt mobiltelefon. I tillegg er det tilpassbare fargeskjemaer for et enkelt designtema.

Plugin inkluderer også:

• bytte mellom mobil og klassisk skrivebordstema;
• et sett med støttede og gjenkjente enheter, inkludert temaer for Nokia- og WebKit-nettlesere;
• tilpasse fargepaletten etter tema med støtte for justeringer i CSS;
• automatisk tilpasning av bilder og oppdeling av innlegg og sider;
• mobilt administrasjonspanel;
• mobilannonseringswidget som støtter plattformer som AdMob eller Googles Mobile Adsense;
• mobilanalyse;
• widget for å legge til strekkoder på nettstedet for raskt å bokmerke nettstedet på en mobilenhet når du ser nettstedet på en stor skrivebordsskjerm.

5.WP Mobile Edition

Faktisk er dette tvillingbroren til forrige plugin. Den har alle de samme funksjonene og alternativene, men det er også støtte for et kommentarsystem og et mobilt XML-kart med egen generator for nettsteder, som vil ha god effekt på søkemotoroptimalisering. Denne plugin-en lager også en mobilversjon på et underdomene som m.facebook.com, som er bra for raskere caching og støtte for mobilinformasjonskapsler.

6. Wapple Architect Mobile Plugin

Denne plugin-en er skrevet i WAPL-markeringsspråk, som er spesielt utviklet for å tilpasse, gjengi og levere nettinnhold på ulike enheter og plattformer. Denne plugin-en bruker sin egen API for hver spesifikke brukerenhet, som er bedre enn sniffingsmetoden. Påvirker ikke adressestrukturen til skrivebordssiden. En ganske enkel løsning som fungerer like lett.

7. Mobiltrykk

Ganske populær og enkel plugin som kommer med 2 temaer og hjelper videre temautvikling av mobilutviklere.

8. Duda Mobile Website Builder

Duda Mobile-plugin-byggeren hjalp til med å lage mobilversjoner av nettsteder, inkludert for slike prosjekter og publikasjoner som Forbes, Huffington Post, NY Times. Det er veldig enkelt og gjør raskt din vanlige nettside til en mobil. Fungerer med alle WordPress-temaer og synkroniserer automatisk med hovedsiden din.

Å tilpasse et nettsted for mobile enheter er en nødvendig komponent for vellykket markedsføring, fordi de fleste brukere elsker bekvemmelighet. Nylig har søkemotorer som Google og Yandex begynt å senke rangeringen av nettsteder som ikke er tilpasset mobile enheter. Som et resultat avtar nettstedtrafikken. Derfor, for å opprettholde denne indikatoren, trenger du en mobilversjon av WordPress.

For det første er det verdt å analysere den nåværende visningen av nettstedet på mobile enheter. For å gjøre dette, gå bare til Googles nettredaktørpanel. Her finner du detaljert informasjon om manglene og kan rette dem ved hjelp av programmeringskunnskap.

Den beste løsningen ville være å legge til følgende tekst i CSS-delen av temaet ditt:

#content(maks-bredde: 1280 px;)

I tillegg er det tilrådelig for deg å endre bredden på sidene i mobilversjonen («bredde»-attributtet er ansvarlig for dette). Når du finner den i CSS-delen, må du erstatte verdien med "100%". Dette vil tillate nettleseren å automatisk tilpasse nettstedet til hvilken som helst skjerm. Men det er verdt å merke seg at denne tilpasningsmetoden ikke er effektiv, fordi nettstedet vil ta lang tid å laste. Hovedmålene med mobilversjonen er rask lasting og bekvemmelighet. I tillegg er denne typen tilpasning ikke rask. Du må se etter de nødvendige egenskapene, eksperimentere med verdiene deres hvis det oppstår feil, og så videre.

Hvis du ikke har programmeringskunnskap, bør du installere spesielle plugins som vil hjelpe deg med å spare tid og øke hastigheten på lasting av mobilversjonen.

1. Hammy nødvendig for proporsjonal visning av bilder på mobile enheter. Måten det fungerer på er at plugin-en endrer standard image calling tag img til figur. Hvis ønskelig, i plugin-innstillingene er det et alternativ for å deaktivere visningen av bilder av en bestemt klasse. Dette er nødvendig ved tilpasning av nyheter og eventuelle andre store portaler. Ellers vil nettstedet ta mye lengre tid å laste.

2. Responsive widgets nødvendig for å lage spesielle widgets som bare vises på mobile enheter. En widget er en blokk av et nettsted som inneholder all informasjon (nylige eller populære nyheter, meningsmålinger osv.). Utvalget av widgets er stort nok til å lage et multifunksjonelt nettsted.

3. Plugin WP Lightbox 2 vil hjelpe deg med å lage popup-vinduer på en mobilside. Den begynner å fungere umiddelbart etter aktivering. Om ønskelig kan du endre varigheten på visningen. Generelt bør det ikke være noen problemer med oppsettet.

4. vil gjøre det mye enklere for deg å sette opp nettsidetilpasning. Etter å ha aktivert det, vil et panel vises øverst på siden, som du kan justere størrelsen på nettstedet med avhengig av typen mobilenhet. Denne plugin er praktisk fordi når du endrer parametere, kan du umiddelbart se resultatet.

5. Hvis du vil lage en ferdig responsiv nettside på få minutter, bør du bruke en plugin WP Touch. Det er ganske populært fordi det brukes av mer enn 5 millioner webansvarlige. Denne plugin-modulen inneholder grunnleggende innstillinger (navn, språk, region) og ett tema. Hvis du ønsker å lage en mer funksjonell mobilversjon av nettstedet for smarttelefoner, bør du kjøpe premiumversjonen av WP Touch Pro. Det er et stort antall forskjellige temaer og tilleggsinnstillinger, så nettstedet ditt vil ikke være monotont.

6. WP mobil detektor er designet for å bestemme enheten som den besøkende får tilgang til nettstedet fra. Den er i stand til å gjenkjenne omtrent 5 tusen forskjellige enheter. Programtillegget registrerer også statistikk over unike besøk, henvisningskilder og mye mer.

7. Dette er en multifunksjonell plugin. Takket være den kan du tilpasse visningen av ulike barknapper (legg til i bokmerker osv.), knapper for å endre nettstedversjonen fra klassisk til mobil, og blokker med annonsering fra Google eller AdMob. Den inneholder også en mobilversjon av nettstedets kontrollpanel. Dette vil øke bekvemmeligheten betydelig, fordi i standardversjonen av kontrollpanelet, når du arbeider på mobile enheter, er noen alternativer begrenset i tilgang.

8. Dette er en fullstendig kopi av den forrige. I tillegg til alternativene ovenfor, muliggjør denne plugin muligheten til å kommentere innlegg ved hjelp av Disqus-systemet, og oppretter også et ekstra XML-kart for mobilversjonen.

9. vil hjelpe deg med å lage en rask og iøynefallende nettside for en mobil enhet. Det fungerer perfekt med alle temaene som tilbys på den offisielle nettsiden til WordPress-motoren. Denne plugin-en brukes av skaperne av NY Times, Forbes og andre populære nettsteder.

10. Mobilpress er ganske enkelt. Denne plugin vil lage en praktisk mobilversjon uten noen spesielle effekter. Fordelen med denne plugin er at den reduserer belastningen på serveren. Som du vet, jo færre forskjellige widgets et nettsted har, jo raskere vil det lastes inn på enhetens skjerm.

11. WP Mobile Splash Page Editor vil være nyttig for deg når du oppretter en gjesteside for mobilversjonen av Internett-portalen din. Det er ganske enkelt å tilpasse og inneholder et stort antall forskjellige stiler. Med riktig design kan du øke trafikken til nettstedet. Det er også verdt å nevne at denne plugin sikrer rask lasting av sider på enhver bærbar enhet.

12. Ved bruk Wapple Arkitekt Mobil du vil motta en tilpasset versjon, som vil ha en URL identisk med den klassiske. Det vil si at det ikke vil være noen omdirigering til et underdomene som "m.site.com". Dette påvirker ikke SEO-beregninger på noen måte. En spesiell funksjon ved denne plugin er også muligheten til å tilpasse absolutt ethvert tema til mobile enheter (selv et tema med et stort antall forskjellige widgets). Takket være dette trenger du ikke bruke ekstra tid på å jobbe med designet.

Hvordan utføres tilpasning uten bruk av plugins?

Hvis du ikke vil bruke plugins, er det spesielle tjenester der du kan lage en mobilversjon for hvilken som helst enhet.

Tjenesten dudamobile.com er ganske populær fordi den har et bredt spekter av alternativer. Denne tjenesten er imidlertid betalt. Prisen vil være $9,00. Det er en anstendig pris med tanke på at du ikke trenger å bruke noen plugins.

Først må du registrere deg her eller logge inn via Facebook. Deretter går du til "Design"-delen og klikker på "Layout"-feltet. Mulige naåpnes foran deg. For å velge, trenger du bare å klikke på alternativet du liker. For å tilpasse fargeskjemaer, må du klikke på "Stil"-feltet. Du kan også laste opp ditt eget bakgrunnsbilde. «Tittel»-feltet er ansvarlig for logoen. Du kan laste det opp som et bilde eller presentere det med litt tekst. Generelt skjer designprosessen i en visuell modus. Du "konfigurerer", og tjenesten genererer en spesiell kode. Det er også verdt å nevne at det også finnes en gratisversjon. Men i dette tilfellet vil reklame automatisk vises på nettstedet.

En enklere er mippin.com, som inneholder betydelig færre alternativer. Arbeidsmekanismen er lik den forrige tjenesten.

Tilpasningssjekk

Etter handlingene som er tatt, bør du få ønsket resultat. Men for å være sikker på at tilpasningen for en mobilenhet gjøres riktig, bør du bruke følgende tjenester.

Først av alt bør du gå tilbake til Googles nettredaktørpanel og se hvor stor prosentandel det vurderer ytelsen til mobilversjonen din. Har du en verdi på 100 %, så er målet fullt ut nådd. Nettstedet ditt vil stige i rangering og ha god trafikk. Hvis verdien er et par prosent mindre, vil ikke dette være et vesentlig problem. Hvis resultatet er utilfredsstillende, bør du revurdere tilpasningsmetoden din. Malen spiller en nøkkelrolle i valg av tilpasningsmetode. Hvis pluginene fungerer bra med malen din, bør det ikke være noen problemer. Ellers vil det være tilrådelig for deg å deaktivere de installerte malene og bruke en betalt tjeneste. Om nødvendig bør du kontakte en spesialist eller installere en enklere mal.

Ved å bruke iPad Peek-tjenesten kan du se skjermfunksjonene til mobilversjonen din på enheter som iPad, iPhone og andre Apple-dingser helt gratis. Denne tjenesten er populær fordi de fleste Internett-brukere foretrekker Apple-enheter.

Du kan også bruke Mobile Phone Emulator-tjenesten, som lar deg se visningen av din mobilversjon ikke bare på Apple-produkter, men også på produkter fra Samsung, HTC og BlackBerry.

Screenfly er populært. Takket være denne tjenesten kan du enkelt finne ut hvordan nettstedet ditt vises ikke bare på telefoner, men også på TV-er, forskjellige bærbare datamaskiner, nettbrett og andre enheter. Hvis du ønsker det, kan du stille inn parametrene dine og se ytelsen.

Hvis du ikke vil gå til noen nettsteder igjen, installer Opera Mobile Emulator én gang. Dette er et tillegg til den berømte Opera-nettleseren. Det er gratis og enkelt å bruke.

Hei kjære lesere!

To fantastiske ting har skjedd på bloggen min denne uken! For det første har antallet besøkende endelig passert 1000 (det var 1040 unike besøkende på tirsdag). For det andre installerte jeg den i sidefeltet. Jeg ser frem til dine kommentarer om utseendet til reklameblokken. Og jeg vil være ekstremt takknemlig for dine klikk :)

I mellomtiden varslet Google meg nylig om at bloggen min ikke ble vist bra på mobile enheter. Det ble skapt mye støy på Internett av deres melding om at fra 21. april 2015 vil alle sider som ikke er tilpasset mobiltelefoner bli senket i søkeresultatene.

Spørsmålet oppsto: er en mobilversjon av nettstedet nødvendig? Etter statistikken for den siste måneden å dømme har jeg over 1500 besøkende som bruker mobiltelefon eller nettbrett ved visning. Dette er omtrent 50 personer per dag, som ikke er så lite. Og hvis du tenker på at hvert år mobilteknologier blir introdusert mer og mer i livene våre, må vi tenke på å følge med i tiden. I denne artikkelen skal vi se på hvordan du lager en mobilversjon for en WordPress-blogg.

Hvordan sjekke mobilversjonen av nettstedet?

Det første du må gjøre er å sjekke ressursene dine for samsvar med Googles krav. Alle kan analysere hvor enkelt det er å se nettstedet på mobile enheter her - google.com/webmasters/tools/mobilvennlig.

Her er resultatet jeg fikk:

Her er en annen nyttig tjeneste fra Google for å sjekke lastehastigheten til forskjellige versjoner av et nettsted: developers.google.com/speed/pagespeed/insights. Den forklarer i detalj hva som er feil på nettstedet ditt, og gir spesifikke eksempler med skjermbilder av bloggen din. Derfor, med kunnskap om html + css og ved å bruke disse instruksjonene, kan du perfekt forbedre ressursen din.

Når du sjekker mobilversjonen av et nettsted i Google, kan du følge lenken med anbefalinger for tilpasning av et WordPress-nettsted for mobile enheter (tredje kolonne til høyre - "Neste"). Det er en annen detaljert instruksjon for WordPress med plugins, lenker til responsive maler, etc. Jeg anbefaler deg også å studere dette dokumentet.

La meg minne deg på at responsive WordPress-maler er temaer som i utgangspunktet er designet for å gjenkjennes av forskjellige typer enheter. I artikkelen undersøkte vi hovedkriteriene som er verdt å ta hensyn til. Blant dem var tilpasningsevne.

Som Googles brukerstøtte forteller oss, finnes vanligvis ordene responsiv (tilpasset) eller mobil (mobil) i beskrivelsene av slike emner. De. Hvis du har valgt et responsivt tema for bloggen din, trenger du ikke bekymre deg for hvordan du lager en mobilvennlig nettsidemal. Hovedmalen din justeres automatisk for å passe til mobilenheten din. Vel, for de som opprettet bloggen sin for lenge siden, da det ikke var slike emner ennå, og ikke ønsker å endre sin etablerte mal, vil vi fortsette denne anmeldelsen. Og vi finner ut hva som må gjøres for å sikre at nettstedet ditt blir godt oppfattet på mobiltelefoner og nettbrett.

Mobilversjon for WordPress-bloggen: funksjoner

Du må forstå at alle andre alternativer, bortsett fra et responsivt tema eller direkte redigering av filer, innebærer å lage en ekstra WordPress-mal for mobilversjonen av nettstedet. Denne malen skal avvike fra den viktigste, med tanke på funksjonene til mobile enheter:

• Liten skjermstørrelse;
• Lavere nedlastingshastighet;
• Mangel på tastatur og mus.

Kort sagt, denne versjonen av nettstedet bør forenkles. Den skal bare vise alt det viktigste, innhold som lastes raskt og effektivt.

Det er flere måter å implementere disse funksjonene på. Den enkleste måten er å bruke plugins (ideelt for nybegynnere).

Plugins for nettstedtilpasning

De vanligste pluginene: WPTouch Mobile Plugin, WP Mobile Detector, MobilePress, WPSmart Mobile.

WpTouch og MobilePress er grunnleggende, gratis versjoner av pluginene som kan oppgraderes til mer avanserte versjoner med flere innstillinger og funksjoner. I følge brukeranmeldelser er WpTouch Pro ganske tung og kan komme i konflikt med caching-plugins (). Det hender at en mobilbruker kan få en skrivebordsside fra hurtigbufferen. Dette kan skje med andre WordPress-plugins for mobilversjoner av nettsteder. Grunnversjoner av både MobilePress og WPTouch kan brukes til blogger med enkel struktur og innhold.

Men jeg likte WPSmart Mobile-pluginen mer. Den kommer med tre mobile WordPress-maler å velge mellom.

Riktignok er alle innstillingene på engelsk, men det er ikke noe komplisert der.

Her kan du angi en logo, muligheten til å kommentere, søke på nettstedet og tilpasse visningen av innlegg. I tillegg kan du installere en kode eller en hvilken som helst annen, og statistikktellere. Også i delen "Utseende" kan du endre skrifttype og farge på oppføringer, bakgrunnsfarge osv. Selvfølgelig vil dette ikke lenger være nettstedet ditt i sin vanlige form, innholdet vil ha en annen form, men det vil bli praktisk for mobilbrukere.

Du kan se hvordan nettstedet vil se ut på en mobilenhet ved å klikke på «Forhåndsvisning»:

Etter å ha installert en hvilken som helst mobil WordPress-plugin du liker, bør den automatisk oppdage hvilken enhet den besøkende bruker og tilby ham den riktige versjonen av nettstedet.

Å se mobilversjonen av nettstedet, eller vise det i hvilken som helst nettleser eller enhet, kan gjøres ved å bruke den spesielle User-Agent Switcher-utvidelsen. Slik ser det ut i Google Chrome-butikken:

Den lar deg bytte sidevisningstype direkte i Chrome:

Følgelig kan du sjekke kompatibiliteten til bloggen din på tvers av nettlesere og dens utseende på forskjellige enheter fra iPhone til Samsung Galaxy.

Andre alternativer for å lage en mobilversjon av et WordPress-nettsted

Alternativer uten å bruke plugins:

• ved hjelp av spesielle tjenester.
• lage en mobilversjon på et underdomene;
• lage en egen CSS-stilfil for mobilversjonen;
• registrere data for alle visningsalternativer i én CSS-fil;

Her er en av tjenestene som ved å analysere nettstedet ditt genererer mobilversjonen - dudamobile.com. Etter dette må du legge inn en kode på bloggen din som vil omdirigere til mobilversjonen av nettstedet. Dette verktøyet har mange innstillinger, men funksjonaliteten er begrenset i fri modus.

Underdomener brukes etter et lignende prinsipp. Det er fornuftig å lage dem for tunge, multifunksjonelle nettsteder. Du kan se hvordan dette fungerer på eksemplet med YouTube, hvor det gjøres en omdirigering til mobilversjonen av nettstedet. Her er hoveddomenet youtube.com, og for mobile enheter - m.youtube.com. VKontakte fungerer på samme måte.

Hvis du bestemmer deg for å lage en ekstra stilfil, lag en kopi av hovedfilen og navngi den, for eksempel style-m.css. Nå må du gjøre endringer i header.php-filen, til linjene der stilene er inkludert.

De kan for eksempel se slik ut:

" /> /style-m.css" />

Og så, hvis du har kunnskap innen CSS, kan du gjøre endringer direkte i style-m.css-filen. Endre for eksempel skriftene til mer kontrasterende, gjør visningen til én kolonne og alt som Google anbefaler.

Jeg valgte denne metoden for meg selv, skisserte raskt noen stiler og Google godtok arbeidet. Han viste seg å ikke være for kresen, det er nok å plassere innholdet i en smal kolonne, og Google-tjenesten rapporterer gladelig: "Flott! Siden er optimalisert for mobile enheter.". Så langt har ikke arbeidet mitt blitt så vakkert, men dette er et midlertidig alternativ, gjort om et par timer. Kanskje en dag vil de komme seg rundt for å gjøre det effektivt og godt.

Lykke til med å mestre mobilversjonen av WordPress-siden, del resultatene dine. Ser deg igjen!

I dag skal jeg snakke om hvordan du gjør det uten plugins og skript lage en mobilversjon av malen for WordPress-bloggen din. Det er ingen hemmelighet at antallet personer som besøker nettsider ved hjelp av smarttelefoner nå øker. For eksempel, på en av bloggene mine er det omtrent 2000 visninger per måned, og dette er 10-12% av totalen, kommer fra mobile enheter. Dette er forresten 3 % mer enn besøkende som bruker nettleseren Internet Explorer. Så hvorfor, hvis nesten alle nettsteder har spesielle tagger for IE, ikke ta vare på mobiltelefonbrukere?

De fleste moderne telefoner som nettsteder vises fra, drives av Android eller iOS på Symbian, i 90 % av tilfellene brukes Opera Mini (Mobil). Dette betyr at telefonnettlesere støtter CSS3, som er det vi skal bruke når vi lager en mobilversjon av temaet.

TIL egenskaper nettlesere for mobilenheter inkluderer:

• mangel på kontroll med musen, og også, ofte, tastaturet,
• kontroll via berøringsskjerm,
• liten arbeidsplass i nettleservinduet på grunn av den lille skjermoppløsningen.

Derfor må bloggmalen rett og slett tilpasses telefonskjermen! Dette vil gi en merkbar forbedring i visningen i en mobilnettleser. Slik ser for eksempel nettstedet mitt ut fra en telefon:

Slik ser mobilversjonen av siden min ut fra telefonen min

La oss nå bestemme hva det skal være nettsteddesign for telefon:

• tilpasset små skjermoppløsninger
• gi kontroll ved å trykke på berøringsskjermen
• høy nok kontrast til å vises godt på en lys telefonskjerm
• enkelt kolonne slik at det ikke er noen horisontal rulling
• "gummi" - siden vi ikke kan sørge for alle skjermoppløsninger

Trinn 1. Vei til mobiltemaet i header.php

Lag først en kopi av stilarket til temaet ditt og navngi det style-mob.css.

Vi bestemmer mobilenheten. Metode 1

La oss nå endre filen hearder.php litt. Finn hvor stilfilen er inkludert (vanligvis de første par kodelinjene):

/style.css" />

og erstatte den med følgende:

"skjerm og (min. bredde: 641px)" href = " " /> "skjerm og (maks. bredde: 641px)" href = " /style-mob.css" />

Vi delte alle brukerskjermer i to grupper: de som er større enn 640 px, og de som er mindre. Hvis skjermen er større enn 640 px, vil den vanlige style.css-filen lastes, og hvis den er mindre, style-mob.css.

Hvis du bestemmer deg for å bruke denne metoden, må du legge til spesielle linjer for IE 6-8 før linjene du nettopp limte inn.

" /> " /> " />

Ja, ja, telefoner støtter media=”skjerm og (maks-bredde: 641px)”, men esel opp til versjon 9 gjør det ikke 😀

Vi bestemmer mobilenheten. Metode 2

Det er en annen måte. Du kan angi verdien media="handheld" for banen til "mobil"-stilen, og der spesifisere banen til stilfilen for telefonen:

("mal_url" ); ?> /style-mob.css" />

I dette tilfellet, hvis visningen er laget fra en datamaskin, lastes den vanlige stilen inn, og hvis fra en telefon, så style-mob.css. Jeg har ikke testet hvordan dette vil fungere.

Trinn 2. Rediger style-mob.css

Hvis du brukte metode 1 for å sette inn et stilark, kan du ganske enkelt minimere nettleservinduet for å se hvordan nettstedet ditt ser ut på telefonen din! Hvis du brukte metode 2, erstatt den midlertidig med metode 1 og gjør det samme :D. Vel, eller se nettstedet direkte fra telefonen. Faktisk er den første metoden god i prosessen mobil temautvikling, og den andre - når den er klar til bruk.

Åpne nå style-mob.css med din favoritt filredigerer.

Jeg gjorde følgende redigeringer:

• sett bredden på siden (body) til 100 % og bredden på innholdsblokken (side) til 95 % for å lage små marger
• aktivert "synlighet" for "søk"-knappen
• økte skriftstørrelsen, konverterte alle skriftverdier til em
• fjernet float:venstre for midtsøylen for å gjøre malen til én kolonne
• og noen mer "kosmetiske" endringer

Faktisk er det umulig å si hva som må endres for å gjøre en mal mobilvennlig, alt avhenger av den spesifikke malen som brukes.

Hvis du har noen spørsmål, skriv, jeg skal definitivt svare. Og abonner på så du ikke går glipp av noe interessant!

Mobile WordPress-temaer har blitt ganske populær i det siste. Og dette er forståelig, siden teknologien ikke står stille. Mange brukere bytter ut skrivebordet med mer kompakte og moderne mobile enheter (IPADS, iPhone, smarttelefoner og andre sofistikerte "nettbrett"). Kravene til moderne nettsider har utvidet seg. En nettside (blogg) skal se perfekt ut uavhengig av om brukeren får tilgang til den ved hjelp av en stasjonær datamaskin eller en mobil enhet.

Det er også viktig at en nettside som vises perfekt på alle enheter og nettlesere, lar deg ikke miste trafikk. Trafikk er først og fremst svært ettertraktede brukere, kunder, kjøpere osv. Ved å ha et mobilnettsted vil bedriften din ikke være mindre mobil og konkurrere skikkelig med startups og konserveringsmidler.

Hvorfor WordPress? WordPress er det mest dominerende CMS og nyopprettede temaer krever mobil respons, med andre ord, ethvert WordPress-tema skal se bra ut på alle enheter inkludert. og mobil.
Dette problemet kan løses takket være det fruktbare arbeidet til mange WordPress-utviklere som har utviklet mobile WordPress-temaer og plugins. Takket være deres innsats kan du enkelt lage ditt eget mobile WordPress-nettsted eller endre ditt eksisterende ved å legge til et nytt design og mange andre moderne bjeller og fløyter.

Du bør seriøst tenke på å mobilisere nettressursen din hvis du vil drive din nettvirksomhet godt. Et utvalg WordPress-temaer for mobile enheter vil hjelpe deg med dette, samt en liste over plugins designet for å forberede nettstedet ditt for fremtiden for mobil.

Denne artikkelen inneholder de beste mobile WordPress-temaene og pluginene som hjelper deg med å tilpasse nettstedet ditt for mobile enheter.

Deler av artikkelen

Liste over mobile WordPress-temaer

TOUCH Light Mobile WP Theme

Dette mobile WordPress-temaet er verdt å vurdere hvis du er ute etter et rent design og en funksjonsrik løsning. Utviklerne gjorde sitt beste. Ved kjøp av dette temaet vil du ha tilgang til støtte og alle påfølgende oppdateringer.

BRAVE – Et mørkt responsivt mobiltema

Etter vurderingene å dømme, liker mange mennesker dette temaet. Den har et rent design. Funksjoner: installasjon av webapp, gallerier, mulighet til å velge flere farger, etc.

Ultimate And Slate Mobile WordPress

Denne pakken består av to populære mobiltemaer, Utimate og Slate. De har mange gallerivisningsalternativer, en rekke sidemaler og tonnevis av andre like nyttige funksjoner.

HERO mobiltema og nettapp

Dette er et kraftig tema, og jeg liker virkelig funksjonen som lar besøkende legge til et nettapp-ikon på sin iPhone. Mobilversjonen vil fungere perfekt med WordPress-temaet ditt. Enkel design og mange nyttige funksjoner.

Resans WP Mobile Portfolio Theme

Dette temaet er fullt av funksjoner som lar deg lage et nettsted for enhver smak. Den har utmerket sidenavigering og sektorlayout.

Spartansk WP-tema for mobil

Et fullt funksjonelt tema som vil gjøre nettstedet ditt mobilvennlig. I innstillingene kan du også alltid forene nettstedet ditt.

Provokatør WordPress-tema for mobile enheter

Provocateur er et WordPress-tema for mobile enheter som bruker JQuery Mobile, HTML5 og CSS3 teknologier. Ser perfekt ut på mobile enheter.

Troller mobil WordPress-tema

Dette temaet har en ren design og er enkel å bruke. Mobile WordPress Theme har et vakkert retro/vintage-utseende.

Mobit Mobile WordPress-mal

Mobit er et godt mobiltema med mange sider og tilpasningsmuligheter.

Metro Mobile WordPress Mobile Theme

Metro er helt gummi med Bootstrap 2.1, laget med HTML5 og CSS3. Den har nyttige funksjoner og har 13 gratis applikasjoner. 24 farger, samt et kontaktskjema, 7 plugins og flere fotogallerier, etc.

Tiger Mobile Mal WordPress-versjon

Tiger er et WordPress-tema for mobile enheter med Retina-skjerm, laget basert på HTML5. Den har forskjellige forhåndslagde sider og mange andre fantastiske funksjoner.

Mobiliser – jQuery Mobile WordPress-tema

Mobilize (fra engelsk Mobilization) er et mobilt WordPress-tema med et bredt spekter av funksjoner. Hjemmesiden har en touch-glidebryter, sosiale ikoner, gallerier, kontaktskjema, blogg med bilder og beste videoer, mange kortkoder (kortkoder) og mange andre bjeller og fløyter.