eziledger.hu: könyvelőiroda-oldal, ami időpontot foglal az Outlook-naptárba és számol az olvasó helyett

Az ügyfél egy fiatal, online könyvelő- és tanácsadó cég, könyvelést, adótanácsadást és pénzügyi tanácsadást ad fejlődő magyar vállalkozásoknak. Az oldal dolga, hogy a látogató megértse a három szolgáltatást, olvasson a szakmai cikkekből, és egy kattintással időpontot foglaljon egy 30 perces egyeztetésre.

Kiindulásként a domainen egy React-alapú, éles használatban nem lévő váz futott, előtte-utána összevetés ezért nincs, ez egy nulláról épített oldal története. Volt viszont logó és arculat, és a projekt elején elkészült egy 11 oldalas statikus látványterv, amit a WordPress-sablonnak szó szerint követnie kellett.

A szövegek az ügyféltől jöttek több körben, részben már az élő adminban szerkesztve. A tartalmi munkának úgy kellett mennie, hogy az ügyfél kézi módosításait egyetlen feltöltés se írja felül.

• Időpontfoglalás Outlook (Microsoft 365) naptár-szinkronnal, Teams vagy telefon választással, de csak a könyvelő egyetlen postafiókjához adott jogosultsággal.
• A mérést (GA4, Meta-pixel, sütisáv) az ügyfél marketingügynöksége kezeli szerveroldali Tag Managerrel, ehhez a sablon nem nyúlhat.
• Az éles tárhely az ügyfél cPanel-csomagja egyetlen adatbázissal, és minden kép JPEG marad, az ügyfél döntése szerint formátumváltás nélkül.

1. Látványtervből sablon, méréssel igazítva

• A látványterv osztályait és CSS-szakaszait szó szerint vittük át a saját sablonrendszerbe (drew-core 3.0), a design tokenek (színek, betűk, lekerekítések, árnyékok) a Bootstrap-változókat is felülírják.
• Számszerű összemérés: egy saját tesztkörnyezet futó WordPress nélkül, mini shimekkel futtatja a valódi sablonfájlokat, és egy mérőszkript a látványterv és a sablon számított stílusait és geometriáját veti össze 15 oldalpáron, három szélességen (1440, 1100 és 390 px). Csak az eltérések jönnek vissza, az elfogadott eltérések (például az ügyfél kérte plusz űrlapmező) listázva. Ugyanez a mérés az élő oldalon is fut, a fejlesztői és az éles példányon egyaránt.
• Betűk saját tárhelyről (Mona Sans, DM Sans, IBM Plex Mono), előtöltve, a magyar ékezetes karakterkészlettel, a hero kép előtöltve, magas prioritással.

2. Saját sablonrendszer (drew-core), tartalom adminból

• 22 szekciótípus rugalmas tartalomblokkokkal, ebből 13 az EziLedgerre szabott (hero főkönyvi szalaggal, szolgáltatás-kártyák, számok, CTA-sáv, oldal-fejléc, szolgáltatás-sorok, értékek, csapat, folyamat, bloglista, jogi oldal automatikus tartalomjegyzékkel, köszönő üzenet, időpontfoglaló, vélemények). Minden oldal adminból, blokkokból épül.
• 9 oldal, Szolgáltatás tartalomtípus három aloldallal (saját fejléc-legördülővel és lábléc-listával), blog két szakcikkel, GYIK 8 kérdéssel és FAQPage-sémával, jogi oldal, köszönő oldal, Időpontfoglalás oldal. A kezdőlap, a Kapcsolat, a Rólunk és az Időpontfoglalás oldal utolsó szakasza a Google-vélemények, a design szekció-fejlécével.
• Tartalomfeltöltés idempotens, célzott szkriptekkel. A kezdő feltöltés csak az üres helyeket tölti, a későbbi módosítás csak akkor ír, ha a mezőben még a várt régi érték áll, így az ügyfél kézi szerkesztései sértetlenek maradtak.
• 61 commit, 11 funkciómodul, 10 GitHub Actions workflow. A sablon git-verziókezelve, minden szerveroldali művelet verziózott szkriptből, parancssorból indítható workflow-val.

3. Saját időpontfoglaló Microsoft Graph-fal, a projekt magja

• Bővítmény helyett saját, mintegy 1 950 soros mu-plugin. A nagy foglaló-bővítmények nehéz felületet hoztak volna, az ügyfél igénye pedig kicsi és pontos volt.
• A folyamat négy lépés, mód (Teams vagy telefon), nap, 30 perces sáv, adatok, a végén esemény az Outlook-naptárban a foglaló meghívásával, Teams-nél a Microsoft adja a meeting-linket. Visszaigazoló levél a foglalónak, értesítő a cégnek, az Outlook-meghívó automatikusan.
• A szabad sávok a naptár valós foglaltságából jönnek, helyi időben, óraátállítás-biztosan. A naptár szabályai (napok, idősávok, hossz, legkorábbi foglalás, horizont, kizárt napok) adminból állíthatók, a foglalások saját tartalomtípusban, admin-listával.
• Spam- és ütközésvédelem csapda-mezővel, időcsapdával, IP-limittel, e-mailenként legfeljebb két élő foglalással, sáv-zárral, foglalás előtti újraellenőrzéssel és tranzakció-azonosítóval.
• Jogosultság a legszűkebb elven, az alkalmazás egyetlen postafiókhoz fér hozzá, az ügyfél rendszergazdája által futtatott, előre megírt parancsfájllal beállítva. A titkok a tárhely konfigurációjában vannak, sosem az adatbázisban.
• 31 tiszta PHP-teszt a sávgenerátorra (szabályok, legkorábbi foglalás, horizont, óraátállítás, foglaltság-értelmezés), WordPress nélkül futtatva, és demo mód a Microsoft-kapcsolat nélküli fejlesztéshez.

4. Szakcikkek beépített eszközökkel

• Az ügyfél cikkei saját HTML-eszközökkel érkeztek. A sablonba áfa teljesítési dátum kalkulátor és ügyletazonosító került shortcode-ként, az ügyfél logikája változatlanul, a sablon stílusaival. A cikkek 11 beágyazott SVG-ábrát kaptak a médiatárból, görgethető kerettel, kiemelés- és feladat-blokkokkal, automatikus tartalomjegyzékkel és olvasási idővel.
• A kapcsolati űrlap a sablon konfig-vezérelt űrlapmotorján fut (nonce, csapda-mező, időcsapda, IP-limit), a beküldések az adminban, értesítő és visszaigazoló levél tranzakciós SMTP-n, a feladó a hitelesített céges domainről.

5. SEO, séma, vélemények

• Yoast SEO Premium szkriptből beállítva, elválasztó, cégképviselet (Organization, logó), közösségi profilok, archívumok kezelése, sitemap. Minden tartalom (13 indexelt URL) saját SEO-címmel, meta-leírással, fókusz kulcsszóval és közösségi címmel, alapértelmezett megosztási képpel. A sablon a Yoast gráfját bővíti (AccountingService típus, elérhetőségek, profilok) és tartalék meta-leírást ad a bevezetőkből.
• Google-vélemények a Trustindex bővítménnyel, a design szekció-fejlécével, a widget a betöltéstől végleges elrendezéssel, hogy ne ugorjon az oldal.

6. Teljesítmény, akadálymentesség, mérés

• Saját build egy minifikált CSS-sel és JS-sel, szelektív Bootstrap-importtal, WP Rocket gyorsítótárral és fájloptimalizálással.
• Képek formátumváltás nélkül. A WordPress által generált JPEG-méreteket egy saját GitHub Actions workflow mozjpeg-gel kódolja újra pontosan a WordPress méretlistája szerint, és méretellenőrzéssel cseréli (a kezdőlap 35 képfájlja 1 416-ról 632 KiB-re, a mobil hero 24,7-ről 15,6 KiB-re). Bővítmény nélkül, új feltöltés után újrafuttatható.
• Kontraszt WCAG AA fölött. A látványterv két halvány szürkéje (sorszámok, lábléc-címek) mérés alapján sötétebb tokenre cserélve, 4,5:1 fölé, a sütisáv és a vélemény-widget halvány linkjei felülírva.
• A mérés a marketingügynökség Tag Manager-konténerében fut (GA4, Meta-pixel, sütisáv hozzájárulás-kezeléssel), a sablon ehhez nem nyúl, csak a sáv egy linkjének kontrasztját javítja.
• Eredmény a mérés napján asztali 100 / 100 / 100 / 100, mobil 97 / 100 / 100 / 100.

7. Élesítés az ügyfél tárhelyére, parancssorból, visszafordíthatóan

• Két környezet (fejlesztői és éles tárhely), a fejlesztői oldalra minden push automatikusan élesít, az éles csak kézzel indítva. Migrációs workflow a fejlesztői oldalról az ügyfél cPanel-tárhelyére (adatbázis a cPanel API-val létrehozva, címek és útvonalak átírva, élő ellenőrzéssel), mellette mentés-, beállítás-ellenőrző, célzott tartalom- és karbantartó workflow-k. A régi oldal archiválva.
• Az éles beállítások (SMTP, Microsoft-kapcsolat, értesítési cím, a gombok átkötése a foglalóra) is idempotens szkripttel, előbb ellenőrző, aztán író módban, jelentéssel.

Nagyítás

Nagyítás

Nyolc mért kategóriából hét 100 pontos, egy 97, egy olyan oldalon, ahol Google-vélemények, Tag Manager, sütisáv és egy Microsoft-naptárral beszélő foglaló fut. Az oldal a látványtervtől az élesítésig bő egy hónap alatt készült el, a foglaló az élesítés napján kapcsolódott az ügyfél Outlook-naptárához, és az első valódi foglalások napokon belül megérkeztek.