Sådan opretter du en mobilversion af en hjemmeside – Hosting – Namecheap.com
Sådan opretter du en mobilversion af en hjemmeside
indrøm det: at have en smuk og fuldt fungerende mobilversion af din hjemmeside er et must, i betragtning af at den betydelige mængde internet surfing stammer fra mobile enheder. Det er nemt at oprette en mobil hjemmeside med
du har måske allerede bemærket, at Internet-og mobilversioner af den samme hjemmeside nogle gange har lidt anderledes indhold. Dette gøres for at udelukke specifikke funktioner fra mobilversionen, da de kan komme op eller fungere forkert eller simpelthen være overvældende på en mindre skærm. Plus, Google-søgemaskinealgoritmen rangerer mobilvenlige sider højere.
i denne artikel vil vi dække flere måder at gøre din hjemmeside mobilvenlig:
oprettelse af sider med responsivt Design: Det samme indhold og URL indlæses på hver enhed, men CSS bruges til at ændre sidegengivelsen i henhold til mobildisplayopløsningen.
dynamiske serveringssteder: en URL er indlæst, men forskelligt indhold og CSS bruges afhængigt af den anvendte enhed.
oprettelse af separate URL ‘er til stationære og Mobile enheder: forskellige URL’ er og derfor indlæses hjemmesider, f. eks., nctest.info og m.nctest.info
Husk, at hver vej har sine fordele og ulemper, derfor anbefaler vi at lave en SEO-undersøgelse, inden du fortsætter.
responsivt Internetdesign
responsivt internetdesign bruger CSS3-medieforespørgsler. Medieforespørgsler er et CSS3-modul, der gør det muligt for indholdsgengivelse at tilpasse sig forhold som skærmopløsning, bredde og højde, orientering.
normalt er den fil, du skal redigere, stil.css. Det er placeret i mappen/themes/ theme_name/.
en CSS3-medieforespørgsel ser normalt ud:
@media only screen og (maks.bredde: 480ph) {
}
det er en betinget kode, der fortæller bro. sereren at justere alle stylingsparametre, hvis skærmens størrelse er mindre end eller lig med 480ph.
for at gå mere detaljeret kan du tilføje intervaller på min bredde og maks.bredde for at målrette mod forskellige enheder:
@media only screen og (min bredde: 768ph) og (maks bredde: 959ph) {
}
alle yderligere stylingjusteringer skal tilføjes mellem {…} beslag.
som et eksempel tager vi det tyve ti standardtema, som ikke reagerer som standard.
den første kode sætter temaets hovedrammestørrelse til 550ph:
# access .menu-header, div.menu, # colophon, # branding, # main, # indpakning, # site-Titel {
bredde: 550p;
}
Sammenlign hvordan i dette tilfælde hjemmeside vil se på en mobil enhed:
selvom som du kan se, er ikke alle elementer justeret til enhedens skærm. Du skal justere separat stort set alle de elementer, du har på din hjemmeside – header billede, blog beskrivelse, navigation bar bredde, indhold lag position, etc.
det er muligt at skjule nogle af dem, som f.eks. På denne måde bliver den mobile version af din hjemmeside optimeret og brugervenlig.
følgende kode skal bruges (f. eks. til headerbillede):
#branding img {
skærm: ingen;
}
hvis du ønsker at ændre størrelsen på elementet (headerbillede i eksempel), skal du bruge
#branding img {
Bredde:100%
}
Bemærk: redigering af stilen.css-fil kræver også viden om udvikling af internettet. Glem ikke at sikkerhedskopiere din fil, før du ændrer den.
når alle dele af din hjemmeside er justeret i overensstemmelse hermed, skal den se godt ud på mobile enheder:
når du installerer et nyt tema, kan du kontrollere dets vedhæftede udseende på mobile enheder yderligere.
hvis der ikke er nogen, og du ikke er sikker på, om det tema, du kunne lide, er en lydhør eller ej, kan du definere det i funktionsfiltrene, mens du søger efter temaet.
1. Log ind på dit admin dashboard (yourdomain.com/wp-admin), Naviger til menuen Udseende, klik på Temaer.
2. Klik På Tilføj Ny:
3. Klik på Funktionsfilter og kontroller responsivt Layout. Kontroller om nødvendigt andre muligheder for at finde et ønsket tema.
4. Klik på Anvend filtre:
om et øjeblik vil du se listen over temaer, der svarer til de søgefunktioner, du har angivet.
dynamiske Serveringshjemmesider
Alternativt kan du konfigurere forskellige CSS og indhold, der skal trækkes, afhængigt af enhedens type. Dette kan opnås ved hjælp af plugins. De fleste af dem har en række grundlæggende indstillinger tilgængelige gratis.
som et eksempel vil vi bruge et af de mest populære plugins til at designe mobilvenlige blogs.
først skal du installere og aktivere det i Admin dashboard.
når du er færdig, skal du vælge et tema til din mobilversion af hjemmesiden – klik på Temaer & udvidelser (1). Vælg det ønskede tema, og klik på Opsætning (2):
når opsætningen er overstået, vil du kunne foretage de nødvendige ændringer og rettelser. Plugin-indstillingerne gør det muligt at udføre en hel del handlinger, og de fleste af dem er selvforklarende.
her er hvordan den Mobile plugin menu ser ud:
når alle justeringer er færdige, skal du gemme ændringerne og kontrollere, hvordan hjemmesiden vises på en stationær og mobil enhed:
oprettelse af Separate URL ‘ er til stationære og Mobile enheder
den sidste måde er den mest tidskrævende, som du skal:
1. Opret et tilsvarende underdomæne til din mobilversion, som m.nctest.info.
2.udvikle eller kopiere site indhold til den oprettede underdomæne mappe sti.
3. Installere og konfigurere en mobil omdirigere plugin.
Bemærk: Hvis du går med denne mulighed, skal du huske på, at de to versioner af din hjemmeside ikke automatisk synkroniseres, da de teknisk set er forskellige installationer. Eventuelle redigeringer, du foretager, skal replikeres til den anden version.
når underdomænet er oprettet og hjemmesiden er justeret, gå videre og installere plugin i de vigtigste hjemmeside admin dashboard.
som et eksempel vil vi bruge mobile site Redirect plugin.
1. Naviger til menuen Indstillinger, og klik på omdirigering af mobilsite.
2. Indsæt den mobile URL, du gerne vil have. Kontroller eventuelle yderligere muligheder, hvis det er nødvendigt.
3. Klik på Opdater indstillinger: 
Bemærk: Vi leverer ikke kode debugging og hjemmeside udvikle tjenester. Denne artikel leveres som et spørgsmål om høflighed kun for din bekvemmelighed.Hvis du står over for problemer med den mobile version af din hjemmeside, foreslår vi, at du henviser til supportfora eller kontakter hjemmesideudvikleren.
det er det!