• Articles
• admin

Hoe maak je een mobiele versie van een WordPress-website

geef toe: een mooie en volledig functionerende mobiele versie van je WordPress-website is een must, gezien het feit dat het grote volume van het surfen op het internet afkomstig is van mobiele apparaten. Het is gemakkelijk om een mobiele website te maken met WordPress op Namecheap, of u zich abonneert op Shared Hosting of Easywp WordPress Hosting.

u hebt misschien al gemerkt dat web-en mobiele versies van dezelfde website soms een beetje verschillende inhoud hebben. Dit wordt gedaan om specifieke functies uit te sluiten van de WordPress mobiele versie als ze kunnen komen of verkeerd werken, of gewoon overweldigend op een kleiner scherm. Plus, de Google zoekmachine algoritme rangschikt mobiel-vriendelijke sites hoger.

in dit artikel zullen we verschillende manieren behandelen om uw WordPress-website mobielvriendelijk te maken:
websites maken met responsief ontwerp: Dezelfde inhoud en URL wordt geladen op elk apparaat, maar CSS wordt gebruikt om de pagina rendering te wijzigen volgens de mobiele display resolutie.
dynamische servicesites: er wordt één URL geladen, maar er worden verschillende content en CSS gebruikt, afhankelijk van het gebruikte apparaat.
afzonderlijke URL ’s maken voor Desktop-en mobiele apparaten: verschillende URL’ s en daarom worden websites geladen, bijv. nctest.info en m.nctest.info

Houd er rekening mee dat elke weg zijn voor-en nadelen heeft, daarom raden we aan om een SEO-onderzoek te doen alvorens verder te gaan.
responsief webdesign
responsief webdesign maakt gebruik van CSS3-mediaquery ‘ s. Media Queries is een CSS3 module waarmee inhoud rendering aan te passen aan omstandigheden zoals schermresolutie, breedte en hoogte, oriëntatie.
meestal is het bestand dat u moet bewerken stijl.css. Het bevindt zich in de map /wp-content/themes/theme_name/.
een CSS3 Media query ziet er meestal uit als:
@media only screen en (max-width: 480px) {
}
het is een voorwaardelijke code die de browser vertelt om alle opmaakparameters aan te passen als de grootte van het scherm kleiner is dan of gelijk is aan 480px.
om meer in detail te gaan, kunt u min-width en max-width intervallen toevoegen om verschillende apparaten te richten:
@media only screen en (min-width: 768px) en (max-width: 959px) {
}
alle verdere styling aanpassingen moeten worden toegevoegd tussen de {…} beugel.
als voorbeeld nemen we het standaard thema twintig tien dat standaard niet reageert.
de eerste code stelt de framegrootte van het thema in op 550px:
# access .menu-header, div.menu, # colophon, #branding, #main, #wrapper, # site-title {
width: 550px;
}
vergelijk hoe de website er in dit geval uit zal zien op een mobiel apparaat:

hoewel, zoals je kunt zien, niet alle elementen zijn aangepast aan het scherm van het apparaat. Je moet afzonderlijk in principe alle elementen die je hebt op uw website aan te passen – header afbeelding, blog beschrijving, navigatiebalk breedte, inhoud Laag positie, enz.
het is mogelijk om een aantal van hen te verbergen, zoals sliders of header images bijvoorbeeld. Op deze manier wordt de mobiele versie van uw website geoptimaliseerd en gebruiksvriendelijk.
de volgende code moet worden gebruikt (bijv. voor headerafbeelding):
# branding img {
display: none;
}
als u de grootte van het element wilt wijzigen (header afbeelding in voorbeeld), gebruik dan
# branding img {
breedte:100%
}
opmerking: het bewerken van de stijl.css-bestand vereist web development kennis en. Vergeet niet om een back-up van uw bestand voordat u het verandert.
zodra alle delen van uw website zijn aangepast, moet het er mooi uitzien op mobiele apparaten:

de meeste van de WordPress thema ‘ s zijn gemaakt om responsief te zijn – bij het installeren van een nieuw thema, kunt u de bijgevoegde look op mobiele apparaten bovendien controleren.
als er geen is en u niet zeker weet of het thema dat u leuk vond een responsieve is of niet, bent u in staat om het te definiëren in de functie filters tijdens het zoeken naar het thema.
1. Log in op uw WordPress admin dashboard (yourdomain.com/wp-admin), navigeer naar het menu uiterlijk, klik op thema ‘ s.
2. Klik Op Nieuwe Toevoegen:

3. Klik op Functiefilter en controleer responsieve lay-out. Controleer andere opties indien nodig om een gewenst thema te vinden.
4. Klik op Filters toepassen:

In een paar momenten ziet u de lijst met thema ‘ s die overeenkomen met de zoekfuncties die u hebt ingesteld.
dynamische Servicewebsites
u kunt ook verschillende CSS-en content configureren die moet worden getrokken, afhankelijk van het type apparaat. Dit kan worden bereikt door middel van de WordPress plugins. De meeste van hen hebben een aantal basisinstellingen gratis beschikbaar.
als voorbeeld zullen we een van de meest populaire plugins gebruiken voor het ontwerpen van mobiele vriendelijke blogs – Wptouch Mobile Plugin.
eerst moet u het installeren en activeren in het Admin dashboard.
als u klaar bent, moet u een thema kiezen voor uw mobiele versie van de website – navigeer naar het wptouch-menu, klik op thema ‘ s & extensies (1). Kies het gewenste thema en klik op Setup (2):

als de setup voorbij is, kunt u de nodige wijzigingen en correcties aanbrengen. De plugin opties kunnen het uitvoeren van heel veel acties, en de meeste van hen zijn vanzelfsprekend.
zo ziet het menu Wptouch Mobile plugin eruit:

zodra alle aanpassingen zijn voltooid, slaat u de wijzigingen op en controleert u hoe de website wordt weergegeven op een desktop-en mobiel apparaat:

het maken van aparte URL ‘ s voor Desktop en mobiele apparaten
de laatste manier is de meest tijdrovende als u nodig hebt:
1. Maak een overeenkomstig subdomein voor uw mobiele versie, zoals m.nctest.info.
2.inhoud van de site ontwikkelen of kopiëren naar het pad van de subdomeinmap.
3. Installeer en configureer een mobile redirect plugin.
noot: Als u gaat met deze optie, in gedachten houden dat de twee versies van uw website niet automatisch worden gesynchroniseerd, als technisch, ze zijn verschillende installaties. Alle bewerkingen die u maakt, moeten worden gerepliceerd voor de andere versie.
zodra het subdomein is aangemaakt en de website is aangepast, ga je gang en installeer de plugin in het hoofdwebsite admin dashboard.
als voorbeeld zullen we de Mobile Site Redirect plugin gebruiken.
1. Navigeer naar het menu Instellingen en klik op mobiele Site Redirect.
2. Voer de mobiele URL in die u wilt hebben. Controleer eventuele extra opties indien nodig.
3. Klik op Instellingen Bijwerken:

opmerking: Wij bieden geen code debugging en website ontwikkeling diensten. Dit artikel wordt verstrekt als een kwestie van hoffelijkheid voor uw gemak alleen.Als u problemen ondervindt met de mobiele versie van uw website, raden wij u aan om te verwijzen naar support forums of contact op te nemen met de ontwikkelaar van de website.
dat is het!