Ha egy WordPress webhelyet mobilbaráttá szeretne tenni, ez a részletes útmutató kizárólag az Ön számára készült.

Tudta, hogy 9 mobilos keresésből 10 cselekvéshez, több mint fele pedig értékesítéshez vezet?

A mobilinternet-használat minden eddiginél jobban növekszik. Meghaladja az asztali internethasználatot, egyre többen használnak okostelefont és táblagépet az online információk böngészésére.

Ez a fő oka annak, hogy a legtöbb e-kereskedelmi webhely most mobilalkalmazásokat hoz létre az eladások és a felhasználói interakció növelése érdekében. Ha webhelye vagy blogja még nem mobilbarát, azonnal fontolja meg a design reszponzívvá tételét, különben sok leadet, forgalmat és eladásokat veszíthet.

Miért adjon előnyt a versenytársának azzal, hogy nem rendelkezik mobilbarát kialakítással? Tedd mobilbaráttá webhelyedet, és hamarosan észreveszed a kifizetődő eredményeket.

Miért tegyen mobilbaráttá egy WordPress webhelyet? ?

Ha webhelye mobilbarát, akkor ez történik:

  • forgalomnövekedést fog látni
  • reszponzív e-mail feliratkozási űrlapokkal és céloldalakkal növelheti feliratkozóinak számát
  • több eladást érhet el (a mobilinternet-felhasználók többnyire a keresőmotorokra hagyatkoznak az információk böngészéséhez, így ők kiváló minőségű ügyfelek, akik készen állnak a vásárlásra)

Mire vársz még? Tedd felhasználóbaráttá blogodat, és vonzzon több embert. Merüljünk el a részletekben, hogy többet megtudjunk.

Tartalomjegyzék:

A végső útmutató a WordPress webhely mobilbaráttá tételéhez

Hogyan tedd mobilbaráttá WordPress-webhelyedet

Mi az a mobilbarát weboldal?

Világszerte több milliárd ember használ mobilt az információk böngészésére, ezért a mobilwebhelyek használata egyre nagyobb tendenciát mutat.

Még a Google is jutalmazza a mobilfelhasználókra optimalizált webhelyeket, mert gyorsabb és jobb felhasználói élményt nyújtanak.

A mobilbarát webhely automatikusan észleli azt a környezetet, amelyet minden látogató a webhely eléréséhez használ, majd az adott eszköznek (például okostelefonok, táblagépek stb.) legmegfelelőbb formátumban jeleníti meg.

Így néz ki egy reszponzív és nem reszponzív mobilwebhely:

Hogyan tegyünk egy WordPress webhelyet mobilbaráttá

Amint fentebb látható, a mobilra reagáló webhelyek minden elemét, például logót, szöveget, gombokat, navigációt, menüt stb. megfelelően betöltenek a mobilon, míg a nem reszponzív kialakítás zavarosnak tűnik mobilon.

A Statista szerint a mobilról érkező internetes forgalom százalékos aránya tovább növekszik. A globális mobilinternet-felhasználók száma több mint 10%-kal nőtt az elmúlt 4 évben.

Ráadásul a mobilinternet-felhasználók penetrációs indexe jelenleg 61,2%, ami valamivel több mint 2 milliárd embert jelent, akik mobileszközökön csatlakoznak az internethez. Ez egy érdekes statisztika, nem?

Ezért érdemes arra összpontosítania, hogy használhatóvá tegye a webhelyét, ha még nem reagál.

Ennek ellenére van különbség a reszponzív webhely és a mobilbarát webhely között. Mi ez?

A reszponzív webhely minden asztali számítógépen, táblagépen és okostelefonon ugyanazzal a tartalommal működik, mivel automatikusan beállítja az elrendezést, míg a mobilbarát webhely valójában az asztali webhely különálló verziója, amelyet kifejezetten okostelefonokhoz terveztek.

Röviden: a mobilra érzékeny kialakítás javíthatja a helyezéseket, a felhasználói élményt, az értékesítéseket és az általános online konverziókat.

Honnan tudhatod, hogy weboldalad mobilbarát?

Szeretné tudni, hogy webhelye mobilbarát-e vagy sem?

Webhelye mobilreszponzivitásának ellenőrzéséhez használhatja a Google ingyenes eszközét, amely az úgynevezett Mobilbarát tesztelőeszköz amely megmutatja, hogy egy látogató milyen könnyen használhatja oldalát mobileszközön.

Remekül működik, és teljesen ingyenes a használata, és csak meg kell adnia egy oldal URL-jét vagy webhelye kezdőlapjának URL-jét, hogy megtudja, hogyan teljesít az eszközön.

Így néz ki:

Hogyan tegyünk egy WordPress webhelyet mobilbaráttá

Ahogy fentebb is látható, megadtunk egy URL-t, amely azt mutatja, hogy az oldal mobilbarát (vagyis az oldal könnyen használható mobileszközön).

Ezenkívül további forrásokat is megjelenít, ahol a webhely egészére kiterjedő mobilhasználati jelentéseket kaphat, amelyek segítségével teljes mértékben elemezheti webhelye reakcióképességét.

Általában a mobilreszponzív tesztelés célja annak biztosítása, hogy a webhely összes felhasználója a legjobb megtekintési élményt kapja eszközén, legyen az laptop, asztali számítógép, táblagép stb.

A Google-barát tesztelőeszközön kívül a következő online eszközöket is használhatja, amelyek teljesen ingyenesek webhelye reakciókészségének tesztelésére.

A fenti eszközök mindegyike hasznos annak megállapításához, hogy webhelye mobilbarát-e vagy sem, és bármelyik webhely reszponzivitását egyetlen kattintással ellenőrizheti saját böngészőjében, ha megadja bármelyik oldal URL-jét.

Most pedig beszéljünk néhány BIZONYÍTOTT módszerről a WordPress-webhelyek mobilra reagáló verziójának elkészítésére.

Használjon mobilra érzékeny WordPress-témát: a 3 fő téma

A mobilbarát webhely létrehozásának egyik legegyszerűbb módja, ha mobilbarát témát használ a WordPress-webhelyekhez. Noha rengeteg lehetőség áll rendelkezésre, itt található a 3 legnépszerűbb téma listája, amellyel reszponzív dizájnt kaphat nagyszerű funkciókkal megfizethető áron.

1. Divi

Divi az egyik WordPress témák legnépszerűbb prémium, amelyet több mint 800 000 ember használ világszerte. Rengeteg mobilbarát témát kínál a Divi segítségével, amely egy prémium téma- és vizuális oldalkészítő.

A Divi-t kizárólag arra tervezték, hogy jobb asztali élményt biztosítson, beleértve a mobil válaszadási élményt is a felhasználók számára.

Lehetővé teszi, hogy a kívánt módon testreszabhassa webhelyét, mivel a betűméretet külön-külön a különböző mobilok számára állíthatja be. Egyedi szövegméreteket és térközértékeket is hozzárendelhet mobilokhoz és táblagépekhez anélkül, hogy ez rontja az asztali élményt.

Így néz ki:

Hogyan tegyünk egy WordPress webhelyet mobilbaráttá

Amint fentebb látható, lehetővé teszi, hogy a Mobilstílusok panel 3 részében testreszabja a designt, ezek a táblagép, a telefon és a mobil menü. Mindegyikhez hozzáférhet, és mindent testre szabhat, beleértve a szöveg színét, a logókat és egyebeket. könnyen.

Mennyi a Divi ára?

Az Elegant Themes használatában az a nagyszerű, hogy megfizethető áron vásárolhatja meg az összes prémium témát mindössze 80 USD fizetéssel, ami azt jelenti, hogy témánként mindössze 0,79 USD-t kell fizetnie.

Az elegáns témák az alábbiakban említett 2 árazási tervben találhatók.

1. Éves hozzáférés: Ez a legolcsóbb lehetőség, amely 80 évre 1 dollárba kerül (exkluzív kedvezményünkkel), és több mint 80 témához férhet hozzá 5 bővítménnyel és Divi témakészítővel.

2. Élettartamra szóló hozzáférés: Ha élethosszig tartó hozzáférést szeretne stílusos témákhoz, akkor ez a csomag az Ön számára készült, amely 224 dollárba kerül egy életen át, ahol élethosszig tartó frissítéseket, témákat és bővítményeket tölthet le életre szóló támogatással.

Jó hír neked. Ha szeretné megragadni a Divi buildert stílusos témákkal, használja exkluzív linkünket, hogy azonnali 10% kedvezményt kapjon áraikból.

Kattintson ide a Divi letöltéséhez

Ha nem elégedett a témával vagy a funkciókkal, a vásárlástól számított 30 napon belül kérheti a pénz teljes visszatérítését. Szóval nem veszítesz semmit.

2. Genesis keretrendszer

Olyan prémium témájú keretrendszert keresel, amely nem csak mobilra érzékeny, hanem gyorsabb és SEO-barát is? Ezután érdemes kipróbálnia a Genesis keretrendszert, amely egész életen át tartó hozzáférést és korlátlan használatot biztosít a webhelyhez.

Mennyibe kerül a Genesis Framework? ?

A Genesis az alábbiakban felsorolt ​​két árazási tervet kínál.

1. Genesis Framework: Ez csak a csupasz keret, amelyre csak szüksége van, és 59,95 dollárba kerül, ami egyszeri díj, és korlátlanul használhatja a webhelyet, valamint élethosszig tartó hozzáférést kap, beleértve az élettartamra szóló frissítéseket.

2. Pro Plus tagság: Ez a csomag lehetővé teszi a teljes témagyűjtemény letöltését, amely 499,95 dollárba kerül, és ez egy egyszeri díj, korlátlan webhelyhasználattal és élettartamra szóló hozzáféréssel, valamint nagyszerű csomag webtervezők és fejlesztők számára.

Kattintson ide a Genesis for WordPress letöltéséhez

3.GenerateNyomja meg

Ha keres WordPress témák prémium megfizethető és gyorsabb, Létrehoz Press csak neked szól.

Mennyibe kerül?

A GeneratePress mindössze 49,95 dollárba kerül 1 évre. Jövőre is 40% kedvezményt kapsz, ha már meglévő vásárló vagy.

Gyors megjegyzés: Ingyenes verziót is kínál, amelyet letölthet a webhelyükről, de alapvető és korlátozott funkciókat kínál.

Kattintson ide a GeneratePress prémium letöltéséhez

Használjon WordPress-bővítményeket mobilokhoz: a 4 legjobb beépülő modul, amellyel webhelye rugalmassá válik

A WordPress CMS használatában az a nagyszerű, hogy rengeteg mobil beépülő modult kínál, amelyek segítségével könnyedén mobilbaráttá alakíthatja webhelyét. Íme egy lista a legjobb 4 beépülő modulról, amelyek mobilra érzékenysé teszik webhelyét (és ezek közül néhány prémium, de minden fillért megér).

WPtouch

A WPtouch az egyik leggyakrabban használt mobil plugin a WordPress webhelyekhez. Több mint 500 000 webhely telepíti és használja világszerte, és szerepel a Google legjobb WordPress mobilmegoldások listáján is.

Ez a beépülő modul azonnal aktiválja webhelyének mobil verzióját, amely megfelel a Google Mobile tesztnek. Segítségével egyszerűen személyre szabhatja webhelye megjelenését, és gyorsabb böngészési élményt biztosít a mobil látogatói számára anélkül, hogy módosítaná a téma kódját.

A bővítmény prémium verzióját is kínálja, amelyet WPtouch Pronak hívnak (és 79 webhelyhasználatért 1 dollárba kerül), és a témáit a mobil látogatók számára használja, és az asztali téma nem változik, így a blog tartalma változatlan marad.

Sőt, a Pro opcióval vezérelheti a menüket, oldalakat, eszközöket, és még különböző kezdő- és céloldalakat is megadhat a blogjához.

WP mobil menü

A WP Mobile Menu az egyik legjobb WordPress plugins amely egy reszponzív mobilmenüt biztosít, ahol egyszerűen tetszés szerint testreszabhatja mobil menüinek stílusát.

Kivételes élményt nyújt a mobil látogatói számára, hogy hozzáférjenek webhelye tartalmához, függetlenül attól, hogy milyen eszközt használnak böngészés közben, beleértve az okostelefont, táblagépet vagy asztali számítógépet.

iThemes mobil beépülő modul

Ez NEM ingyenes bővítmény, mivel az iThemes prémium mobil bővítménye, amely nagyon népszerű és sok ember által használt szerte a világon.

Rengeteg lehetőséget kínál, valamint egy beépített stíluskezelőt, hogy webhelye minden eszközön érzékeny legyen. Mobileszközökre alkalmas témákat is kínál, amelyek segítségével optimalizálhatja webhelyét a mobilfelhasználók számára.

Különböző árképzési lehetőségek állnak rendelkezésre, és az alapcsomag mindössze 45 dollártól kezdődik, és 2 licenchez ad hozzáférést, ami ideális választás a bloggerek és az egyetlen webhely tulajdonosai számára.

A Mobil stíluskezelővel könnyedén módosíthatja mobiltémájának alapvető stílusait és színsémáit, és testreszabható bármely használt témával, és ez nem befolyásolja a tervezést.

TapTap

Ez egy másik széles körben használt prémium mobil bővítmény a CodeCanyontól (Envato Market), amely a legrugalmasabb és legsokoldalúbb WordPress mobilmenüt kínálja.

A TapTap személyre szabható, és az egyik csodálatos és könnyen használható WordPress mobilmenü, amely jelenleg elérhető az interneten. Legyen szó e-kereskedelmi üzletről vagy portfóliówebhelyről, mindent testreszabhat a betűtípusoktól, betűméretektől, ikonoktól, színektől, gomboktól és logóktól a hátterekig, igazításokig stb.

Ez a CodeCanyon prémium bővítménye, és ennek a bővítménynek a szabványos egyszeri licence 26 dollárba kerül, ahol egy éves frissítéseket és ügyfélszolgálatot kaphat.

A mobilmenübővítmény használatában az a legjobb, hogy könnyen, valós időben megtekintheti a webhelyén végrehajtott összes módosítás előnézetét (és segít a mobil menü gyors testreszabásában).

Az Accelerated Mobile Pages (AMP) használata

A webhely sebessége az egyik fő rangsorolási tényező a Google számára.

A betöltési idő csökkentése érdekében a Google az Accelerated Mobile Pages (AMP) néven ismert új megközelítést kínálja a mobilfelhasználók számára.

Íme egy példa a New York Times AMP keresési eredményére:

Hogyan tegyünk egy WordPress webhelyet mobilbaráttá

Mint fentebb látható, az AMP-oldalak gyorsan betöltődnek, és nagyon gyors élményt nyújtanak a mobileszközeikről online információkat böngésző felhasználók számára.

Az AMP-oldalak legnagyobb előnye, hogy nagyon gyorsan betöltődnek. Például, ha valaki keres valamit a Google-on, az AMP-hivatkozások felül jelennek meg, és ha az eredményre kattintanak, az szinte azonnal betöltődik.

Egy másik ok, amiért érdemes megfontolni az AMP alkalmazását a webhelyeken, az az, hogy további karakterkorlátokat ad a címekhez.

Akár tudja, akár nem, a Google 78 karakteres korlátozást ír elő az okostelefonokra. Asztali számítógépeknél ez 70.

Ez azt jelenti, hogy ha több mint 70 karaktert (asztali számítógépen) és 78 karakternél (mobilon) használ a címekben, a további karakterek csonkolódnak, így nem jelennek meg.

Így több karaktert adhat hozzá mobilcímeihez, hogy pontosabb keresési egyezéseket kapjon a mobilfelhasználóktól, és növelje az okostelefonokról érkező általános keresési forgalmat.

Most felmerül a kérdés: hogyan lehet megvalósítani az AMP-t WordPress-webhelyeken?

Szerencsére van néhány WordPress plugin amelyek segítségével könnyedén engedélyezheti és implementálhatja az AMP-verziót a WordPress-webhelyeken.

Íme néhány csodálatos AMP-bővítmény listája, amelyek segítségével implementálhatja az AMP-verziót a mobilfelhasználók számára.

Elkerülendő hibák a WordPress-webhelyek mobilbaráttá tétele során

Képek használata optimalizálás nélkül: a legtöbb ember feltérképezi a Google képeit, és közvetlenül a blogbejegyzéseiben használja fel azokat anélkül, hogy az optimalizálás miatt kellene aggódnia. Ha Ön is közéjük tartozik, ne tegye ezt, mivel webhelye betöltési idejét nagymértékben befolyásolják az Ön által használt képek.

Használjon olyan bővítményeket, mint a WP Smush.it a képek optimalizálásához, vagy még jobb optimalizálásához ingyenes képoptimalizáló eszközökkel, még mielőtt képeket használna a bejegyzéseihez.

Túl messzire megy a java szkripttel: Tudta, hogy a legtöbb kezdő úgy játszik CSS fájlokkal és Java szkriptekkel, hogy nem tudja, hogyan kell játszani a kóddal? Ha Ön is közéjük tartozik, ne szórakozzon tudatlanul a Java- vagy CSS-kóddal, mert nagy valószínűséggel tönkreteheti webhelye betöltési idejét.

Nem teszteli webhelyeit: tesztelje, hogy webhelyei megfelelően nyílnak-e meg különböző mobileszközökön és táblagépeken. Használhatja a MobileTest.me, QuirkTools stb. hogy webhelyét különböző képernyőfelbontásokon jelenítse meg.

Egyéb források:

Következtetés

A szó szoros értelmében több milliárd ember használ okostelefont az autóértékelésektől a kedvezményeken át az online vásárlásig mindenre. Nem számít, hogy WordPress webhelyet vagy e-kereskedelmi üzletet használsz, a reszponzív kialakítás javítja az általános eredményt.

Szóval, mit gondol a mobilra optimalizált WordPress webhelyekről? Van kérdésed? Ossza meg véleményét a megjegyzésekben.