Cabana Rareș — o pensiune la 1700 m, prezentată ca un reportaj de călătorie

O pensiune de trei stele la 1700 m, pe Transalpina, prezentată ca un reportaj de călătorie, nu ca un formular de rezervare. Tot site-ul se citește ca un singur material de revistă — kicker-uri cu liniuță de aramă, cifre-fantomă, citate cu chenar dublu, titluri cu efect letterpress care urcă în hero — construit pe full-site editing nativ din WordPress, fără page-buildere, fără pluginuri care să ducă greul, cu patru tipuri de conținut custom care țin muntele în pagină.

Gazda răspunde personal la telefon. Site-ul trebuia să sune la fel.

Provocarea

Site-urile de pensiuni și cabane făcute pe WordPress seamănă între ele până la confuzie: o temă luată de pe un marketplace, un build în Elementor cu șapte pluginuri care se calcă pe picioare, o poză stock în hero care ar putea fi orice cabană, de oriunde. Nimic din toate astea nu te convinge să dai al doilea click. Și nimic nu sună ca oamenii care chiar se ocupă de locul ăla.

Cabana Rareș avea nevoie de exact opusul: un site care se deschide cu ninsoarea de la cabană, care pornește de la un loc anume („aproape de Pârtia M1, departe de agitație”) și care îi dă oaspetelui destul context — despre drum iarna, despre Transalpina vara, despre cele șapte camere — ca să se poată hotărî înainte să pună mâna pe telefon. Un site pe care gazda îl trimite liniștită drept răspuns la „unde sunteți, exact?”.

01 · Hero-ul

Abordarea

FSE nativ, cap-coadă. Publicarea se face direct din editorul de blocuri al WordPress 6.7 — și am refuzat orice scurtătură de page-builder. Sistemul de design stă în theme.json (culori, scară tipografică, spațieri, fluid type, layout, motion), iar fiecare pattern, template și block style folosește aceleași token-uri. Niciun hex hardcodat nicăieri în temă: paleta se poate schimba de la un sezon la altul fără să umbli în CSS.

Conținutul stă în patru custom post types — room, slope, trail, attraction — fiecare cu propriile reguli de rewrite, taxonomii, schema.org JSON-LD și template single dedicat. Se editează din admin-ul WordPress; de randare se ocupă biblioteca de pattern-uri a temei. Fără drag-and-drop, fără shortcode-uri, fără biblioteci de blocuri third-party.

Soluția

Un sistem de design editorial complet, plus ingineria WordPress din spatele lui.

Limbaj vizual

• Titlurile, în Cormorant Garamond (font variabil, self-hosted). Textul curent, în Plus Jakarta Sans (la fel) — cu diacriticele ă â î ș ț verificate peste tot.
• Un vocabular de accente editoriale: kicker cu liniuță de aramă, title-dot de 10 px după fiecare titlu mare, citate cu chenar dublu, cifre-fantomă de peste 200 px, ca filigran de secțiune.
• Titluri care urcă letterpress în hero — cuvintele intră pe rând, cu un decalaj de 35–55 ms: întâi kicker-ul, la final creditul imaginii. prefers-reduced-motion reduce totul la un fade simplu.
• Fațadă click-to-embed pentru video — fiecare clip de YouTube apare ca thumbnail static cu buton de play, iar iframe-ul se încarcă abia la click. Zero iframe-uri la încărcarea paginii.

Arhitectura informației

• 35 de pagini editoriale, scrise de la zero, cu structură pe capitole pentru materialele lungi (Drumul de iarnă spre Rânca, Transalpina traseu complet).
• 4 tipuri de conținut custom și 23 de pagini single, randate automat dintr-un singur template pe tip.
• Bară laterală sticky cu capitolele, pe materialele lungi (de la 3 capitole în sus), pe bază de IntersectionObserver — capitolul activ primește o linie aurie pe stânga.
• Structură bilingvă — româna e live, engleza e gata de pornit prin Polylang; i18n-ul e deja pus la punct, chiar dacă deocamdată e publicată doar româna.

02 · Pagina camerei

Inginerie ca la carte

• Seedere în mu-plugin — fiecare pagină, cameră, pârtie, traseu și atracție există în cod, ca conținut versionat. Un seeder rulat de două ori dă același rezultat (idempotent). Nimic de întreținut manual în wp-admin.
• Schema.org JSON-LD pe fiecare pagină (Organization, LocalBusiness, BreadcrumbList, Accommodation pentru fiecare cameră, TouristTrip pentru fiecare traseu).
• Endpoint-uri REST proprii pentru formularul de contact — nonce, honeypot, rate limit, sanitizare la intrare, escape la afișare.
• Buget de performanță respectat din prima zi — fonturi variabile self-hosted, CSS încărcat condiționat, per pattern, lazy-loading pentru imaginile de sub fold, width/height explicite pe fiecare <img>: contribuție zero la CLS.

Trei momente-cheie

Hero-ul

Trei rânduri de litere serif urcă peste o fotografie a cabanei la apus, iarna — fiecare rând intră decalat, pe același easing ca ninsoarea din spate. Deasupra, numărul de telefon stă într-o bară utilitară translucidă. Site-ul își anunță tonul din prima secundă: pagină de revistă, nu rezultat de căutare.

Narațiunea pe capitole

Pagina despre drumul de iarnă de la Novaci spre Rânca se citește ca un eseu de călătorie — kicker, numărul capitolului mărit la 200 px, ca cifră-fantomă, iar textul curge în jurul unui citat cu chenar dublu de aramă. Pe desktop, o bară sticky cu capitolele coboară pe marginea din stânga; un IntersectionObserver schimbă capitolul activ pe măsură ce derulezi. Nimic din toate astea nu cere vreun plugin, iar pe mobil totul se strânge elegant într-o bară orizontală de chip-uri.

03 · Registrul editorial

Cele patru tipuri de conținut

Camere, pârtii, trasee, atracții — fiecare e un custom post type cu propriul layout de coloane în admin, propria taxonomie, propriul template single și propria structură JSON-LD. O pârtie nouă înseamnă un singur bloc de cod în seeder; front-end-ul o preia automat, cu breadcrumbs, schema, conținut înrudit și același limbaj editorial ca tot restul site-ului.

04 · Semnătura

Stack-ul tehnic

WordPress 6.7+ FSE   PHP 8.2   theme.json   Cormorant Garamond + Plus Jakarta Sans (self-hosted)
Custom block theme   mu-plugin seeders   4 custom post types   Polylang-ready
Schema.org JSON-LD   Native search       facade click-to-embed YouTube
Mobile-first 360 px primary   Self-hosted assets only   Fără page-buildere

Rezultatul

Site-ul e live la cabanarares.ro, scris în vocea gazdei și deținut integral de client — token-urile de design, seederele de conținut, tipurile de conținut custom, totul stă într-o singură temă block de sine stătătoare, pe care orice dezvoltator o poate citi și duce mai departe. O cameră nouă înseamnă cinci rânduri de cod. Culoarea de brand se schimbă dintr-un singur rând. Fără dashboard de agenție, fără abonament lunar, fără vreun plugin care moare când îi expiră licența.

Codul e al tău. Site-ul se deschide ca un reportaj de călătorie, primește cereri ca o cabană de munte și rulează ca un site static.

cabanarares.ro →