Design WordPress

Context

Design WordPress nu este un singur site, ci o colecție de patru teme WordPress build de la zero (sau ca child theme), fiecare gândită pentru o organizație diferită, dar unite de aceleași principii: accesibilitate pentru persoane cu deficiențe de vedere, performanță pe servere modeste și zero dependențe de page builders.

Fiecare temă este construită pe măsura organizației — de la o școală cu sute de elevi la o asociație care operează o bibliotecă digitală națională. Toate împărtășesc un nucleu comun de decizii de design pe care le documentez mai jos.

Principii comune de design

• Accesibilitatea nu este un layer — ci fundamentul. Fiecare componentă este construită cu WCAG 2.1 AA ca minim, nu ca țintă.
• Dimensiunea de bază a textului: 18px — pentru lizibilitate pe ecran, indiferent de acuitatea vizuală.
• Ținte tactile de minim 44×44px — butoane, linkuri, controale; fără excepții.
• Culori definite în OKLCH — palete care rămân armonioase indiferent de modul de afișare (dark mode, contrast ridicat).
• Fără page builders — fiecare pixel este controlat prin CSS propriu, nu printr-un constructor vizual.
• Gutenberg sau câmpuri personalizate — unde e nevoie de flexibilitate, se folosește ACF sau blocuri custom, nu shortcodes proprietare.
• Server self-hostat — toate site-urile rulează pe același VPS, fără abonamente SaaS, fără surprize de facturare.

---

ANR Cluj — anrcluj.ro

Asociația Nevăzătorilor din România, Filiala Județeană Cluj. Un site de prezentare care include și un magazin WooCommerce pentru cotizații, donații și produse digitale. → anrcluj.ro

Arhitectură și tehnologii

Temă standalone, migrată de pe Flatsome (page builder plătit). Fără părinte, fără framework CSS — CSS pur cu proprietăți custom, organizat pe componente. WooCommerce cu template-uri override complet custom: arhivă, produs, coș, checkout, mulțumire, cont utilizator.

Paletă multi-alegere

Nouă palete de culori și 8 accente, selectabile din Customizer. Culori definite nativ în oklch() — fiecare paletă are un raport de contrast calculat manual, nu aproximat. Paletele disponibile: Ocean, Forest, Lavender, Teal Pastel, Coral, Slate & Mint, Amber, Terracotta și Prune (activă). Accentele: Gold, Copper, Citrine, Coral, Pink, Mint, Turquoise, Violet. Utilizatorul poate schimba întreaga identitate vizuală cu două clickuri, fără să atingă CSS.

Tipografie

Fonturile Google Lora (serif pentru heading-uri) și Nunito (sans-serif pentru corp). Scară tipografică completă: de la 11px (xs) la 58px (hero fluid). Controale de dimensiune a fontului (A−/A/A+) în bara de accesibilitate, persistate în localStorage.

Sistem de layout și componente

Lățime maximă 1200px, padding container 28px (16px mobil). Spațiere verticală între secțiuni: 84px (52px mobil). Butoane în formă de pastilă (--r-pill: 100px) cu 4 variante (primary, outline, ghost, white) și 3 dimensiuni (sm, lg, xl). Carduri pentru știri, blog orizontal, produse și rezultate căutare. Header sticky cu logo stânga, navigare centru, căutare și coș dreapta. Hamburger mobil cu drawer slide-in și focus trap.

Accesibilitate

Bară de accesibilitate deasupra headerului cu linkuri sociale, email, telefon și controale font size. Skip link primul element focusabil. Roluri landmark (role="banner", role="main", role="navigation", role="contentinfo"). Navigare cu aria-haspopup și aria-expanded pe dropdown-uri prin custom nav walker (ANR_Nav_Walker). Focus trap în meniul mobil și modale (aria-modal="true" + role="dialog"). Focus visible: 3px solid var(--accent) cu offset. Toate imaginile fără alt text primesc placeholder SVG descriptiv automat. Formulare cu etichete vizibile, aria-required, aria-live="polite" pentru mesaje de status. Breadcrumbs custom cu aria-current="page". Imagini default pentru WooCommerce products fără imagine.

WooCommerce adaptat

Coș de cumpărături cu numărătoare AJAX în header (fragment refresh). Template-uri complet override: arhivă produse, produs singular, coș, checkout, pagină mulțumire, cont utilizator. Produse cu preț personalizat („Name your price“ pentru donații) — câmp de preț custom cu validare și integrare în coș. Monedă RON cu simbolul „lei“, TVA 19% inclus. Netopia Payments integrat pentru plată. Cantitate în coș actualizată live via AJAX. Stilizare custom pentru badge-uri, rating cu stele, buton ATC. Toate stilurile WooCommerce default eliminate.

Admin

Pagină de administrare pentru parteneri (Settings > Parteneri) cu drag-and-drop repeater și upload de logo prin Media Library. Shortcodes stub pentru compatibilitate cu conținut vechi Flatsome ([row], [col], [title], [gap], [ux_banner], [ux_slider] etc.).

Securitate și performanță

Versiunea WordPress eliminată din URL-uri. Scripturi emoji dezactivate. XML-RPC dezactivat. Link REST API eliminat din <head>. defer pe accessibility.js.

---

TIFLO — tiflo.ro

Fundația TIFLO — organizație care promovează accesibilitatea digitală și fizică pentru persoane cu deficiențe de vedere. → tiflo.ro

Arhitectură

Child theme pe Kadence (temă gratuită, >= 1.4.5). Nu suprascrie niciun fișier template — doar CSS și hooks. Fără build toolchain: PHP vanilla, JS vanilla, CSS vanilla. Modular: functions.php încarcă 5 include-uri în ordine: setup.php → enqueue.php → accessibility.php → customizer.php → seo.php. 12 pagini de referință HTML statice în /pages/, folosite ca ghid de autorat Gutenberg.

CSS (4 fișiere focusate)

1. typography.css — system font stack (zero CLS, diacritice native), bază 18px/1.6, variabile --tiflo-*
2. layout.css — override-uri blocuri Gutenberg, butoane 44×44px min, grilă responsive, accesibility bar styling
3. components.css — stiluri component-specifice
4. accessibility.css — focus rings, skip-link, .sr-only, cele 3 moduri de contrast, print styles, prefers-reduced-motion

Paletă definită în theme.json v2

Sloturi semantice: tiflo-violet, tiflo-violet-dark, tiflo-gold, tiflo-text, tiflo-white, tiflo-bg-alt. Variabile CSS declarate în typography.css, sincronizate cu theme.json pentru Gutenberg.

Contrast la alegere în trei moduri

Caracteristica centrală: un toggle cu trei stări — normal, galben-pe-negru (raport 19.56:1), alb-pe-negru (21:1). Scriptul bootstrap citește localStorage înainte de primul paint — zero FOUC. Se activează automat la prefers-contrast: more. Anunță schimbarea prin aria-live="polite". Scriptul vanilla ES5 (js/contrast-toggle.js, ~2KB) cică [data-contrast] pe <html>. Setări în Customizer pentru vizibilitatea butonului per breakpoint (desktop, tabletă, mobil) și poziție (4 colțuri per breakpoint).

Tipografie fără web fonts

Zero încărcare de fonturi externe — doar system font stack. Fără CLS, fără cereri HTTP suplimentare, diacriticele românești funcționează nativ. Dimensiune de bază: 18px, line-height 1.6, lățime maximă ~70 de caractere. Toate linkurile din corp subliniate permanent (WCAG 1.4.1).

Accesibilitate (WCAG 2.2 AA/AAA)

Auditat: 23/23 Level A, 17/20 Level AA. Focus visible: 3px violet + 6px white halo pe toate elementele interactive. Trei moduri de contrast. Toate elementele interactive: minim 44×44px (WCAG 2.5.5 AAA). Linkuri externe: rel="noopener noreferrer", indicator vizual + adnotare screen reader, procesate cu WP_HTML_Tag_Processor. Skip link: „Sari la conținutul principal“ (tradus Kadence via gettext filter). ARIA redundant eliminat: <main role="main"> curățat via JS. Footer: aria-label, role="navigation". Viewport: user-scalable=no și minimum-scale=1 eliminate. prefers-reduced-motion respectat. Fără cookie-uri, fără analytics, zero dependențe JS externe. Print styles optimizate (ascunde nav/footer, expune URL-urile linkurilor).

Customizer

Panou de accesibilitate cu setări buton contrast: activat/dezactivat per breakpoint, poziție (4 colțuri per breakpoint). CSS injectat inline pe baza valorilor din Customizer.

SEO

Cutie SEO personalizată pentru pagini cu sugestii în limba română per slug. Output: meta description, meta keywords, Open Graph tags, Twitter cards. Fallback la sugestii bazate pe slug când câmpurile sunt goale.

Zero plugins dependency

Niciun plugin obligatoriu. Tema face totul singură: contrast toggle, SEO meta box, external link marking, optimizări de performance și securitate. Singurul „plugin“ este Kadence însuși, ca părinte.

Gutenberg

Exclusiv Gutenberg editor (fără page builders). Stiluri pentru toate blocurile native: Heading, Paragraph, List, Image, Columns, Group, Buttons, Cover, Media & Text, Quote, Separator, Table, Code.

---

Pontes ONG — pontes.ro

Asociația Pontes — cea mai mare bibliotecă digitală în limba română pentru persoane cu deficiențe de vedere. Site complex cu 8 tipuri de conținut personalizat. → pontes.ro

Arhitectură

Temă standalone, fără părinte. Cerințe: WP 6.0+, PHP 8.0+. Șase plugin-uri custom în wp-content/plugins/:

• pontes-accessibility-suite — toolbar accesibilitate, toggle mod citire
• pontes-games — funcționalitate jocuri accesibile
• pontes-irimia — concurs de ortografie Irimia (fetch din baza de date legacy)
• pontes-podcast — episoade podcast cu capitole (fetch din baza de date legacy)
• pontes-services — funcționalitate servicii
• pontes-software — unelte software/TTS

Peste 10 page templates: accesibilitate, braille, category-posts, confidențialitate, contact, fonoteca, Irimia, podcast, sitemap, TTS comparator.

Paletă și dark mode

Verde-brand (#3d6600) și portocaliu accent (#e06c00). Griuri neutre calde. Suport complet pentru dark mode printr-un fișier dark-mode.css separat, activat prin clasă pe <html>. Variabile CSS pentru culori, tipografie, spațiere, umbre.

Tipografie

Fontul Google Inter (toate greutățile 400–700). Scară tipografică completă cu variante de line-height.

8 tipuri de conținut personalizat

1. Podcast episodes — episoade cu capitol markers, transcriere, sezon, explicit flag
2. Jocuri accesibile — cu taxonomii categorie_joc și platforma_joc
3. Tutoriale HTML — cu nivel de dificultate, versiune software
4. Voci TTS — cu producător, status, mostre audio (repeater ACF)
5. Ediții Irimia — concurs de ortografie, date, participanți (repeater)
6. Cărți audio — bibliotecă audio
7. Piese de teatru — teatru radiofonic
8. Programe accesibile — cu taxonomie categorie_program

Fiecare cu câmpuri ACF proprii definite în PHP via acf_add_local_field_group: fișier audio, durată, transcriere, nivel de dificultate, compatibilitate cu screen reader-e, etc.

Shortcodes

• [irimia_editions] / [irimia_edition nr="N"] / [irimia_winners] — date concurs Irimia
• [pontes_player id="N"] — player audio cu capitole, urmărire vizualizări și descărcări
• [podcast_list limit="N"] — listă episoade podcast
• [pontes_tts_comparator speed="1" status="activ"] — comparator voci TTS
• [pontes_reading_mode_toggle] — toggle mod citire

Player audio accesibil

Player complet controlabil cu tastatura: Space = play/pause, săgeți stânga/dreapta = skip, săgeți sus/jos = volum, M = mute. Progress bar controlabil. Suport pentru capitole cu markers. Urmărire vizualizări și descărcări per episod.

Accesibilitate (WCAG 2.1 AA/AAA)

Fișiere accessibility.css și accessibility.js dedicate. Checklist cuprinzător de testare cu NVDA, JAWS, VoiceOver, TalkBack. Submeniuri keyboard-traversabile cu pattern ARIA disclosure complet. Player audio: comenzi tastatură documentate. Mod de citire: ascunde sidebarul și elementele decorative, limitează lățimea textului. Skip link, landmark roles, heading hierarchy corectă. Contrast: primary #1a3a6b pe alb ~10:1, accent #e06c00 pentru elemente non-text. Butoane minim 44×44px. prefers-reduced-motion respectat. Efecte sonore pentru interacțiuni UI (click.mp3, expand.mp3, collapse.mp3).

Funcționalități suplimentare

Logo SVG inline cu manipulare clasă/atribut. Galerie cu lightbox fullscreen (CSS + JS). Print styles. Share buttons CSS. Urmărire vizualizări postări. Meta tag-uri Open Graph. Suport upload SVG. Redirect-uri URL pentru URL-uri legacy .php.

---

LSDV — ldv.ro

Liceul Special pentru Deficiență de Vedere Cluj-Napoca. Cel mai vechi liceu de acest profil din România (fondat 1900). → ldv.ro

Arhitectură

Temă standalone („LSDV Școala“), fără părinte. Cerințe: WP 6.0+, PHP 7.2+. CSS pur într-un fișier principal (assets/css/main.css). Fără framework CSS. Editor style matching front-end.

6 tipuri de conținut personalizat

1. anunt (Anunțuri) — arhivă /anunturi/
2. eveniment (Evenimente) — arhivă /evenimente/
3. document (Documente) — PDF-uri cu metadate, taxonomie tip_document
4. proiect (Proiecte) — cu taxonomie tip_proiect
5. galerie (Galerii) — cu taxonomie tip_galerie
6. legatura (Linkuri) — resurse externe

Taxonomie sectiune ierarhică, atașată la post + anunt + eveniment.

10 page templates

front-page.php, page-contact.php (formular wp_mail() + nonce + OpenStreetMap embed), page-braille.php, page-documente.php (arhivă filtrabilă pe tip/an), page-galerie.php, page-legaturi.php, page-proiecte.php, page-revista.php, page-servicii.php (layout tabbed), page-with-subpages.php.

Paletă pentru low-vision

Cărămidă închis (#6D2200) și chihlimbar (#C87800) pe fundal crem cald (#FFF8F0). Contrast calculat pentru vedere scăzută, nu doar pentru conformare WCAG. Textul corpului: #1A0800 pe #FFF8F0 — raport de contrast > 13:1. Culori definite în variabile CSS semantice: --color-primary, --color-primary-dark, --color-primary-light, --color-secondary, --color-bg, --color-text, --color-text-muted.

Font de bază 18px

La fel ca la toate site-urile, dar aici impus ca minim absolut: niciun text sub 18px. Heading-uri cu Montserrat (600–800), corp cu Open Sans (400–600). Fonturile Google sunt self-hosted.

Customizer complet

Panou „Informații Școală“ în Customizer cu secțiuni pentru:

• Contact — telefon, email, adresă, program
• Social — Facebook, Instagram, YouTube URL-uri
• Hero — titlu (cu <span> decorativ), subtitlu
• Hartă — latitudine, longitudine (OpenStreetMap)
• Statistici — număr elevi, profesori, absolvenți (unul calculat automat)
• Galerie — selectează ce galerie apare pe homepage, câte poze (3-8)
• Facebook Feed — Page ID, Page Access Token, număr postări (3-9)

Toate setările au etichete și descrieri în limba română.

Integrare Facebook Feed

Fără plugin — fetch direct prin Graph API v22.0. Rezultate cache în WP transient (2 ore). Cache invalidat la salvarea Customizerului. Număr de postări configurabil (3-9).

Blocuri Gutenberg custom

• PDF embed (lsdv/pdf-embed) — folosește Google Docs Viewer cu fallback de descărcare, markup accesibil, înălțime configurabilă
• Legătură card (lsdv/legatura-card) — card pentru resurse externe cu icon, titlu, descriere, buton „Accesează“

Shortcodes

• [pdf url="..." title="..." height="600"] — PDF viewer inline accesibil

Widget custom

LSDV_Yearly_Archives_Widget — arhivă anuală.

Accesibilitate (WCAG 2.1 AA, AAA unde fezabil)

Non-negotiable — școală pentru elevi cu deficiențe de vedere. Contrast text corp ≥ 7:1 pe fundal, elemente interactive ≥ 4.5:1. Focus visible: 3px solid --color-secondary + glow shadow, niciodată suprimat. 18px bază, niciun text sub 16px. Toate elementele interactive: minim 44×44px. Toate linkurile din corp subliniate (suprimate doar în nav/butoane unde rolul e clar vizual). Toate câmpurile de formular au <label>, iconițe aria-hidden="true" cu text adiacent. Toate imaginile au alt text relevant. HTML semantic: <main>, <nav>, <header>, <footer>, <article>, <section>, un <h1> per pagină. Nicio informație transmisă doar prin culoare. Accesibilitate completă cu tastatura. prefers-reduced-motion: reduce respectat. Skip link, breadcrumbs, page hero accesibil.

Funcționalități suplimentare

Breadcrumbs custom cu etichete în română. Timp estimat de citire în română. Smart subpage excerpt (handling pentru ul/ol, dl, plain text). Logo custom (80×200, flexibil). Post thumbnail cu fallback emoji placeholder. Hero image cu background image și gradient fallback. Meta description via excerpt. Open Graph tags. Configurare SMTP pentru Google Workspace relay (fără auth, IP-authorised). Defer pe main JS. Securitate: WP version eliminat, XML-RPC dezactivat. Emoji scripts dezactivate. Fără page builders. Fără Google Maps API — OpenStreetMap embeds.

Plan de migrare

Documentație DEPLOYMENT_PLAN.md care acoperă 10 faze: de la popularea Customizerului la migrarea a 400+ articole de știri (2008–2026) prin WP All Import, încărcarea documentelor PDF organizate pe taxonomii, maparea redirect-urilor pentru URL-urile legacy .php, crearea a ~35 de pagini WordPress cu arborele complet al site-ului, structura de meniuri (primar + 2 footer), și auditul final de accesibilitate.