WordPress weboldal készítés lépésről lépésre

Frissítve: 2024.08.02

A WordPress a világon a leggyakrabban használt nyílt forráskódú tartalomkezelő. A rendszer ténylegesen segít az embereknek abban, hogy pillanatok alatt a semmiből felépítsenek egy weboldalt. Az ösztönzés pedig adott, csak körül kell nézni az interneten. A WordPress weboldal készítés mára már nem atomfizika, bárki megtanulhatja.

A következőkben részletesen elmagyarázzuk, hogyan működik a WordPress weboldal készítés lépésről lépésre.

Nézzük mik azok a lépések, amiket végre kell hajtanod a WordPress weboldal készítés során:

Mivel ez a néhány lépés lehet, hogy kevés egy igazán egyedi és rendkívül sokoldalú weboldalhoz, ezért az útmutató végén egy bónuszt is találsz: UX tervezési tippek és trükkök.

De mielőtt rátérnék magára a feladatlistára, érintsünk egy másik témát. Ígérem, nem fog sokáig tartani.

Mennyibe kerül egy WordPress weboldal készítése?

Ha a költségek eloszlását szeretnénk tudni egy WordPress weboldal készítés során, a következőket kell számolnunk:

• Domain név vásárlás: A .hu domainekre minden szolgáltatónak saját árszabása van, mindenki más fajta csomagban kínálja a regisztrációt. Általánosan elmondható, hogy a magyar domain nevek a legolcsóbbak. Az árak 1800Ft / év-nél kezdődnek, amíg a .de (Németország) domain végződések regisztrációjának ára eléri az évi 7000 Ft-ot.
  Fontos, hogy egyedül a magyar domain nevek regisztrációjához szükséges papír alapú igénylőlap. A világ összes többi domain nevét online, pár perc alatt regisztrálni lehet.
• Webtárhely bérlés: Ahhoz, hogy WordPress weboldalunk megjelenjen az interneten, bérelni kell számára egy tárhelyet egy webtárhely-szolgáltatónál. Az igazán jó webtárhely definíciójával már foglalkoztunk. Az árak 8000Ft / évtől indulnak.
• WordPress sablon: A WordPress weboldal készítés egyik sarokköve. A téma (sablon) ára egyértelműen a testre szabhatóság mértékétől függ. Léteznek ingyenes sablonok is, minimális testreszabási lehetőségekkel. Ha nem egy alap szintű weboldalt szeretnél, a jó kinézetű, egyedi témák éves díja 20.000 Ft körüli összegbe kerül.
• WordPress bővítmények. A bővítmények zöme, az alapvető funkciókkal ingyenes, de ha speciális beállításokat is használni szeretnél, akkor a bővítmények fizetős verzióit kell alkalmaznod. Minél több szolgáltatást szeretnél, annál több bővítményre lesz szükséged. (pl. keresőoptimalizálás)
  Léteznek olyan bővítmények, amiknek nem érhető el ingyenes verziója, ilyen pl. a társkereső-oldal kiegészítő. Ha WordPress alapú társkereső oldalt készítesz, csak maga a bővítmény 50.000 Ft-ba kerül.

Tehát a fentiek szerint a legegyszerűbb weboldal évente 9800 Ft-tól indul. Abban a pillanatban, amikor speciális témafunkciókat szeretnél, a költségek legalább 30.000 Ft / évre nőnek.

Persze ez az ár csak akkor lehet ennyi, ha mindent magad csinálsz a WordPress weboldal készítés során.

A fizetős bővítmények frissítésére évente akár 20-50.000 forintot is fizethetsz.

Ha valami egyediségre vágysz, és hívnod kell egy WordPress fejlesztőt, a költségek az első évben meghaladhatják a 200.000 Ft-ot is. A webáruházak esetében a költségek jelentősen megnőhetnek, mivel rengeteg funkcióra van szükséged, a teljesítmény és a biztonság a legfontosabb.

Ha az árak láttán kétségeid támadnak és úgy érzed, hogy nem is olyan olcsó a WordPress honlap készítés, megnyugtatlak, még mindig ez a leginkább pénztárcabarát megoldás számodra.

Most, hogy mindezt tisztáztuk, itt az ideje, hogy a végre elkezdjük a címben beharangozott témát: hogyan is néz ki a WordPress weboldal készítés napjainkban.

1.Válaszd ki a weboldalad domain nevét

Ha ezt még nem tudtad, a domain név mindig legyen a vállalkozás neve vagy a termék neve. Az igazi domain névnek ütősnek kell lenni, ezért ne dönts elhamarkodottan, amikor a domain nevet kiválasztod.

Ha úgy érzed, hogy végképp semmi jó ötleted sincsen, ne aggódj, vannak olyan eszközök, amelyek segíthetnek.

Tippek és trükkök a weboldal domain nevének kiválasztásához

Ha cégeddel a nemzetközi piacra is ki akarsz lépni, győződj meg róla, hogy a kiszemelt domain-neved egyedi, emlékezetes és nincs semmi furcsa jelentése angolul vagy más népszerű nyelven (pl.: német, spanyol, olasz).

Ha csak helyi vállalkozás vagy, akkor ezt a lépést kihagyhatod.

Elsőként nézzünk meg egy rövid ellenőrző listát a WordPress weboldalad domain nevének kiválasztásához:

• Készíts listát a vállalkozásodhoz / termékedhez kapcsolódó kulcsszavakról. Gondolj arra, hogy a vásárlók mit éreznek a terméked használata során, vagy után. Tegyük fel, hogy van egy természetes összetevőkön alapuló bőrápoló termékcsaládod. A lista tartalmazhat olyan szavakat, mint „bőr”, „ápolás”, „biztonságos”, „természetes”, „szép”, „friss” stb.
• Ellenőrizd az újonnan megtalált domain név jelentését. Én mindig így guglizom ki a nevet: „{az új domained} meaning”. A lista végén szótármagyarázatokkal fogtok találkozni. Ezután a Google képkeresőjébe megyek, és megnézem, milyen találatok vannak. Talán van egy ilyen nevű énekes, egy manga rajzfilm neve stb. Ha igen, akkor újra kell kezdeni a folyamatot.
• Keress rá a domain névre a Facebookon vagy a LinkedIn-en, hogy létezik-e ilyen néven üzleti oldal.
• Ellenőrizd, hogy a kiválasztott domain név megvásárolható-e. Sok esetben nem elég, ha a böngészőbe begépeled a nevet és látod, hogy nem jön be weboldal. Elképzelhető, hogy valaki már megvette korábban ezt a domaint, de még nem készült el rá a weblap. Az is előfordulhat, hogy valaki időben lecsapott a névre és a domaint továbbértékesíteni szeretné. A magyar domainek foglaltságát itt ellenőrizheted.
• Vedd meg a domain neved. Magyar domineket a hazai regisztrátorokon és viszonteladókon keresztül vásárolhatsz. Fordulj bizalommal ahhoz a szolgáltatóhoz, aki a tárhelyet biztosítja weboldaladnak.
  Nemzetközi domain név vásárláshoz a legnépszerűbb szolgáltatók a GoDaddy és a Namecheap.

A domain név kiválasztása is egy befolyásoló tényező a keresőoptimalizálás terén. Ma már valamelyest csökkent a súlya a Google szemében, de még mindig előnyösebb, ha kulcsszavas, vagy márkaneves domain-t választunk.

Léphetünk a következő fejezetre.

2. Szerezz be egy megbízható tárhelyet

Minden weboldal, amit valaha is meglátogattál, egy-egy szerveren van tárolva. Ez azt jelenti, hogy webtárhelyet kell szerezned neked is egy tárhelyszolgáltatótól, ha az interneten meg szeretnél jelenni.

Tekintettel arra, hogy a WordPress weboldal készítés mozgat minket, választhatsz tárhely-csomagot a WordPress.com weboldalán vagy más, harmadik féltől származó tárhelyszolgáltatótól.

Hadd tisztázzak valamit, mielőtt folytatjuk. Léteznek a wordpress.com és a wordpress.org oldalak. A különbség köztük az, hogy a WordPress.com webhelyen tárolhatsz és készíthetsz weboldalakat magadnak.

A WordPress.org webhelyről viszont letöltheted a legújabb nyílt forráskódú és ingyenes WordPresst, az aktuális frissítéseket és beépülő modulokat szerezheted be a weboldaladhoz, amelyet máshol tárolsz.

Ennek az útmutatónak az a célja, hogy te valóban márkát építs és teljes ellenőrzést gyakorolj a weboldalad felett. Vagyis, egy harmadik fél által nyújtott tárhelyszolgáltatás felé fordulj.

Három fő tárhelyszolgáltatás létezik: megosztott tárhely, VPS és felügyelt tárhely.

Az első esetben a szerver erőforrásai több weboldal között oszlanak meg.

Hosszú távon, ha a megosztott tárhelyen elhelyezett weboldalak növekednek (ahogy a tiéd is), akkor teljesítményproblémákkal nézhetsz szembe. Ekkor fogod tudni, hogy tovább kell lépni, VPS szolgáltatásra vagy felügyelt tárhelyre van szükséged.

De nem szólhat minden a megosztott tárhely ellen. Hazánkban is léteznek olyan szolgáltatók, akik valóban minőségi megosztott tárhelyeket szolgáltatnak.

A szerver erőforrásait nem osztják fel a végtelenségig, csak addig, amíg valóban minden tárhely-bérlőnek elegendő jut belőle.

Ők azok, akik a minőségi szolgáltatás nyújtását előbbre helyezik, mint a rövid távú pénzügyi előnyöket.

Tehát a tárhelyszolgáltató kiválasztásakor azt tartsd szem előtt, hogy milyen üzleti céljaid vannak.

Ha VPS-tárhelyet használsz (Virtual Private Server), az erőforrások akkor is meg lesznek osztva több VPS közt, de némi irányítást szerezhetsz felettük. Látni fogod, a biztonság és a teljesítmény javulását is.

Fontos tudni, hogy VPS tárhely esetén magát a VPS szerver szoftver kezelését, karbantartását, frissítését, kiegészítőit is ismerned és vállalnod kell, hogy a sebesség és a biztonság megmaradjon.

A felügyelt tárhely olyan, mint az „à la carte” szolgáltatás. Saját fizikai szervered lesz, és óriási lendületet fogsz elérni a teljesítményben és a biztonságban.

A dolgok a fentieknél természetesen bonyolultabbak lehetnek, ez csak egy áttekintés az elérhető lehetőségekről a WordPress weboldal készítésedhez.

Ha összehasonlításokat végzel a tárhelyek között a lenti tulajdonságokat vedd figyelembe:

• Árazás
• Adattárolás
• Támogatás
• Teljesítmény

Valószínűleg találkoztál már olyan weboldalakkal, amik „http” (nem biztonságos), vagy „https” (titkosított) protokollt használnak. Ez vajon mi lehet?

A HTTP (Hypertext Transfer Protocol) a modern web alapja. Összeköti a böngészőket és a szervereket, kérés-válasz alapon működik. Mögötte az extra „s” azt jelenti, hogy a weboldalhoz való kapcsolat titkosítva van, és a weboldalon megosztott adatok biztonságosak.

Tegyük fel, hogy egy vásárló fizet a weboldaladon, vagy bejelentkezik egy felhasználói fiókba. A felhasználó által begépelt információk privátok lesznek. A kapcsolat így biztonságos a hackelés ellen.

A böngésző és a webszerver közti kapcsolódás az SSL technológián keresztül történik („Secure Sockets Layer”). A látogatók számára a „https” használata bizalmat jelez, mivel védi az adataikat és a magánéletüket. Ez azt jelenti, hogy be kell szerezned egy SSL tanúsítványt.

Győződj meg róla, hogy milyen a tárhelycsomagod, tartalmazza-e ezt a lehetőséget.

Ha megszerezted a választott tárhely-csomagot, és beállítottad a bejelentkezési adatokat, a WordPress weboldal készítés egyetlen hiányzó darabja maga az ingyenes WordPress rendszer lesz. A legtöbb tárhelyszolgáltató lehetővé teszi a WordPress telepítését a vezérlőpultról / varázslóból.

Hogyan fogsz bejelentkezni a WordPress weboldalad admin felületére? Egyszerű. Csak írd be a böngészőbe a weboldal címét, és tedd hozzá a „/wp-login.php” kifejezést, ahogy az lent látható.

3. Ismerkedj meg a WordPress kezelőfelületével

A WordPress vezérlőpultjában 9 szekció található, most ezekkel ismerkedünk meg.

WordPress beállítások

Ebben a szekcióban találhatók a rendszer alapbeállításai, és legtöbbször itt találjuk az utólag telepített kiegészítők beállításait is. Ha telepítettél egy plugint, a beállításait elsőként itt keresd. A WordPress weboldal készítés alapját képzik a megfelelő beállítások.

• A Beállítások->Általános menüpontban tudod beírni a weboldalad címét, jelmondatát, az URL-t, időzónát, dátum- és idő formátumot és a weboldal nyelvét.
• A Beállítások->Írás menüpontban tudsz formázási beállításokat váltani, meghatározhatod az alapértelmezett kategóriát (Érdemes az „egyéb”-ről valami életszerűre átváltani), válthatod a bejegyzés formát, a hivatkozások kategóriáját, és meghatározhatod az alapértelmezett szövegszerkesztőt.
• A Beállítások->Olvasás fülön határozod meg, hogy mi legyen a weboldalad kezdőlapja. Itt választhatsz egy statikus oldalt (pl. Kezdőlap), de meghatározhatod a kezdőlapot úgy is, hogy a blogbejegyzések jelenjenek meg időrendi sorrendben. Ez egy fontos lépés. Itt választod ki, hogy a blogban és az RSS csatornában mennyi bejegyzés jelenjen meg egyszerre. Ha nem akarod, hogy a Google indexében szerepeljen a weblapod, azt itt letilthatod. (Nem ajánlott)
• A Beállítások->Beszélgetés menüpontban a blog kommentelés szabályait határozhatod meg.
• A Beállítások->Média menüpontban a médiatárban tárolt képek méretét tudod állítani.
• A Beállítások->Közvetlen hivatkozások fül alatt határozhatod meg, hogy a weboldalad milyen URL struktúrát használjon. Érdemes a „Bejegyzés címe” lehetőséget választani, akkor lesznek szép beszédes URL-ek a weboldaladon. Ez nagyon fontos beállítás a keresőoptimalizálás szempontjából!
• A Beállítások->Személyes adatok védelme menüpontban jelölöd meg, hogy melyik oldalt használod Adatkezelési tájékoztató-ként. Ha még nincs ilyen oldalad, itt létre is tudsz hozni egyet.

Érdemes már a WordPress weboldal készítés kezdetén beállítanod ezeket az opciókat, és kitölteni a hiányzó információkat, hogy ne hagyj ki semmi fontosat. A beállítások egyszerűek, az egész kevesebb, mint 30 perc alatt elvégezhető.

WordPress oldalak és bejegyzések

A tartalmaid mindig „oldalakba” vagy „bejegyzésekbe” kerülnek. A WordPress weboldal készítés alatt az összes weblapon töltött időd 95% -át ebben a kettő menüpontban töltöd.

Az „oldalak” statikus tartalommal rendelkeznek. Lehet egy kezdőlapod, szolgáltatások oldalad, kapcsolat oldal, rólunk oldal stb.

A bejegyzések menüben megtalálhatod legújabb blogcikkeidet, esetleg portfóliódat. Ezek dinamikus oldalak, mert automatikusan a legfrissebb webhelytartalmat helyezik a megjelenítési lista tetejére.

Amikor a vezérlőpultban kiválasztod a „Bejegyzések” lehetőséget, létrehozhatsz egy új bejegyzést, megjelenítheted az összes eddigi bejegyzésedet, és kezelheted a címkéket és kategóriákat.

 

Úgy tudsz létrehozni új bejegyzést, ha a képen látható menüben kiválasztod a Bejegyzés-> Új hozzáadása lehetőséget, vagy az Összes bejegyzés menüpontba lépsz és a lap tetején kiválasztod az Új hozzáadása gombot.

Az oldalak esetében ugyanígy működik a létrehozás.

Az „Összes oldal” vagy az „Összes bejegyzés” menüpontokban találod az alapértelmezett oldalakat és a WordPress sablonod által telepített bejegyzéseket.

Hogyan lehet szerkeszteni egy bejegyzést vagy egy oldalt?

Mikor az oldalak vagy a bejegyzések listájában az egérkurzort a szerkeszteni kívánt tartalom címére húzod, alatta megjelenik néhány lehetőség: szerkesztés, gyors szerkesztés, lomtár, megtekintés.

Itt kell arra a műveletre kattintani, amit az adott tartalommal végezni szeretnél.

WordPress média

Az összes média fájl, amit a weboldaladhoz feltöltesz, ide kerül. A képek, videók, pdf dokumentumok stb. A kijelölt területre húzhatod őket, vagy fel is töltheted.

 

A bejegyzéseken, vagy oldalakon keresztül is hozzáadhatsz média tartalmakat, akkor is minden fájl a médiatárba kerül. Később olvashatsz még többet erről a témáról.

WordPress hozzászólások

A 4. vezérlőpult rész neve „Hozzászólás”. Itt kezelheted a bejegyzéseidhez érkezett hozzászólásokat. Rengeteg spam-hozzászólást fogsz kapni, amelyeket áthelyezheted a spambe vagy kukába. A témába illő hozzászólásokat is itt engedélyezheted.

 

A „Megjelenés” menü

A menüben a következőket állíthatod:

• Itt tudsz új WordPress témákat keresni (tudod, a téma a WordPress weboldal készítés egyik sarokköve), telepíteni és aktiválni a telepített témákat. (további részletek a következő fejezetben találhatók).
• A widgetek testreszabásával hozzáadhatsz újabb tartalmi elemeket weboldalad oldalsávjához, láblécéhez és más területeihez.
• Itt tudod létrehozni és megjelenési helyekhez rendelni a WordPress menüidet.
• Hozzáadhatsz háttérképet a weboldaladhoz.
• Szerkeszteni tudod sablonod/témád kódját a „Témaszerkesztőben” (csak akkor ajánlott, ha fejlesztő vagy).

Abban a pillanatban, mikor aktiválsz bizonyos bővítményeket, megjelenhet néhány új menüelem a „Megjelenés” menü alatt. Minden WordPress téma saját beállításokat is helyezhet el ebben a menüben.

Bővítmények

Rengeteg olyan funkció van, amelyek nem kezelhetők minden sablonban egyaránt, például a SEO optimalizálás, a webhelyek biztonsága és a biztonsági mentés, a táblázatok, az űrlapok, az e-kereskedelmi szolgáltatások és még sok más. A beépülő modulok pótolják ezeket a hiányzó lehetőségeket.

Szinte minden hiányzó funkció pótolható a szükséges bővítmény telepítésével. Ma már elképzelhetetlen a WordPress weboldal készítés kiegészítők használata nélkül.

Felhasználók

A weboldal adminisztrátoraként Te döntheted el, hogy kinek milyen hozzáférése legyen a weboldaladhoz. Igényeidtől függően hozzáférést adhatsz közreműködőknek, vendégszerzőknek, szerkesztőknek és másoknak.

Szándékosan kitakartam a saját admin felhasználónevem, de láthatod, hogy biztonsági szempontból nálam nincs admin nevű felhasználó. Ha Te is törlőd rögtön a WordPress weboldal készítés kezdetén, már sokkal-sokkal többet teszel a weboldalad biztonsága érdekében, mint a weblap tulajdonosok zöme.

Eszközök

Az „Eszközök” menü alatt lehetőséged lesz a weboldalad adatait más tartalomkezelő rendszerekbe (pl. Blogger) importálni és exportálni.

Itt található a „Webhely egészség” szakasz, ami kritikus információkat mutat be a WordPress weboldalad konfigurációjáról és a figyelmedet igénylő elemekről.

Mivel tiszteletben kell tartanunk az adatvédelmi irányelveket, itt exportálhatod vagy törölheted felhasználóid adatait.

A WordPress weboldal készítés során találkoztam olyan pluginokkal is, amelyek ebbe a menüpontba telepítették a saját beállítási lehetőségeiket. Pl. ide települ a Better Search and Replace plugin beállítása is.

Ezzel befejeztük a WordPress irányítópult elemeinek fejezetét.

Térjünk rá egy látványosabb teendőre.

4. Hogyan telepíts WordPress sablont

A sablon a WordPress weboldal készítés lelke. Egy ízléses sablon nagyon jó benyomást kelt a látogatókban. A sablonok telepítéséhez a WordPress adminisztrációs irányítópultjában, a bal oldali menüben kattints a „Megjelenés” menüre, majd azon belül a „Sablonok” elemre.

Itt láthatod a jelenleg telepített sablonokat. Ha új sablont szeretnél telepíteni, kattints az oldal tetején az „Új hozzáadása” gombra.

Rengeteg téma fog megjelenni, és szűrheted őket legújabb, kiemelt, népszerűség szerint … vagy jellemzők szerint.

Ha megtaláltad a kívánt témát, kattints a „Telepítés”, majd az „Aktiválás” gombra. Aktiválhatod a WordPress témát úgy is, ha visszatérsz a Megjelenés-> Sablonok oldalra.

Ezzel kész is vagy!

5. Készítsd el WordPress weboldalad

A WordPress weboldal készítés projektedben a weboldal tervezés a választott témától függ. Ha valami extra dologra van szükséged, nos … valószínű, hogy találnod kell valamit a hiányzó funkciók pótlásához.

Általában minden WordPress-témához 2 kinézet tartozik: egy a bloghoz és egy az oldalakhoz. A színek korlátozottak, nincsenek speciális testre szabási lehetőségek. Ez azt jelenti, hogy az elérhető bővítmények még hasznodra lesznek.

Minden WordPress témában van egy alapfunkciókkal rendelkező téma testreszabó. Ez teljesen megfelelhet azoknak, akiknek nincs szükségük egyedi funkciókra, és nagyon gyorsan szeretnék felépíteni a weboldalukat.

Ha kell, hozzáadhatod saját CSS-stílusaidat. De akkor mindenképp olyan témát válassz, amelynek az elrendezése megfelel a saját elképzeléseidnek.

Hogyan szabhatod testre a témádat? Egyszerűen navigálj a Megjelenés->Testreszabás lehetőségre.

A bal oldalon kiválaszthatod, amit módosítani akarsz: tartalmat, menüt és egyebeket. A jobb oldalon látható a weboldal előnézete. A ceruza ikonra kattintva valós időben módosíthatod a szövegeket.

Itt kell megemlítenem a WordPress oldalépítőket. Ezek olyan különleges bővítmények, amelyek valóban egyedi weboldalak felépítésében segítenek. Használatukkal a téma elrendezését, szerkezetét teljesen megváltoztathatod.

A következő fejezetünkben részletesen elmagyarázzuk:

• Hogyan működik a WordPress weboldal készítés oldalépítő használatával
• Hogy zajlik a WordPress weboldal készítés az alapértelmezett szerkesztő használatával

A. WordPress weboldal készítés ingyenes weboldal építők segítségével

A WordPress weboldal építők segítenek abban, hogy a Megjelenés->Tesztreszabás teljesen új szintre kerüljön. Mindent személyre szabhatsz: fejléceket, oldaltartalmat, lábléceket, navigációs menüket, globális, egyedi stílusokat, mind te találod ki! Nincs szükség tervezési vagy programozási készségekre!

Ez általában fogd és vidd módszerrel zajlik.

Nem kell aggódnod a mobil dizájn miatt sem, az oldalépítőkkel mobilbarát weboldalakat készíthetsz.

Hogyan módosítsd weboldalad beállításait a Testreszabóban

A bal oldali menüben a Megjelenés->Testreszabás menüpontban görgess le az „Általános beállítások” elemig.

Itt a következő dolgokat tudod beállítani, megváltoztatni:

• Weboldalad nevét (Jól emlékszel, ezt a klasszikus „Beállítások” menüben is megteheted)
• A weboldal általános színvilágát és tipográfiáját.
• A blog, a fejléc és a lábléc megjelenését: milyen háttereket akarsz használni, távolságok, szegélyek, árnyékok stb.
• Távolságokat: gombok közt, oszlopok közt stb.
• Saját CSS kódot is itt tudsz elhelyezni.

Hogyan készíthetsz tartalmat a WordPress-ben oldalépítők segítségével

Mint korábban említettük, ha új oldalt szeretnél létrehozni, lépj az „Oldalak” menübe, és válaszd az „Új hozzáadása” lehetőséget. Ekkor az alapértelmezett WordPress szerkesztőhöz kerülsz, ahol adj egy címet az oldaladnak. Ezután válaszd a „Beaver Builder” lehetőséget. (A telepített Beaver Builder oldalépítő esetén!)

 

Menü létrehozása a WordPress testreszabás szekciójában

 

Tegyük fel, hogy már megtervezted és létrehoztad az oldalaidat, és hozzá akarod adni őket egy menühöz.

A bal oldali oldali kezelőpanelen található a weboldal minden szakasza fentről lefelé rendezve, ahogy magán a weboldalon is. A lábléc az utolsó szakasz. Alatta néhány extra funkciót láthatsz és itt találod a menüket is.

Itt már el is kezdheted a menük létrehozását.

Az „új menü létrehozása” gomb megnyomása után nevet kell adnod a menüdnek és ki kell választanod a menü megjelenési helyét. (fejléc, lábléc, felső sáv menü stb). A menü megjelenési helyek a telepített témától függenek, minden sablonban más és más menü megjelenési helyek találhatók.

A „Tétel hozzáadása” gombbal hozzáadhatod oldalaidat a menühöz. Nem csak oldalakat, hanem bejegyzéseket, oldalépítővel mentett sablonokat, kategóriákat, címkéket is adhatsz a menüköz.

Webáruház esetén hozzáadhatsz termék linkeket, termékkategóriákat is.

 

Hogyan dolgozz WordPress widgetekkel

Már volt róla szó, hogy a widget olyan tartalmi elem, amelyet hozzáadhatsz weboldalad oldalsávjához, láblécéhez és más területekhez.

Ha a weboldaladon oldalépítőt használsz csak a WordPress oldalsávjaihoz használj widgeteket, mert az oldalépítőkben általában előre megtervezett lábléc elrendezések vannak.

Az oldalsávokat legtöbbször a blog oldalai és a webáruházak termék- és kategória oldalai használják.

Minden témának vannak saját widget-jei, amik a téma telepítésekor beépülnek a használható widgetek közé.

Ilyenek lehetnek a keresősávok, a legutóbbi bejegyzések és hozzászólások, a közösségi widgetek a képek és videók.

Tegyük fel, hogy az oldalsávon szeretnéd megjeleníteni Facebook rajongói boxodat, ehhez is létezhet sablonodban külön WordPress widget.

Az egyik kedvenc widgetem az Egyéni HTML widget, amely lehetővé teszi az saját HTML kód szerkesztését. Ha valamire nem találsz konkrét widgetet, a HTML szerkesztővel megvalósíthatod.

Ha eddig eljutottál, készen vagy! Gratulálok, a WordPress weboldalad összeraktad és működik!

Most nézzük a weboldalak építésének másik módszerét a WordPress-ben.

B. WordPress weboldal készítés Gutenberg használatával

A Guenberg blokkszerkesztő használata az a a része a WordPress weboldal készítésnek, amit nagyon gyorsan meg fogsz tanulni.

Ez a szerkesztő még mindig új a WordPressben (ez az alapértelmezett WordPress szerkesztő 2018 decembere óta), de a közösség hozzájárulásának köszönhetően folyamatosan fejlődik.

A klasszikus szerkesztő így néz ki:

 

Ugyanez Gutenberg használatával:

Azonban tudnod kell, hogy nem minden téma kompatibilis ezzel az új szerkesztővel. Találnod kell olyan témát, ami Gutenberg kompatibilis.

Az alapértelmezett WordPress szerkesztővel történő elrendezés meglehetősen korlátozott.

A Gutenberg szerkesztő viszont blokkokon alapul. Ahogy az előző fejezetben már szó volt róla, a blokkokba nagyjából minden beletartozik: címsorok, képek, gombok, videók stb.

Elmondom én miért nem ragaszkodom a Gutenberg használatához.

Ha utána nézel a Gutenberg értékeléseknek, a legfrissebbek mind 1-2 csillagos vélemények. Ez nem jó élmény. Pedig már néhány év eltelt a bevezetéstől, és sok frissítés van folyamatban, a blokkszerkesztő még mindig gyerekcipőben jár.

A WordPress most a közösségre támaszkodik, hogy új blokkokat hozzon létre, hogy a szerkesztési élményt fejleszteni lehessen.

Jelenleg az eszköz úgy viselkedik, mint egy szövegszerkesztő, a stílusoldalon alacsony energiafogyasztással.

6. Telepítsd a létfontosságú WordPress pluginokat

A WordPress weboldal készítés az alaprendszer telepítésén kívül a témából(sablon) és a bővítményekből áll. Több ezer WordPress plugin áll rendelkezésre, amik kibővítik a weboldalad funkcióit, vagy új szolgáltatásokat adhatnak hozzá.

Rövid ismertető arról, hogy a WordPress weboldal készítés során miként telepíts új bővítményeket (plugin).

Bővítmények, amiket ajánlunk

WordPress oldalépítő: Beaver Builder
Fogd és vidd alapú oldalépítő számtalan funkcióval.

SEO WordPress bővítmény: Rank Math
A keresőoptimalizálás rendszeres forgalmat jelent weboldalad számára, de megvannak a nehézségei. A bejegyzések folyamatos optimalizálása néha több idő vesz el, mint maga a tartalom megírása. A bővítmény segít kialakítani a keresőbarát aloldalakat, amivel javulni fognak a keresőben elért helyezéseid.

Kapcsolati űrlapok: Forminator
A kapcsolatfelvételi űrlap a weboldalad és az online marketing legfontosabb eleme lehet, ha szeretnéd, hogy látogatóid kérdéseket tegyenek fel, árajánlatot kérjenek, vagy egyszerűen csak üzenjenek neked. Egyszerűen kezelhető, fogd és vidd rendszerű bővítmény profi kapcsolati űrlapok készítéséhez. Az ingyenes verziója is rengeteg funkcióval rendelkezik, tehát ideális a kezdő WordPress weboldal készítés alkalmával.

Email marketing: Mailchimp for WordPress
2000 feliratkozóig ingyenesen használható feliratkozó gyűjtő és hírlevél rendszer. Az online marketing vezéreleme a feliratkozók gyűjtése a weboldaladon. A Mailchimp kiváló kezdeti eszköz lehet a feladatra.

Biztonsági plugin: All in one wp Security
Rengeteg biztonsági funkciót ad a WordPress weboldalnak.

Termékértékesítés: WooCommerce
WordPressből webáruház készítés akár saját magadnak is.

Mobil hívógomb: Call now Button
Nagyon hasznos bővítmény. Mobilon megjelenik egy élénkzöld hívógomb, amivel rögtön tárcsázhatnak is ügyfeleid, nem kell a telefonszámod után kutakodni a weblapon.

Spam szűrő: Akismet antispam
Az Akismet egy hatékony spam-szűrő plugin, ami megszűri a bejegyzéseidhez érkező hozzászólásokat a weboldaladon. Nagyszerű, ingyenesen is használható bővítmény, használatával nagymértékben csökkenni fog a spam hozzászólások száma blogodban. Nálam már nem létezik WordPress weboldal készítés Akismet telepítés nélkül.

Weboldal analitika: Google Analytics
A Google Analytics (GA) a Google ingyenes szolgáltatása, ami a weboldal látogatóiról készít és prezentál részletes statisztikákat. Célja, hogy a webmesternek segítsen a reklámkampányok optimalizálásában, azáltal, hogy megmutatja, a látogatók honnan kattintottak át, mennyi időt töltenek a weboldalon, illetve hogy földrajzilag hol találhatók. Segít megérteni a látogatóid viselkedését.

Most térjünk rá egy másik témára: az oldal sebességére. A látogatóknak is és a Google-nak is fontos a weboldal sebessége. Hogy a Google-nak miért?

A sebesség fontos tényező a WordPress weboldal készítés alkalmával, amit a Google is előnyként értékel a keresőben megjelenő találati listán.

Miért rossz a weboldal lassú betöltődése a látogatók számára? Nos, ha weboldaladdal rossz felhasználói élményt nyújtasz, előfordulhat, hogy nem élnek az ajánlatoddal, vagy akár nem is jönnek vissza soha többet az oldaladra.

A Google 2018-as kutatása szerint a mobil felhasználók 53% -a elhagy egy olyan webhelyet, amelynek betöltése 3 másodpercnél hosszabb ideig tart (!).

Pedig 2018 már elég régen volt.

Hogyan befolyásolja az oldalbetöltés a mobil látogatókat (megjegyzés: a statisztikában a visszapattanás jelentése a weboldal elhagyása)?

Szóval, hogyan lehet ezt kijavítani, és javítani az általános weboldal teljesítményt, hogy ne kapj visszasorolást mind a felhasználók, mind a Google részéről?

A két legfontosabb technikai megoldásról beszélnék

Képek optimalizálása

A WordPress weboldal készítés során a képeket soha nem szabad eredeti méretben feltölteni. A mai modern fényképezők és telefonok óriási méretű fotókat készítenek.

Mindig méretezd át a képeket annak megfelelően, hogy a képernyőn mekkora helyet fognak elfoglalni. Egy képernyő szélesség, 1920 pixelt jelent (természetesen az asztali monitoron). A .jpg formátum mentésekor válaszd a 70-80 százalékos minőséget. A képen nem veszed észre ezt a változást, de a kép tárolási mérete sokkal kisebb lesz.

Ezen kívül próbálkozz JPG-k helyett a PNG formátummal (kevesebb színük van). Egy png kép a TinyPNG.com oldalon online még tovább tömöríthető!

Még jobb eredményt érhetsz el, ha a képeket .webp formátumban mented, ez az egyik legkorszerűbb mai webes képformátum.

A Smush az előnyben részesített WordPress bővítmény a képtömörítéshez. A bővítmény átkonvertálja a képeket az előbb említett .webp formátumra. Nem találsz látható minőségromlást, és optimalizálja az oldal sebességét.

Gyorsítótárazás

A gyorsítótárazás használata elkerülhetetlen a WordPress weboldal készítés alkalmával. Nagyon leegyszerűsítve, a gyorsítótár ideiglenes tárhelyet biztosít a tartalom későbbi eléréséhez.

Egy WordPress weboldal dinamikus megjelenésű, ami azt jelenti, hogy a böngészőben megjelenő weboldal képét a lekérés pillanatában állítja össze maga a tartalomkezelő rendszer.

Weboldalad másképp töltődik be, ha ugyanaz a látogató használja először vagy ötödik alkalommal.

Amikor a böngésző a gyorsítótárazást végzi, egy fájl másolatát menti a látogató eszközén az éppen látható weboldalról. Amikor egy weboldalt gyorsítótárban tárolnak, a böngészőnek csak az új vagy frissített oldalrészeket kell betöltenie, és nem kell új szerverkérelmeket kezdeményeznie.

Ugyanez történik, ha a „vissza” gombra kattintasz, a böngésző megjeleníti az előző oldalt a gyorsítótárból. Ez Szintén nagyon hasznos, ha lassú internetkapcsolattal rendelkezel, de az oldalak mégis gyorsan betöltődnek.

Az eszköz, amit javaslunk:

Autoptimize: A bővítmény sokkal több, mint egy szimpla gyorsítótár. Segítségével tömöríthetjük a HTML, CSS és JS tartalmakat is, ami még gyorsabb oldalbetöltődést eredményez.

Hogyan ellenőrizheted, hogy a weboldalad milyen gyorsan töltődik be? A Google-nak van erre egy kitűnő eszköze a Pagespeed Insights, ami nem csak a sebesség ellenőrzését segíti, hanem javaslatokat is tesz a hibák kijavítására.

WordPress weboldal készítés bónusz: UX dizájn tippek és trükkök

Emlékszel, azt mondtam, hogy a WordPress oldalépítőkkel a lehetőségek határa a csillagos ég.

Nos … mindig van egy „de”. Weboldal megtervezésekor és az online marketing során is mindig szem előtt kell tartanod a látogatókat, vagy vásárlókat (ahogy a marketingesek szokták mondani).

A WordPress weboldal készítés során ügyelned kell arra, hogy mindig nagyszerű élményt kell nyújtanod nekik a weboldaladon, ez az UX (felhasználói élmény).

Ehhez bizonyos szabályokat követned kell, hogy súrlódásmentes felhasználói élményt nyújts.

Felelj meg a látogatók igényeinek

A weboldal látogatói nem akarnak túl sokat gondolkodni. Hasznos információkra van szükségük, amelyek könnyedén megtalálhatók és érthetőek. Nincs szükségük a sok kattintgatásra vagy oda-vissza navigálásra.

Az emberek azonnali kielégülést keresnek: gyorsan és könnyedén megtalálják, amire szükségük van. Ha ezt nem találják meg a weboldaladon, akkor keresnek egy másik oldalt.

Vizuális hierarchia

Nem minden weboldal rész kezelése egyforma, valamelyek fontosabbak, mint mások (űrlapok, gombok, címsor, értékajánlat stb.). Hol szeretnéd elérni, hogy a látogatód landoljon? Hova akarod, hogy kattintson?

Használj vizuális jelzéseket, hogy segíts neki elérni, amit szeretnél. Az oldalak összes elemének idegenvezetőként kell viselkednie.

A kutatók kiderítették, hogy azok a felhasználók, akik balról jobbra olvasnak, Z alakú mintával vizsgálják a weboldalakat.

Ez azt jelenti, hogy oda kell irányítanod a legfontosabb információidat. Erre mindig figyelj a WordPress weboldal készítés során.

Könnyű navigáció

Egyszerűnek kell megtervezned a navigációs sávot, ne hogy túl sok lehetőség legyen. Paradox választási helyzet állhat elő, amikor a látogatókat elárasztják a lehetőségek.

Az oldalakat össze kell kapcsolni más releváns oldalakkal, hogy a navigáció zökkenőmentes legyen, és a látogató ne kattintson sokszor a „vissza” gombra, hogy az előző oldalakra jusson.

Használd ki a térközöket. A fehér tér lehetővé teszi az információk megemésztését tartalmi területeken történő rendszerezését. Ezáltal a látogatók kényelmesebben érzik magukat, és nem terheli meg őket a rengeteg adat.

Azonos színösszeállítás (konzisztencia)

Kerüld a szuper sötét vagy szuper intenzív színeket a weboldaladon. Elküldhetik a látogatókat. Erősebb színekkel emelheted ki weboldalad fontosabb részeit.

És még egy dolog, mielőtt továbblépnénk a következő UX tervezési elvre. A színeknek jelentése van mindenütt a világon, különféle érzelmekhez kapcsolódnak.

Kép forrása: https://co-print.hu/

Használj hatékony szövegírást

Ne használj pár kattintással végzett másolást. Írj mindig józan ésszel, természetes nyelven, ne használj zsargont, idegen kifejezéseket (nem mindenki ismer bizonyos technikai kifejezéseket).

Max. 3 fajta betűtípust, maximum 3 különféle méretben használj – legfeljebb 18 szó vagy 50-80 karaktert alkalmazz szövegsoronként.

Használj társadalmi bizonyítékokat

A látogatóknak miért kellene megbíznia benned, a vállalkozásodban vagy a termékeidben?

Mi, emberek, társadalmi lények vagyunk. Közösségekben élünk, vannak barátaink és családtagjaink. Ők lehetnek befolyással ránk. Nagyon érdekel a véleményük.

Ugyanez a helyzet a weboldalak, webáruházak esetében is. A vevői vélemények mindig sokat nyomnak a latban. Minél több van belőlük, annál hitelesebbnek tűnnek.

A legjobb, ha fényképes, névvel vállalt véleményeket közlünk a WordPress weboldal készítés alkalmával. Nem szabad kitörölni a negatív véleményeket sem, azok is tovább emelik a hitelességet.

Foglaljuk össze, milyen társadalmi bizonyítékokat tudsz használni:

• Termékértékelések
• Vevői vélemények
• Ügyfelek számának megjelenítése
• Ügyfelek logo-jának megjelenítése
• Eredményekkel alátámasztott esettanulmányok
• Sajtó megjelenések és díjak

Következtetések

A WordPress weboldal készítés már nem ismeretlen fogalom többé, fejezetünket nevezhetjük akár csomagolásnak is, nem gondolod?

A honlapkészítés WordPress alapon tényleg igen egyszerű, könnyen megtanulható akkor is, ha fenti részletek elsőre kicsit töménynek és átláthatatlannak tűnnek.

Rövid utat akartunk megtenni, nem elárasztani információkkal. De mivel az ördög a részletekben rejtőzik, így adtunk a témáról egy felülnézetet.

A helyzet az, hogy egy egyszerű weboldalt kevesebb, mint 2 óra alatt fel lehet húzni. De minél több funkciót, oldalt, tartalmat szeretnél hozzáadni, annál tovább tart a WordPress oldal készítés.

És soha ne hanyagold el a legújabb webdesign trendeket.