• Articles
• admin

kuinka luoda mobiiliversio WordPress-verkkosivustosta

myönnä se: kaunis ja täysin toimiva mobiiliversio WordPress-verkkosivustostasi on välttämätöntä, kun otetaan huomioon, että Internet-surffauksen merkittävä määrä on peräisin mobiililaitteista. On helppo luoda mobiilisivusto WordPress osoitteessa Namecheap, onko tilaat jaettu Hosting tai Easywp WordPress Hosting.

olet ehkä jo huomannut, että joskus saman verkkosivuston verkko-ja mobiiliversioissa on hieman erilaista sisältöä. Tämä tehdään poistaa tiettyjä ominaisuuksia WordPress mobiiliversio, koska ne voivat keksiä tai toimivat väärin, tai yksinkertaisesti olla ylivoimainen pienemmällä näytöllä. Lisäksi Googlen hakukoneen algoritmi rankkaa mobiiliystävälliset sivustot korkeammalle.

tässä artikkelissa käsitellään useita tapoja tehdä WordPress-sivustostasi mobiiliystävällinen:
luodaan sivustoja, joissa on reagoiva muotoilu: Sama sisältö ja URL Ladataan jokaiselle laitteelle, mutta CSS: ää käytetään muuttamaan sivun renderöintiä mobiilin näytön resoluution mukaan.
dynaamiset Palvelusivustot: yksi URL Ladataan, mutta käytetään erilaista sisältöä ja CSS: ää riippuen käytetystä laitteesta.
erillisten URL-osoitteiden luominen työpöydälle ja mobiililaitteille: eri URL-osoitteita ja siten verkkosivustoja Ladataan, esim. nctest.info ja m.nctest.info

pidä mielessä, että jokaisella tavalla on hyvät ja huonot puolensa, siksi suosittelemme tekemään SEO-tutkimuksen ennen kuin jatkat.
Responsive Web Design
Responsive web design käyttää CSS3-Mediakyselyjä. Mediakyselyt on CSS3-moduuli, jonka avulla sisällön renderöinti voi sopeutua olosuhteisiin, kuten näytön resoluutio, leveys ja korkeus, suunta.
yleensä muokattava tiedosto on style.css. Se sijaitsee hakemistossa /wp-content/themes/ theme_name/.
CSS3-mediakysely näyttää yleensä seuraavanlaiselta:
@media only screen ja (max-width: 480px) {
}
se on ehdollinen koodi, joka kertoo selaimen säätävän kaikkia muotoiluparametreja, jos näytön koko on pienempi tai yhtä suuri kuin 480px.
rakeisemmaksi voi lisätä minileveyden ja maksimileveyden intervalleja eri laitteiden kohdentamiseksi:
@media only screen ja (minileveys: 768px) ja (maksimileveys: 959px) {
}
kaikki muut tyylisäädöt tulee lisätä {väliin…} kiinnike.
esimerkkinä otetaan Twenty Ten-oletusteema, joka ei vastaa oletusarvoisesti.
ensimmäinen koodi asettaa teeman pääkehyskooksi 550px:
#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
width: 550px;
}
vertaa, miltä tässä tapauksessa verkkosivusto näyttää mobiililaitteella:

vaikka kuten näette, ei kaikki elementit säädetään laitteen näytön. Sinun täytyy säätää erikseen periaatteessa kaikki elementit sinulla on sivuston-otsikon kuva, blogin kuvaus, navigointipalkin leveys, sisällön kerroksen sijainti, jne.
niistä on mahdollista piilottaa joitakin, kuten liukusäätimiä tai otsakkeita. Näin sivustosi mobiiliversion ilme on optimoitu ja käyttäjäystävällinen.
seuraavaa koodia tulee käyttää (esim. otsakkeelle):
#branding img {
display: none;
}
jos haluat muuttaa elementin kokoa (otsikkokuva esimerkissä), käytä
#branding img {
width:100%
}
huomautus: muokkaamalla tyyliä.CSS-tiedosto vaatii myös web-kehitystietämystä. Älä unohda varmuuskopioida tiedostosi ennen sen muuttamista.
kun kaikki sivustosi osat on säädetty vastaavasti, sen pitäisi olla mukavan näköinen mobiililaitteissa:

suurin osa WordPress teemoja on luotu reagoiva-kun asennat uuden teeman, voit tarkistaa sen liitteenä ulkoasua mobiililaitteissa lisäksi.
jos sitä ei ole, etkä ole varma, onko haluamasi teema reagoiva vai ei, voit määritellä sen ominaisuussuodattimissa etsiessäsi teemaa.
1. Kirjaudu WordPress admin dashboard (yourdomain.com/wp-admin), siirry ulkonäkö-valikkoon, valitse Teemat.
2. Valitse Lisää Uusi:

3. Valitse ominaisuus suodatin ja tarkista reagoiva asettelu. Tarkista muita vaihtoehtoja tarvittaessa löytää haluamasi teema.
4. Valitse Käytä suodattimia:

hetken kuluttua näet luettelon teemoista, jotka vastaavat asettamiasi hakuominaisuuksia.
dynaamiset Palvelusivustot
Vaihtoehtoisesti voit määrittää vedettävän css: n ja sisällön laitteen tyypistä riippuen. Tämä voidaan saavuttaa avulla WordPress plugins. Useimmat niistä on useita perusasetukset saatavilla ilmaiseksi.
esimerkkinä käytämme yhtä suosituimmista lisäosista mobiiliystävällisten blogien suunnittelussa – WPtouch Mobile Plugin.
ensin sinun täytyy asentaa ja aktivoida se hallintapaneelissa.
kun olet valmis, valitse teema verkkosivustosi mobiiliversiolle-siirry WPtouch-valikkoon, valitse Teemat & laajennukset (1). Valitse tarvittava teema ja napsauta Setup (2):

kun asennus on ohi, voit tehdä tarvittavat muutokset ja korjaukset. Plugin asetukset mahdollistavat suorittaa melko paljon toimia, ja useimmat niistä ovat itsestään selviä.
tältä näyttää Wptouchin Mobiililaajennusvalikko:

kun kaikki säädöt on tehty, Tallenna muutokset ja tarkista, miten verkkosivusto näkyy työpöydällä ja mobiililaitteella:

erillisten URL-osoitteiden luominen työpöydälle ja mobiililaitteille
viimeinen tapa on eniten aikaa vievä, sillä siihen tarvitaan:
1. Luo vastaava aliverkkotunnus mobiiliversiollesi, kuten m.nctest.info.
2. kehitä tai kopioi sivuston sisältö luotuun aliverkkokansion polkuun.
3. Asenna ja määritä mobiili uudelleenohjausliitännäinen.
huomautus: Jos käytät tätä vaihtoehtoa, muista, että sivustosi kaksi versiota ei synkronoidu automaattisesti, koska teknisesti ne ovat erilaisia asennuksia. Kaikki tekemäsi muokkaukset on kopioitava toiseen versioon.
kun aliverkkotunnus on luotu ja verkkosivustoa on säädetty, asenna liitännäinen pääsivuston hallintapaneeliin.
esimerkkinä käytämme Mobile Site Redirect-liitännäistä.
1. Siirry Asetukset-valikkoon ja klikkaa Mobile Site Redirect.
2. Aseta haluamasi mobiiliosoite. Tarkista mahdolliset lisäasetukset tarvittaessa.
3. Napsauta Update Settings:

huomautus: emme tarjoa koodin virheenkorjaus ja sivuston kehittämiseen palveluja. Tämä artikkeli tarjotaan kohteliaisuus vain avuksesi.Jos kohtaat ongelmia sivustosi mobiiliversion kanssa, suosittelemme, että viittaat tukifoorumeihin tai otat yhteyttä verkkosivuston kehittäjään.
That ’ s it!