• Articles
• admin

Hogyan hozzunk létre egy mobil változata a WordPress honlapján

valld be: miután egy szép és teljesen működőképes mobil változata a WordPress honlapján elengedhetetlen, figyelembe véve, hogy a jelentős mennyiségű internetes szörfözés származik a mobil eszközök. Könnyű létrehozni egy mobil weboldalt a WordPress segítségével a Namecheap oldalon, függetlenül attól, hogy feliratkozik-e a megosztott tárhelyre vagy az EasyWP WordPress tárhelyre.

lehet, hogy már észrevette, hogy néha ugyanazon weboldal webes és mobil verziói kissé eltérő tartalommal rendelkeznek. Ez azért van így, hogy kizárja a WordPress mobil verziójának bizonyos funkcióit, mivel azok hibásan működhetnek vagy működhetnek, vagy egyszerűen elsöprőek lehetnek egy kisebb kijelzőn. Ráadásul a Google keresőmotor algoritmusa magasabbra sorolja a mobilbarát webhelyeket.

ebben a cikkben fogjuk fedezni több módon, hogy a WordPress honlapján mobil-barát:
webhelyek létrehozása reszponzív Design: Minden eszközre ugyanaz a tartalom és URL kerül betöltésre, de a CSS-t arra használják, hogy megváltoztassák az oldal megjelenítését a mobil kijelző felbontásának megfelelően.
dinamikus kiszolgáló oldalak: egy URL betöltődik, de a használt eszköztől függően különböző tartalom és CSS kerül felhasználásra.
különálló URL-ek létrehozása asztali és mobil eszközökhöz: különböző URL-ek és ezért a weboldalak betöltődnek, pl., nctest.info és m.nctest.info

ne feledje, hogy mindegyik útnak megvannak az előnyei és hátrányai, ezért javasoljuk, hogy végezzen SEO kutatást a folytatás előtt.
reszponzív webdesign
a reszponzív webdesign CSS3 Média lekérdezéseket használ. A Media Queries egy CSS3 modul, amely lehetővé teszi a tartalom megjelenítését, hogy alkalmazkodjon olyan körülményekhez, mint a képernyő felbontása, szélessége és magassága, tájolása.
általában a szerkeszteni kívánt fájl a stílus.css. A /wp-content/themes/theme_name/ könyvtárban található.
a CSS3 média lekérdezés általában így néz ki:
@media only screen and (max-width: 480px) {
}
ez egy feltételes kód, amely azt mondja a böngészőnek, hogy állítsa be az összes stílusparamétert, ha a képernyő mérete kisebb vagy egyenlő 480px.
ahhoz, hogy részletesebb legyen, hozzáadhat min-szélességű és max-szélességű intervallumokat a különböző eszközök célzásához:
@media only képernyő és (min-szélesség: 768px) és (max-szélesség: 959px) {
}
az összes további stílusbeállítást hozzá kell adni a {között…} zárójelek.
példaként vegyük a Twenty Ten default témát, amely alapértelmezés szerint nem reagál.
az első kód a téma fő keretméretét 550 képpontra állítja:
#hozzáférés .menü-fejléc, div.menu, # colophon, # branding, # main, # wrapper, # site-title {
szélesség: 550px;
}
hasonlítsa össze, hogy ebben az esetben a weboldal Hogyan fog kinézni egy mobil eszközön:

bár, mint látható, nem minden elem van beállítva, hogy a készülék képernyőjén. Alapvetően külön kell beállítania a webhelyén található összes elemet-fejléckép, blogleírás, navigációs sáv szélessége, tartalmi réteg pozíciója stb.
el lehet rejteni néhányat, például csúszkákat vagy fejlécképeket. Ily módon a webhely mobil verziója optimalizált és felhasználóbarát lesz.
a következő kódot kell használni (pl. fejléc kép):
# branding img {
kijelző: nincs;
}
ha át szeretné méretezni az elemet (például a fejléc képét), használja a
#branding img {
width elemet:100%
}
megjegyzés: a stílus szerkesztése.a css fájl webfejlesztési ismereteket is igényel. Ne felejtse el biztonsági másolatot készíteni a fájlról, mielőtt megváltoztatná.
miután a webhely minden részét ennek megfelelően módosították, a mobileszközökön szép megjelenésűnek kell lennie:

a WordPress témák többsége úgy van kialakítva, hogy reagáljon – új téma telepítésekor ellenőrizheti annak csatolt megjelenését a mobil eszközökön is.
ha nincs, és nem biztos benne, hogy a kedvelt téma érzékeny-e vagy sem, akkor a téma keresése közben meghatározhatja azt a funkciószűrőkben.
1. Jelentkezzen be a WordPress admin irányítópultjába (yourdomain.com/wp-admin), keresse meg a megjelenés menüt, kattintson a témák elemre.
2. Kattintson Az Új Hozzáadása Gombra:

3. Kattintson a Funkciószűrő elemre, és ellenőrizze az adaptív elrendezést. Ha szükséges, ellenőrizze a többi lehetőséget a kívánt téma megtalálásához.
4. Kattintson a szűrők alkalmazása elemre:

néhány pillanat alatt látni fogja a témák listáját, amelyek megfelelnek a beállított keresési funkcióknak.
dinamikus kiszolgáló webhelyek
Alternatív megoldásként konfigurálhat különböző CSS-t és tartalmat az eszköz típusától függően. Ezt a WordPress bővítmények segítségével lehet elérni. A legtöbbjüknek számos alapbeállítása ingyenesen elérhető.
példaként az egyik legnépszerűbb plugint fogjuk használni a mobilbarát blogok tervezéséhez-a WPtouch Mobile plugint.
először telepítenie kell és aktiválnia kell az Admin irányítópulton.
miután elkészült, válasszon egy témát a webhely mobil verziójához – keresse meg a WPtouch menüt, kattintson a témák & Bővítmények (1) elemre. Válassza ki a kívánt témát, majd kattintson a Beállítás gombra(2):

a telepítés befejezése után elvégezheti a szükséges változtatásokat és javításokat. A plugin opciók elég sok műveletet tesznek lehetővé, amelyek többsége magától értetődő.
így néz ki a WPtouch Mobile plugin menü:

Miután az összes módosítás befejeződött, mentse el a módosításokat, és ellenőrizze, hogy a webhely hogyan jelenik meg asztali vagy mobil eszközön:

külön URL-ek létrehozása asztali és mobileszközökhöz
az utolsó út a leginkább időigényes, mivel szüksége lesz:
1. Hozzon létre egy megfelelő aldomaint a mobil verziójához, például m.nctest.info.
2.A webhely tartalmának fejlesztése vagy másolása a létrehozott aldomain könyvtár elérési útjába.
3. Telepítsen és konfiguráljon egy mobil átirányítási bővítményt.
megjegyzés: Ha ezt a lehetőséget választja, ne feledje, hogy webhelyének két verziója nem lesz automatikusan szinkronizálva, mivel technikailag ezek különböző telepítések. Minden szerkesztést meg kell ismételni a másik verzióhoz.
Miután létrehozta az aldomaint és beállította a weboldalt, folytassa és telepítse a plugint a fő webhely adminisztrációs irányítópultjára.
példaként a Mobile Site Redirect plugint fogjuk használni.
1. Keresse meg a Beállítások menüt, majd kattintson a mobil webhely átirányítása elemre.
2. Helyezze be a kívánt mobil URL-t. Szükség esetén ellenőrizze a további lehetőségeket.
3. Kattintson a Beállítások frissítése elemre:

megjegyzés: nem nyújtunk kód hibakeresést és webhelyfejlesztő szolgáltatásokat. Ez a cikk csak az Ön kényelmét szolgálja.Ha bármilyen probléma merülne fel webhelye mobil verziójával kapcsolatban, javasoljuk, hogy forduljon a támogatási fórumokhoz, vagy vegye fel a kapcsolatot a webhely fejlesztőjével.
ez az!