• Articles
• admin

hvordan lage en mobil versjon Av Et WordPress-nettsted

Innrøm det: Å Ha en vakker og fullt fungerende mobilversjon Av WordPress-nettstedet ditt er et must, med tanke på at det betydelige volumet av internett-surfing stammer fra mobile enheter. Det er enkelt å lage en mobil nettside Med WordPress På Namecheap, enten du abonnerer På Delt Hosting eller EasyWP WordPress Hosting.

du har kanskje allerede lagt merke til at noen ganger har web-og mobilversjoner av samme nettsted litt forskjellig innhold. Dette gjøres for å utelukke spesifikke funksjoner fra WordPress mobilversjonen, da De kan komme opp eller fungere feil, eller bare være overveldende på en mindre skjerm. I Tillegg rangerer googles søkemotoralgoritme mobilvennlige nettsteder høyere.

I denne artikkelen vil vi dekke flere måter Å gjøre WordPress-nettstedet ditt mobilvennlig:
Opprette Nettsteder Med Responsiv Design: Det samme innholdet og NETTADRESSEN lastes på hver enhet, MEN CSS brukes til å endre sidegjengivelsen i henhold til mobilskjermoppløsningen.
Dynamiske Serveringssteder: En URL er lastet, men forskjellig innhold og CSS brukes, avhengig av hvilken enhet som brukes.
Opprette Separate Nettadresser For Stasjonære Og Mobile Enheter: Ulike Nettadresser og derfor nettsteder er lastet, f. eks, nctest.info og m.nctest.info

Husk at hver vei har sine fordeler og ulemper, det er derfor vi anbefaler Å GJØRE EN SEO forskning før du fortsetter.
Responsivt Webdesign
Responsivt webdesign bruker Css3 Medieforespørsler. Media Queries er EN css3-modul som tillater innholdsrengivelse å tilpasse seg forhold som skjermoppløsning, bredde og høyde, orientering.
vanligvis er filen du må redigere stil.css. Den ligger i katalogen/wp-content/themes/ theme_name/.
en css3-mediespørring ser vanligvis ut som:
@ media only screen og (maks bredde: 480px) {
}
det er en betinget kode som forteller nettleseren å justere alle stylingsparametrene hvis størrelsen på skjermen er mindre enn eller lik 480px.
For å gå mer detaljert, kan du legge til min-bredde og maks bredde intervaller for å målrette ulike enheter:
@media bare skjerm og (min-bredde: 768px) og (max-bredde: 959px) {
}
Alle ytterligere styling justeringer bør legges i mellom {…} brakett.
som et eksempel, vil vi ta Tjue Ti standardtema som ikke svarer som standard.
den første koden setter hovedrammestørrelsen til temaet til 550px:
#access .meny-topptekst, div.meny, #colophon, #branding, #main, #wrapper, # site-title {
bredde:550px;
}
Sammenlign hvordan i dette tilfellet nettstedet vil se ut på en mobil enhet:

Selv om du kan se, er ikke alle elementene justert til enhetens skjerm. Du må justere separat i utgangspunktet alle elementene du har på nettstedet ditt-header image, blogg beskrivelse, navigasjonsfelt bredde, innhold lag posisjon, etc.
det er mulig å skjule noen av dem, som glidere eller header bilder for eksempel. På denne måten vil mobilversjonen av nettstedet ditt bli optimalisert og brukervennlig.
følgende kode skal brukes (f. eks. for header image):
#branding img {
display: none;
}
hvis du ønsker å endre størrelsen på elementet (header image i eksempel), bruk
#branding img {
bredde:100%
}
MERK: Redigere stilen.css-fil krever webutvikling kunnskap også. Ikke glem å sikkerhetskopiere filen før du endrer den.
når alle delene av nettstedet ditt er justert tilsvarende, bør det ha en fin titt på mobile enheter:

De Fleste WordPress-temaene er opprettet for å være responsive – når du installerer et nytt tema, kan du sjekke det vedlagte utseendet på mobile enheter i tillegg.
hvis det ikke er noen og du ikke er sikker på om temaet du likte er en responsiv eller ikke, kan du definere det i funksjonsfiltre mens du søker etter temaet.
1. Logg Inn På WordPress admin dashboard (yourdomain.com/wp-admin), naviger til Utseende-menyen, klikk Temaer.
2. Klikk På Legg Til Ny:

3. Klikk På Funksjonsfilter og sjekk Responsiv Layout. Sjekk andre alternativer hvis nødvendig for å finne et ønsket tema.
4. Klikk På Bruk Filtre:

I noen få øyeblikk vil du se listen over temaer som tilsvarer søkefunksjonene du angir.
Dynamiske Serveringsnettsteder
Alternativt kan du konfigurere FORSKJELLIGE CSS og innhold som skal trekkes, avhengig av typen enhet. Dette kan oppnås ved Hjelp Av WordPress plugins. De fleste av dem har en rekke grunnleggende innstillinger tilgjengelig gratis.
Som et eksempel vil vi bruke En av de mest populære plugins for å designe mobile vennlig blogger – WPtouch Mobile Plugin.
først må du installere og aktivere Det i Admin dashboard.
når du Er ferdig, bør du velge et tema for mobilversjonen av nettstedet-naviger Til wptouch-menyen, klikk Temaer & Utvidelser (1). Velg ønsket tema og klikk På Oppsett (2):

når oppsettet er over, vil du kunne gjøre de nødvendige endringene og rettelsene. Plugin-alternativene tillater å utføre ganske mange handlinger, og de fleste er selvforklarende.
Her er Hvordan wptouch Mobile plugin-menyen ser ut:

når alle justeringene er ferdige, lagrer du endringene og kontrollerer hvordan nettstedet vises på en stasjonær og mobil enhet:

Opprette Separate Nettadresser For Stasjonære Og Mobile Enheter
den siste måten er den mest tidkrevende som du må:
1. Opprett et tilsvarende underdomene for mobilversjonen din, som m.nctest.info.
2. Utvikle eller kopier områdeinnhold til den opprettede katalogbanen for underdomene.
3. Installer og konfigurer en mobil omdirigere plugin.
NOTAT: Hvis du går med dette alternativet, husk at de to versjonene av nettstedet ditt ikke automatisk synkroniseres, som teknisk sett, de er forskjellige installasjoner. Eventuelle endringer du gjør må replikeres for den andre versjonen.
når underdomenet er opprettet og nettstedet er justert, fortsett og installer pluginet i hovednettstedet admin dashboard.
Som et eksempel vil vi bruke Mobile Site Redirect plugin.
1. Naviger til Innstillinger-menyen og klikk På Mobile Site Redirect.
2. Sett inn mobiladressen du vil ha. Sjekk eventuelle tilleggsalternativer hvis nødvendig.
3. Klikk På Oppdater Innstillinger:

MERK: Vi gir ikke kode debugging og nettside utvikle tjenester. Denne artikkelen er gitt som et spørsmål om høflighet for enkelhets skyld.Skulle du møte problemer med mobilversjonen av nettstedet ditt, foreslår vi at du henviser til støttefora eller kontakter nettstedutvikleren.
Det er det!