• Articles
• admin

hur man skapar en mobilversion av en WordPress-webbplats

erkänn det: att ha en vacker och fullt fungerande mobilversion av din WordPress-webbplats är ett måste, med tanke på att den betydande volymen av Internet-surfning härstammar från mobila enheter. Det är enkelt att skapa en mobilwebbplats med WordPress på Namecheap, oavsett om du prenumererar på delad Hosting eller EasyWP WordPress Hosting.

du kanske redan har märkt att ibland har webb-och mobilversioner av samma webbplats lite annorlunda innehåll. Detta görs för att utesluta specifika funktioner från WordPress-mobilversionen eftersom de kan komma upp eller fungera felaktigt, eller helt enkelt vara överväldigande på en mindre skärm. Dessutom rankar Googles sökmotoralgoritm mobilvänliga webbplatser högre.

i den här artikeln kommer vi att täcka flera sätt att göra din WordPress-webbplats mobilvänlig:
skapa webbplatser med responsiv Design: Samma innehåll och URL laddas på varje enhet, men CSS används för att ändra sidåtergivningen enligt den mobila skärmupplösningen.
dynamiska Serveringsplatser: en URL laddas, men olika innehåll och CSS används, beroende på vilken enhet som används.
skapa separata webbadresser för stationära och mobila enheter: olika webbadresser och därför laddas webbplatser, t. ex., nctest.info och m.nctest.info

Tänk på att varje sätt har sina fördelar och nackdelar, det är därför vi rekommenderar att göra en SEO-forskning innan du fortsätter.
responsiv webbdesign
responsiv webbdesign använder CSS3 Media frågor. Media Queries är en CSS3-modul som gör att innehållsåtergivning kan anpassas till förhållanden som skärmupplösning, bredd och höjd, orientering.
vanligtvis är filen som du behöver redigera stil.css. Den finns i katalogen /wp-content/themes/theme_name/.
en CSS3-mediefråga ser vanligtvis ut som:
@media Only screen och (maxbredd: 480px) {
}
det är en villkorlig kod som berättar för webbläsaren att justera alla stylingparametrar om skärmens storlek är mindre än eller lika med 480px.
för att gå mer granulär kan du lägga till min-bredd och max-bredd intervaller för att rikta in olika enheter:
@media Only screen och (min-bredd: 768px) och (max-bredd: 959px) {
}
alla ytterligare stylingjusteringar bör läggas till mellan {…} fäste.
som ett exempel tar vi det tjugo tio standardtemat som inte svarar som standard.
den första koden anger huvudramstorleken för temat till 550px:
#access .meny-header, div.meny, #colophon, #branding, #main, #wrapper, # site-Titel {
bredd: 550px;
}
jämför hur webbplatsen i detta fall kommer att se ut på en mobil enhet:

men som du kan se är inte alla element anpassade till enhetens skärm. Du måste justera separat i princip alla element du har på din webbplats – rubrikbild, bloggbeskrivning, navigeringsfältets bredd, innehållslager, etc.
det är möjligt att dölja några av dem, till exempel skjutreglage eller rubrikbilder. På detta sätt kommer mobilversionen av din webbplats att optimeras och användarvänligt.
följande kod ska användas (t. ex. för rubrikbild):
#branding img {
display: none;
}
om du vill ändra storlek på elementet (rubrikbild i exempel), använd
#branding img {
width:100%
}
OBS: redigera stilen.css-fil kräver webbutveckling kunskap samt. Glöm inte att säkerhetskopiera din fil innan du ändrar den.
när alla delar av din webbplats har justerats i enlighet med detta bör den ha en fin titt på mobila enheter:

de flesta WordPress-Teman är skapade för att vara lyhörda – när du installerar ett nytt tema kan du dessutom kontrollera dess bifogade utseende på mobila enheter.
om det inte finns något och du inte är säker på om temat du gillade är responsivt eller inte, kan du definiera det i funktionsfiltret medan du söker efter temat.
1. Logga in på din WordPress admin dashboard (yourdomain.com/wp-admin), navigera till menyn Utseende, klicka på Teman.
2. Klicka På Lägg Till Ny:

3. Klicka på Funktionsfilter och kontrollera responsiv Layout. Kontrollera andra alternativ om det behövs för att hitta ett önskat tema.
4. Klicka på Använd filter:

om några ögonblick ser du listan över teman som motsvarar de sökfunktioner du ställer in.
dynamiska Serveringswebbplatser
Alternativt kan du konfigurera olika CSS och innehåll som ska dras beroende på enhetens typ. Detta kan uppnås med hjälp av WordPress-plugins. De flesta av dem har ett antal grundläggande inställningar tillgängliga gratis.
som ett exempel kommer vi att använda en av de mest populära plugins för att utforma mobila vänliga bloggar – WPtouch Mobile Plugin.
först måste du installera och aktivera det i Admin dashboard.
när du är klar bör du välja ett tema för din mobilversion av webbplatsen – navigera till WPtouch-menyn, Klicka på Teman & Extensions (1). Välj önskat tema och klicka på Setup (2):

när installationen är över kommer du att kunna göra nödvändiga ändringar och korrigeringar. Plugin-alternativen gör det möjligt att utföra en hel del åtgärder, och de flesta är självförklarande.
så här ser WPtouch Mobile plugin-menyn ut:

när alla justeringar är klara, spara ändringarna och kontrollera hur webbplatsen visas på en stationär och mobil enhet:

skapa separata webbadresser för stationära och mobila enheter
det sista sättet är det mest tidskrävande som du behöver:
1. Skapa en motsvarande underdomän för din mobilversion, som m.nctest.info.
2.utveckla eller kopiera webbplatsinnehåll till den skapade sökvägen för underdomänkatalogen.
3. Installera och konfigurera en mobil omdirigering plugin.
notera: Om du går med det här alternativet, Kom ihåg att de två versionerna av din webbplats inte synkroniseras automatiskt, eftersom de tekniskt sett är olika installationer. Alla ändringar du gör måste replikeras för den andra versionen.
när underdomänen har skapats och webbplatsen har justerats, fortsätt och installera plugin i huvudwebbplatsens administratörspanel.
som ett exempel kommer vi att använda Mobile Site Redirect plugin.
1. Navigera till inställningsmenyn och klicka på Mobile Site Redirect.
2. Sätt in den mobila URL du vill ha. Kontrollera eventuella ytterligare alternativ om det behövs.
3. Klicka på Uppdatera inställningar:

notera: Vi tillhandahåller inte kodfelsökning och webbplatsutvecklingstjänster. Denna artikel tillhandahålls som en fråga om artighet endast för din bekvämlighet.Om du stöter på problem med mobilversionen av din webbplats föreslår vi att du hänvisar till supportforum eller kontaktar webbplatsutvecklaren.
det är det!