Mostanában mindenki arról beszél, hogy az AI 10 perc alatt megcsinál egy weboldalt. Én nem beszélni akarok róla, hanem megmutatni, hogyan néz ki ez a valóságban: egy teljes ügyfélprojekten keresztül, amit Novamirával építettem újra WordPress + Bricks alapon. Minden technikai buktatóval és „ez sem úgy lett” pillanattal együtt.
Ez nem egy felületes bemutató. Ez a tényleges munka: mit tud a Novamira, hol gyorsít órákat, hol kellett izzadni vele, és mi az a tudás, amitől a vége tényleg jó lesz.
A történet: statikus oldalból WordPress + Bricks
A projekt egy fogtechnikai labor oldala volt – a dentallabbyblush.com (B2B, fogorvosoknak, Houston). Az első verzió egy statikus weboldal volt (sima HTML/CSS/JS), Netlify-ra kirakva. Gyors, szép, olcsó – egy baja van: az ügyfél nem tudja szerkeszteni. Egy új blogposzthoz vagy árváltozáshoz mindig fejlesztő kell.
Ezért döntöttünk úgy, hogy az egészet újraépítjük WordPress + Bricks Builder alapon – úgy, hogy a látvány ugyanaz maradjon, de mögötte egy szerkeszthető rendszer legyen. És itt jött be a Novamira: a teljes újraépítést vele csináltam, azaz párbeszédből, AI-val szerkesztettem magát a WordPress oldalt. A statikus verzió volt a „forrás igazsága” (a copy szó szerint, színek és méretek pontosan), a Bricks pedig a cél.
Mi az a Novamira és a Novamira Pro?
THE Novamira egy WordPress-eszköz, ami egy MCP-hídon keresztül összeköti az AI-asszisztenst (nálam a Claude-ot) a weboldaladdal. Így az AI nem csak tanácsot ad, hanem tényleg módosítja az oldalt: szerkeszt Bricks szekciókat, sablonokat, fejlécet-láblécet, SEO-t, schema-t, űrlapokat.
THE Novamira Pro a fejlesztői szintű változat: a háttérben egy execute-php képességgel az AI pontos, kiszámítható változtatásokat hajt végre a WordPressen belül. Fontos látni: a Novamira nem egy „nyomd meg és kész” generátor. Egy eszköz egy szakember kezében – és pont ettől működik.
Hogyan kötöttem be (és miért akadnak el sokan)
Mielőtt bármit szerkesztenél, a Novamira MCP-t be kell kötni az AI-kliensbe. Ez a rész buktatta a legtöbb időt, pedig apróság:
- npx hiba Windowson. A csatlakozás
npx-szel indul, ami WindowsonEINVALhibával elszállt – a megoldás ashell: truekapcsoló volt a futtatásnál. - Rossz mappa. THE
.mcp.jsonkonfig elsőre egy almappába került, holott a projekt gyökere a szülőmappa volt – ezért nem töltődött be. A konfignak a projekt gyökerébe kell kerülnie. - Az „újraindítottam”, ami nem történt meg. Az MCP csak teljes újraindításkor töltődik – nem elég az ablakot bezárni. Ez a klasszikus emberi hibapont.
A bekötés után a Novamira egy szűk, de erős készlettel dolgozik – a lényeg az execute-php, amivel az AI bármit ki tud olvasni és be tud írni a WordPressben, kiszámíthatóan.
Hogyan dolgozom vele a gyakorlatban
A módszer mindig ugyanaz: először kiolvasni, aztán írni, majd élesben ellenőrizni. Nem az adatbázisban „hiszem”, hogy jó – a Novamira lerendereli az oldalt és a tényleges kimenetet nézi (szín, betűvastagság, videó állapota, computed style). Ezért nem csúszik át hiba a „kész”-en.
A technikai buktatók, amikkel menet közben találkoztam
Ezek nem elméleti dolgok – ezek tényleg előjöttek egy oldal újraépítése közben. Ha valaki ezeket nem ismeri, az oldala „majdnem jó” lesz.
1. Bricks szerializáció – a wp_slash nélkül elromlik
A Bricks a tartalmat szerializált tömbben tárolja (_bricks_page_content_2). Aki a nyers stringen str_replace-el, az tönkreteszi, mert a szerializáció hossz-előtagjai elcsúsznak. A helyes út: kiolvasni, tömbként módosítani, majd update_post_meta-val, wp_slash-sel visszaírni. A wp_slash kötelező, különben a WordPress lenyeli a backslasheket.
2. Kép torzul – mert nincs figure wrapper
A Bricks a kép elemet csupasz <img>-ként rendeli, wrapper nélkül. Ezért az object-fit a wrapperre nem fog – magára az elemre kell tenni. Nálam 9 kép torzult el, mire ez kiderült.
3. Konténerek alapból flex-start-ok
A Bricks konténer alapból nem nyútja ki a tartalmat (align-items: flex-start). Emiatt csúszott el egy csomó szekció (before/after csúszka, marquee, ár-rács). Megoldás: explicit flex + stretch – de az align-items csak akkor hat, ha van explicit display is.
4. A wpautop üres bekezdéseket szúr be
WordPress wpautop funkciója felesleges, üres <p>-ket rak a rich text köré. Ez például egy térkép iframe magasságát 150px-re nyomta össze (a height:100% összeomlott). Biztonsági háló: p:empty { display: none }, a térképnél pedig abszolút pozicionálás.
5. Mobil videó nem indul – a Bricks lazy-loadol
A Bricks a self-hosted videókat lazy-loadolja: a forrás a data-src-ben van (nem src), és egy bricks-lazy-hidden class el is rejti. A saját un-lazy megbízhatatlan. Megoldás egy globális JS-sel: data-src → src, class le, plusz iOS-hez muted + playsinline, és egy #t=0.1 töredék, hogy ne fekete legyen az első kocka mobilon.
6. Dupla Open Graph tagek
A Bricks a saját SEO és OG tagjeit is kiküldi az SEO-plugin (SeoPress) mellé – így az og:title, og:description, og:image kétszer jelent meg a posztoknál. Megoldás: a Bricksben disableSeo + disableOpenGraph, hogy egy forrás legyen.
7. reCAPTCHA „Invalid site key” – pedig a kulcs jó volt
A Bricks mindig beszúr egy rejtett .recaptcha-error fallback dobozt. Az oldal saját .form-group { display:flex } szabálya nagyobb specificitással un-hide-olta. Nem a kulccsal volt baj – a dobozt kellett explicit elrejteni.
8. Font-size nélküli címsorok
Ha egy címsoron nincs explicit font-size, a böngésző alapértelmezett ~24px-en rendereli. Nem szabad feltételezni, hogy a Bricks méretezi – a forrás szándékát kell reprodukálni.
9. Schema izolált sandbox PHP-fájlból
A BlogPosting és FAQPage schema-t külön Novamira sandbox PHP-fájlok adják, amelyek a wp_head-re csatlakoznak. A FAQ schema dinamikusan a front oldalról olvassa a kérdéseket, így szinkronban marad a szöveggel. (Figyelem: egy syntax hiba bármelyik sandbox fájlban safe-mode-ba dobja mindet, ezért írás előtt mindig syntax-check.)
10. Dinamikus blog – query loop és a jó tagek
A statikus blog-kártyák egyike egy kukázott posztra mutatott. Átalakítottam query loopra (legfrissebb 3, orderby date DESC). Tanulság a tagekről: a kártya-linkhez https://orkenyi.hu/en/novamira/ kell (a {permalink} nem regisztrált), a dátumhoz July 2026, a kategória-szűréshez pedig saját mező, mert a csak archívumban működik.
Bónusz: a Bricksnél cssLoading: inline mellett a meta-módosítások azonnal renderelnek, nem kell CSS-cache-t regenerálni.
A tanulságos sztori: miért nézett ki rosszul az oldal iPhone 7-en?
Ez a kedvencem, mert tökéletesen mutatja, miért kell tapasztalat az AI mellé.
Az egész színrendszer egy modern CSS funkciót (color-mix()) használt. Nagyszerű dolog – kivéve, hogy a régebbi telefonok (pl. iPhone 7, iOS 15 = Safari 15) nem értik. Nem hibaüzenetet adnak, hanem csendben eldobják a színt. Az ügyfél telefonján ezért rossz színekkel jelent meg az oldal, miközben minden más eszközön tökéletes volt. (Érdekesség: a clamp() viszont megy Safari 15-ön, ezért csak a színek estek szét, a méretek nem.)
A megoldás: kb. 150 helyen kellett átírni a színeket egy régi böngészőkön is működő formára (rgba() – a transzparens tint matematikailag azonos), majd ellenőrizni, hogy 0 maradt. Egy AI-generátor ezt soha nem vette volna észre. Ehhez tudni kell, hogy az ügyfél iPhone 7-en nézi, és tudni kell, mit tud egy 2015-ös Safari.
A logó, ami négy nekifutásba telt
Hogy ne tűnjek túl magabiztosnak: a fejléc logó vitte a legtöbb kört. Világos szekción rózsaszín „BLUSH” kellett, sötéten fehér – de betöltéskor mégis feketén jött be, scrollra meg jó volt. A lánc: (1) egy filter: invert fehérre festette a rózsaszínt; (2) helyette külön reversed logó kellett; (3) a logó elem valójában a link volt, nem a kép (a kép a gyereke); (4) a szinkron-JS a srcset-strip előtt futott, ezért töltött feketén. Csak több diagnózis után állt össze. Ez a valóság: néha egy logó is küzdelem.
Amiben a Novamira brutálisan gyors
Nem akarom lebeszélni róla senkit – vannak dolgok, amiket órákkal gyorsabban old meg, mint egy ember kézzel:
- Tömeges módosítás. Az említett ~150 color-mix cserét egyetlen biztonságos menetben elvégezte, minden oldalon. Egész oldalakat rakott össze egyben (egy oldal ~190 elemből).
- Élő ellenőrzés. A renderelt oldalt nézte: háttérszín, betűvastagság, videó
readyState, mobil túlcsordulás – mind lemérve. - Űrlapok végigtesztelése. Élesben beküldte a form-ot, ellenőrizte, hogy megjött-e a levél és bekerült-e a DB-be.
- Kép- és videóoptimalizálás. A videókat ~45 MB-ról ~16 MB-ra tömörítette. Erről külön is írtam: képek optimalizálása.
- Alapok másodpercek alatt. 18 globális változó (színek, radius, layout), Theme Style, 38 média-asset a könyvtárba, globális fejléc és lábléc sablon.
SEO és schema
A SEO-t végig a SeoPress kezeli, a Bricks saját SEO/OG kimenete kikapcsolva (lásd fentebb a dupla OG-t). A schema három szinten épült: Organization (nem LocalBusiness, mert a labor a klinikával osztja a NAP-ot), BlogPosting and FAQPage – az utóbbi kettő a már említett sandbox fájlokból, dinamikusan.
Űrlapok, ahogy működnie kell
A Bricks űrlap egyszerre e-mailt küld és ment az adatbázisba (a save-submission akcióval), így ha egy levél spambe menne, az adat akkor sem vész el. reCAPTCHA v3 a robotok ellen, és a fájlfeltöltés csatolmányként érkezik. Apróság, de a legtöbb konverzió pont az űrlapon múlik – ezért teszteltem élesben.
Az őszinte rész: ez nem egy gomb
Egy weboldal nem egy prompt. Rengeteg döntés, visszajelzés és finomítás, amit valakinek irányítania kell. Pár példa ugyanebből a projektből: építettünk egy Instagram-galériát, aztán visszaraktuk a régit; hero jelvényeket hozzáadtunk, majd kivettünk; a videó-lejátszást kétszer alakítottuk át, mire jó lett. És volt az a pillanat, amikor a Novamira nem volt elég precíz: nem olvasta végig a forrás CSS-t, ezért egy szekció rossz színnel és túl vastag betűvel készült. Szóltam, kijavította. Ez teljesen normális – és pont ezért kell mögé a szakember.
Élesítés előtt: amire minden oldalnál figyelek
A technikai résznél is fontosabb, hogy az oldal élesben is állja a sarat. Amit a launch előtt mindig ellenőrzök:
- Űrlap-kézbesítés (SMTP). A WordPress alap
mail()gyakran spambe megy vagy elvész. Ha a bevétel az űrlapon múlik, az SMTP beállítása launch-blokkoló – és valódi postafiókba tesztelek. - Bricks kód-futtatás. A Bricks PHP-futtatása (code execution) biztonsági felület – élesben ki kell kapcsolni, ha nincs rá szükség.
- Kijelentkezve ellenőrzés. Bejelentkezve mást látsz (admin sáv, analytics), mint egy látogató – a valódi nézetet inkognitóban nézem meg.
- Mobil. Nincs vízszintes görgetés, olvasható szöveg, elérhető gombok minden oldalon.
- Copy is law. A szöveg szó szerint a jóváhagyott változat – és gondolatjel (em/en dash) sehol.
Novamira vs. hagyományos szerkesztés
| Hagyományos | Novamira | |
|---|---|---|
| Módosítás | kézzel, kattintgatva | elmondod, ő megcsinálja |
| Tömeges javítás (pl. 150 szín) | órák | egy menetben |
| Ellenőrzés | manuális | élő, automatikus |
| Kell szakember? | igen | igen (ez nem változik) |
Kinek való a Novamira?
Neked, ha WordPress + Bricks oldalt építesz vagy tartasz karban, és gyorsítanád a munkát – de értesz is annyira a webhez, hogy észrevedd, ha valami nem stimmel. Nem neked való, ha azt várod, hogy egy gombnyomásra kész, hibátlan oldalad legyen szakmai tudás nélkül.
Frequently asked questions
Mi az a Novamira?
WordPress-eszköz, ami MCP-hídon köti össze az AI-t a weboldaladdal, így az AI közvetlenül szerkeszti az oldalt (Bricks, SEO, schema, űrlapok).
Mi a különbség a Novamira és a Novamira Pro között?
A Pro a fejlesztői szintű változat, execute-php-vel, a mélyebb, pontos módosításokhoz.
Jó a Novamira Bricks Builderhez?
Igen, kifejezetten. A Bricks szerializált adatait közvetlenül kezeli, így egész szekciókat és sablonokat is épít és módosít.
Kiváltja a Novamira a webfejlesztőt?
Nem. Felgyorsítja a munkát, de a fenti technikai buktatók miatt a stratégiát és a minőséget továbbra is szakember biztosítja.
Mennyivel gyorsabb vele a munka?
A rutinfeladatoknál (tömeges cserék, ellenőrzés, optimalizálás) jelentősen – de az átgondolás és a finomhangolás ideje marad.
Zárás
A Novamira az egyik legmodernebb módja ma a WordPress + Bricks szerkesztésnek: gyors, és valódi kontrollt ad. De ahogy a fenti buktatók mutatják, az eszköz csak annyit ér, amennyit a kéz, ami fogja.
Ha olyan weboldalt szeretnél, ami modern eszközökkel, de szakértő kézzel készül, nézd meg a munkáimat vagy kérj egy ajánlatot. Kapcsolódó olvasmány: AI weboldal készítés 2026 and Bricks 2.0.
Örkényi Károly vagyok, weboldalkészítő és webdesigner, 5+ év tapasztalattal. Napi szinten építek WordPress + Bricks oldalakat AI-eszközökkel, mint a Novamira.
