Sokan mondják, hogy egy WordPress oldal létrehozása gyerekjáték. De ha ez ilyen egyszerű, miért kell hozzá webfejlesztő? És grafikus, marketinges, SEO szakember? Összeírtuk, mi mindent teszünk meg egy WordPress oldal készítésekor, te pedig eldöntheted, megteszed-e mindezt egyedül, vagy inkább szakemberre bízod a feladatot. 4 fontos feladat, amit ne hagyj ki:
Előkészületek
Technikai feltételek és a híres öt perces telepítés
Kezdjük ott, hogy a WordPress motor alá kell egy tárhely, ami új honlap esetében sokszor domain regisztrációval is jár. Ha ezzel megvagyunk, létre kell hozni egy adatbázist, amivel a rendszer dolgozni fog. Általában itt kezdődnek a problémák – a laikusok számára sokszor még a cPanel sem jelent segítséget, mert hiába van a legtöbb apró részlet elmagyarázva, nem mernek belevágni, nehogy elrontsanak valamit.
Ha megvan az adatbázis és a hozzá tartozó belépési adatok, akkor jön a WordPress híres ötperces telepítője, ami szuper dolog, mert ha az adatbázis adatok megvannak, már csak egy belépési nevet és egy erős jelszót kell kitalálni, és el is készül a honlap alapja – ez a rész már valóban csak 5 perc, de ezzel még nem készült el a honlap, sőt!
Funkcionalitás
A váz megvan, most kéne ráépíteni azt a weboldalt, amit valójában szeretnél. A kezdéshez először is szükséges minimum egy vázlat arról, mit is szeretnél megjeleníteni a weboldalon. Legjobb (és legritkább) esetben a tartalmi-vizuális vázlat mellett kész szöveges tartalmat is kapunk, még a fejlesztés előtt. Valójában száz esetből kb. hét-nyolcnál kapunk ennyire részletesen kidolgozott tervet. Ez sem gond, mert ha kéred, mi is megírjuk a weboldal szövegét, sőt, sok esetben ez a jobb megoldás, de erről majd később mesélünk.
Weboldal tervezéskor az alábbi kérdéseket minden új és régi ügyfélnek feltesszük, hogy legyen egy közös kiindulópontunk a tervezéskor:
- Mi a vállalkozásod profilja, fő üzenete, terméke, szolgáltatása?
- Egyoldalas vagy többoldalas honlapot szeretnél?
- Blogjellegű, dinamikusan frissülő tartalom lesz a jellemző, vagy inkább a statikus?
- Webshopról van szó, vagy az offline vállalkozásod népszerűsítéséről?
- A GDPR-nak megfelelő hírlevélküldés és hírlevélre feliratkoztatás lesz-e?
- Árajánlatkérési lehetőség szükséges-e, vagy csak az elérhetőségeidet szeretnéd megjeleníteni?
- Van-e a vállalkozás formájából adódó egyéb tennivaló? (Pl. az egészségügyi szabályozások miatti extra információ kötelező megjelenítése, az Európai Unió pályázati szabályzatának betartása, stb.)
- Van egyéb egyéni kérésed?
Ha mindez le van tisztázva, jöhet a fentiek alapján a design terv, avagy a layout.
Design
Itt jön a képbe a grafikus, aki hasonlóan rengeteg kérdéssel szolgál az ügyfélnek:
- Ha van már logó, szükségünk lesz rá, ha nincs, mi az elképzelésed?
- Mik a vállalkozásod színei? Ha most indul, milyen színvilágban gondolkozol?
- Teljes képernyős, vagy „dobozos” szerkezetet látnál szívesebben?
- Vannak minőségi (referencia) képeid?
- Mi az a kiemelt termék vagy szolgáltatás, amire nagy hangsúlyt fektessünk vizuális téren is?
Természetesen hozott anyagból is vállalunk weboldal készítést, ha a kész design megüti a mércét.
Szövegek, marketing és SEO
Bármilyen fontos is a design és a funkcionalitás, a weblapok döntő többségében a tartalom minősége, mennyisége és frissítési gyakorisága nagyban hozzájárul a sikerhez. Ha a korábbi oldalad tartalmát kell átültetnünk új köntösbe, vagy már készen vannak az új oldaladhoz tartozó szövegek, akkor ehhez igazítjuk a designt is. Ha viszont csak ekkor derül ki, hogy egy kétsoros szöveg helyére egy kétoldalas monológ kerülne, az nagyban módosíthatja a kinézetet is.
Ha készen is van a szöveg, szakmailag lehet bármilyen tökéletes, ha nem sarkallja az ügyfél vevőkörét vásárlásra, akkor nem biztos, hogy eléri a weboldal a célját. Itt jön be két faktor: a marketing orientált szövegírás, és a SEO (Search Engine Optimization), azaz a keresőoptimalizálás. A marketing szemléletű szövegírás segít a már meglévő szövegek, gondolatok átalakításában, hogy azok jobban vonzzák a tekintetet, megnevettessék, felháborítsák, stb. a leendő vevőket. Bármilyen szomorú is, a klikkvadász, szenzációhajhász címek a mai napig nagy átkattintási arányt mutatnak.
A keresőoptimalizálás inkább azért fontos, hogy a Google is könnyen megértse a szövegek tartalmát. Ide tartoznak a képek helyettesítő szövegei, a szövegekben sűrűn használt kulcsszavak, azok szinonimái, a befelé mutató, a kifelé mutató és az oldalon belüli linkek, a meta adatok és még számtalan más dolog – ezekről hamarosan részletes cikksorozatot fogunk írni.
Ezek sikeres mérésében segítenek az úgynevezett követőkódok, amelyek a felhasználók anonimitását megőrizve adatot gyűjtenek arról, hogyan használják a weblapot. Millió dolgot érdemes figyelemmel követni: az átkattintási (CTR – Click Through Rate) és lepattanási vagy visszafordulási arányt (Bounce Rate), az oldalon töltött időt, hogy milyen forrásból érkezett a legtöbb látogató, stb.
Az oldalon belüli tevékenységet hőtérképpel is érdemes követni, amely megmutatja, melyek azok a helyek a honlapon, ahová sokszor kattintanak a felhasználók. Ezek elemzésével sok érdekes tény látott már napvilágot. Ha egy-egy kiemelt, cselekvésre buzdító szövegrészt többen is linknek értelmeznek korábbi tapasztalataik alapján, akkor érdemes „engedni a nép akaratának”, és hivatkozássá tenni az adott szöveget. Ha egy link vagy gomb nem is jelenik meg szinte a hőtérképen, mint kattintott elem, érdemes azt a linket/gombot áthelyezni az oldalon belül, vagy akár teljes egészében törölni.
A WordPress weboldal felépítésének lépései
WordPress témák és oldalépítők
Ingyenes témák
A WordPress abból a szempontból nagyon rendes, hogy alapvetően 2-3 választható ingyenes témát, más néven sablont is ad a honlaphoz, de valljuk be, ha komolyabb oldalt szeretnél, ennél többre lesz szükséged. Érdemes persze az ingyenes sablonok között is szétnézni, ma már számtalan elérhető közülük. Ilyenek például a Theme Grill és az aThemes sablonjai, de érdemes szétnézni a WordPress Sablon könyvtárban is, ahol funkcióra is lehet szűrni.
Aki ezeket használta már WordPress oldal létrehozása során és elég alaposan megnézte – nem csak asztali böngészővel, hanem legalább 2-3 mobilos böngészővel (ha már itt tartunk, a mobilos Chrome, Safari és még egy böngésző a minimum – ezek kiadják a leggyakoribb hibákat) – szóval, aki elég alaposan megnézi ezeket a sablonokat, az tudhatja, hogy MINDEGYIKBEN VAN HIBA. Mindegyiket finomítani kell, mert amit te szeretnél, az mindig más. Picit hosszabb címet akarsz beírni a címmezőbe, és szétesik az adott blokk, vagy picit más méretarányú képet akarsz a sablon adott helyére tölteni és pont letakarja a fotón levő témát a sablon, stb. Napestig tudnánk sorolni!
Fizetős témák
Hasonlóan részletes keresője van a prémium sablonokat (is) árusító ThemeForest oldalnak is, ahol akár már 2 dollártól lehet sablont vásárolni az oldalunkhoz. A legkedveltebb fizetős sablonok közé tartoznak az ElegantThemes témái, a Divi és az Extra, valamint a ThemeFusion féle Avada. Ezek már viszonylag magas színvonalon elkészített témák, sokkal kevesebb hibával, cserébe kicsit borsosabb áron. Míg az Avada megvásárlásával csak egyetlen weboldalt lehet elkészíteni, addig a Divi és az Extra korlátlan számú weboldalhoz felhasználható.
A prémium sablonok nagy előnye, hogy komoly, élethosszig tartó fejlesztői támogatás jár melléjük, valamint valamilyen oldalépítő is integrálva van bennük. A leggyakoribb a régen Visual Composer néven futó, ma már a WPBakery Page Builder névre hallgató oldalépítő. Az Avada a Fusion Builder-t, a Divi pedig a Divi Builder-t használja.
Mi az utóbbit részesítjük előnyben, ma már WordPress oldalt szinte csak Divi-vel fejlesztünk. Jó alapot szolgáltat bármely elképzeléshez, és széles skálán mozognak a beállítási lehetőségei. A Divi Builder szakaszokkal, azokon belül sorokkal, oszlopokkal és végül modulokkal dolgozik. Minden egyes szakaszt, sort, oszlopot és modult külön-külön, vagy az egyforma típusúakat akár egyszerre is lehet szerkeszteni. Közel minden tulajdonság beállítható: betűtípus, -szín, -méret, elemek távolsága, blokkok, képek szélessége, magassága, melyik modul hova linkeljen, mi történjen, ha az egérmutató a modul fölött van, és még sorolhatnánk. És ami a legszebb benne: a Divi Visual Builder szerkesztőjének segítségével mindezt akár „élőben”, WYSIWYG jelleggel (What You See Is What You Get = azt kapod, amit látsz) is elkészítheted, azaz a szerkesztés eredménye azonnal láthatóvá válik a szerkesztő számára.
Mivel a Divi natívan tartalmazza a Divi Builder oldalépítőt, nem szükséges azt külön bővítményként feltelepíteni. A téma folyamatos frissítése viszont ajánlott, ezért mindig érdemes megadni a megfelelő kulcsokat, hogy automatikusan elérhetőek legyenek számodra a jövőbeli frissítések.
Gyerek témák
Gyakran azonban bármilyen flexibilis is a Divi, vagy más szerkesztők, szükség van egyedi modulok, egyedi design vagy funkcionalitás létrehozására. Rendszerint az egyedi fejléc és lábléc is ebbe a körbe tartozik, akárcsak a belépési oldal új designja, egy foglalási rendszer kialakítása, vagy bármely más egyedi igény megvalósítása.
Ezek zökkenőmentes integrálására alkalmas a child theme, azaz a gyerek téma. Amit ebben a leszármazott témában megvalósítunk, az felülírhatja az alaptéma már meglévő funkcióit, designját, vagy új elemeket adhat ezekhez. Haszna abban rejlik, hogy az alap téma szabadon frissíthető marad, csak a gyerek témát kell időnként frissíteni, hogy az alaptéma újdonságaival együttműködjön. Ezt minden frissítéskor ellenőriznie kell egy webfejlesztőnek, és szükség esetén javítani az újonnan fellépő esetleges inkompatibilitási hibákat.
Pluginek, azaz a beépülő bővítmények
A WordPress jellegzetessége, hogy ami az alap rendszerben nincs benne, azt – legalább részleteiben – megalkották hozzá beépülő modulok, azaz pluginek formájában. Emiatt ugyan kicsit hosszasabb dolog az alaprendszer felállítása, de annál változatosabb lehetőségeket kínál a piac. Rengeteg ingyenes bővítmény van, amik alapfunkciók ellátására ideálisak, de ha bármi különleges elképzelésünk lenne, ahhoz vagy egy másik pluginre, vagy az első fizetős változatra lesz szükségünk.
Pár példa ingyenes bővítményekre
- Kapcsolati űrlap és levélküldés: Contact Form 7,
- feltételes mezők használata: CF7 Conditional Fields,
- az elküldött üzeneteket adatbázisba mentése: Flamingo.
- Hírlevélküldő rendszer integráció:
- MailChimp is könnyen integrálható a CF7 és a WooCommerce használata esetében is,
- SalesAutopilot a legismertebb magyar hírlevélküldő, de
- az általunk fejlesztett Amega X – Interaktív Kommunikációs Szoftver is tökéletes megoldás lehet a hírlevélküldés automatizálására – és beépíthető bővítménnyel is tudunk szolgálni.
- Fordítások: Loco Translate.
- Kétnyelvű oldalak: PolyLang.
- Szövegszerkesztés: TinyMCE Advanced.
- GDPR cookie-sáv: GDPR Cookie Compliance.
- SEO: Yoast SEO.
- Képtömörítés:
- Cache beállítása:
- E-commerce: WooCommece.
Több tízezer ingyenes, és számtalan fizetős bővítmény létezik. A most felsoroltak közül mindegyik ingyenes, de ezek közel sem mindig nyújtanak elegendő lehetőséget. Mi is szembesültünk már olyan kéréssel, amit sem ingyenes, sem fizetős bővítménnyel nem lehetett megoldani, ilyenkor lép be a képbe a webfejlesztő. Van, hogy meglévő pluginhez készítünk kiegészítő bővítményt, van, hogy teljesen nulláról készítünk teljes bővítményt.
A tartalom
Ha az alap (és a gyerek) témát feltelepítettük és konfiguráltuk, beállítottuk az összes szükséges bővítményt, téma beállítást és miegymást, jöhet az oldal lényegi része, azaz a tartalom. Mint korábban említettük, ezt néha készen kapjuk az ügyféltől, néha mi írjuk meg, máskor közös munka eredménye a nyers szöveg. De általában ezt még a marketing szövegírónak és a SEO szakembernek át kell dolgoznia, hogy vevőcsalogató, könnyen érthető és kulcsszógazdag legyen.
A szövegeket be kell tördelni, majd a megfelelő modulokba feltölteni, azokat elrendezni a grafikustól kapott design alapján. Be kell töltenünk a képeket, ki kell töltenünk azok minden fontos adatát, ki kell választanunk a megfelelő képméretet. Szerencsés esetben volt már hasonló felépítésű oldalunk, aminek a sablonját be tudjuk tölteni, ezzel is gyorsítva a munkafolyamatot. Gyakran azonban teljesen a nulláról kell kezdenünk egy-egy oldal felépítését, és majd csak az aloldalnál tudjuk felhasználni a főoldal elemeit.
Tesztelés
Mindezek után persze ellenőrizni kell, hogy az oldal egységet alkot-e, a képek harmonizálnak-e a leírt szöveggel, a tartalom érdekes és információgazdag maradt-e a sok átalakítás után is. Ha minden klappol, mehet az oldal részletes tesztelése.
Minden weboldalt az élesítés előtt alaposan le kell tesztelni mind design, mind használhatóság szempontjából. Ilyenkor gyakran visszatérünk a fejlesztés korábbi lépéseihez. Gyakran a frontend teszt során derül ki, hogy a szöveg szavainak hossza miatt táblagépen és mobilon jelentősen le kell csökkenteni a betűméretet. A cél, hogy semmi se lógjon ki az oldalról, de még olvasható maradjon minden egyes szöveg. Ami asztali gépen még látványos, az mobilon lehet, hogy csak fölösleges helykitöltő, így néha érdemes elrejteni, vagy kisebbre venni egyes képeket is.
A funkcionális teszt során végig kell ellenőriznünk minden egyes folyamatot, legyen szó a linkeken keresztüli barangolásról az oldalon, hírlevél feliratkozásról, üzenet küldésről, vagy akár webshop rendelésről. Az egyedileg beépített funkciókat is újra végig kell ellenőrizni, letesztelni a kimenő leveleket, hogy bekerül-e minden fontos információ az adatbázisba.
Ha a tesztelés során mindent rendben találtunk, a honlap eléd kerül megtekintésre. Bármilyen egyetértés is volt korábban a designnal vagy a funkcionalitással kapcsolatban, ilyenkor mindig kerülnek elő még „jó, jó, de mi lenne, ha…” jellegű, last-minute kérések. Legyen az a gomb mégis piros, kérjük be a regisztráló telefonszámát is, mégis csak regisztrált felhasználók érhessenek el egy jól sikerült tartalmat, és így tovább. Ilyenkor ugyancsak visszalépünk, megvalósítunk, majd újra tesztelünk. Ha minden stimmel a teszt oldalon, és te is rábólintasz, mehet az élesítés.
Élesítés
Az ügyfelek jelentős része jelenleg is rendelkezik honlappal, akik pedig még nem, azok nem akarnak egy félkész oldallal nyitni. Éppen ezért az új WordPress oldalakat teszt oldalunkon készítjük el. Az élesítés folyamán a domain átirányításra kerül, és újraellenőrzünk minden egyes kép- és egyéb hivatkozást, hogy megfelelő erőforrásra vagy oldalra hivatkoznak-e. Egy gyors, ellenőrző funkcionális tesztet is lefuttatunk ilyenkor, hogy minden simán megy-e. Ha készen vagyunk, kapsz hozzáférést az új oldaladhoz, és kezdődhet a móka: tartalomgyártás, hirdetéskezelés, finomhangolás és az új igények megfogalmazása, megvalósítása.
Ekkor kerülnek bele a követőkódok is a weboldalba, hogy a tesztelési folyamat adatai ne torzítsák el a statisztikákat. Mindezt persze a GDPR hatályos rendeletei és a szigorú biztonsági előírások betartásával tesszük, hiszen mindannyiunk érdeke a te és az ügyfeleid adatainak védelme.
Ha úgy érzed, szükséged van segítségre, a weboldal használatára is megtanítunk. Ennek részét képezi egy dokumentáció átadása, amely leírja a honlap használatának menetét, valamint részt vehetsz személyes tréningeken cégünknél.
Segítsünk?
Ha felkeltettük az érdeklődésed, és nem szeretnél egyedül hajózni a WordPress tengerén, keress meg minket a marketing@amega.hu e-mail címen, és beszéljük meg, hogyan tovább!
