MAURO PAOLINI

Table of Contents

File functions.php

  • Caricamento CSS/JS: Gestisce il caricamento dei file necessari al design. È fondamentale che script come GSAP non vengano caricati mentre stai editando la pagina per evitare conflitti visivi.

  • Cleanup & Performance: Queste funzioni servono a rendere il sito più leggero.

    • use_block_editor_for_post: Disabilita Gutenberg perché stai usando Elementor.

    • wp_dequeue_style: Rimuove fogli di stile che WordPress carica di default ma che non ti servono, riducendo le richieste HTTP.

    • font_display: swap: Migliora la velocità percepita (LCP) dicendo al browser di mostrare un font di sistema finché quello personalizzato non è pronto.

  • Custom Body Classes (Classe Elementor): È una funzione avanzata che crea un nuovo campo “Body classes extra” nelle impostazioni della pagina di Elementor. Ti permette di dare uno stile unico a una specifica pagina tramite CSS senza dover modificare i file PHP.

  • Lazy Loading Control: Di default WP mette il lazy load su tutto. Questa funzione ti permette, widget per widget, di dire “Questa immagine no” (utile per i loghi o le immagini in alto nella pagina, per migliorare il punteggio Core Web Vitals).

  • Multi Post Type Selection: Una “chicca” per chi sviluppa: permette al widget “Post” di Elementor di mostrare contemporaneamente più tipi di contenuto (es. Post e Prodotti) selezionandoli da un menu a tendina.

  • Pulizia Titoli Archivi: Elementor a volte inserisce dei tag <p> o <br> non voluti quando usi i tag dinamici nei titoli. Questa funzione li intercetta e li pulisce al volo.

  • Include esterni: Invece di avere 3000 righe, queste richiamano file specifici per WooCommerce e altre logiche, tenendo il file principale sotto controllo.

Dipendenze file functions.php

ajax-add-to-cart.php

Scopo: Gestisce l’aggiunta al carrello in modalità AJAX (senza ricaricare la pagina), con supporto specifico per il Configuratore di Prodotto.

  • Sanitizzazione dati: Include una funzione (mcafw_ds_sanitize_data) che pulisce i dati inviati dagli utenti (email, URL, testi) per motivi di sicurezza.

  • Logica Frontend (JS): Intercetta il clic sul tasto “Aggiungi al carrello” sia nei prodotti standard che in quelli configurati. Mostra un overlay di caricamento (blockUI) e invia i dati al server.

  • Integrazione Elementor: Dopo l’aggiunta, aggiorna i “frammenti” di WooCommerce (il mini-cart in alto) e forza l’apertura del pannello laterale del carrello di Elementor.

  • Logica Backend (PHP): Riceve i dati serializzati, identifica se si tratta di un prodotto configurato, estrae le informazioni della configurazione (immagini e livelli) e le salva nel carrello di WooCommerce come meta-dati.


gift-in-cart.php

Scopo: Crea un sistema di “Omaggi a scelta” basato su una soglia di spesa nel carrello.

  • Soglia di Eleggibilità: Controlla se il subtotale del carrello supera una cifra stabilita (es. 50€). Se non viene raggiunta, mostra un messaggio informativo con quanto manca.

  • Interfaccia Utente: Mostra una griglia di prodotti omaggio (con immagini e badge) nelle pagine Carrello e Checkout.

  • Automazione Prezzo: Quando un prodotto viene aggiunto tramite questo sistema, il plugin forza il suo prezzo a 0€ e ne blocca la quantità a 1.

  • Persistenza: Si assicura che se l’utente rimuove prodotti e scende sotto la soglia, l’omaggio venga rimosso automaticamente. Salva inoltre l’informazione “Omaggio” nell’ordine finale per l’amministratore e per l’email del cliente.


tracking-link.php

Scopo: Aggiunge un campo personalizzato agli ordini per permettere ai clienti di tracciare la spedizione.

  • Pannello Admin: Aggiunge un campo URL nella sezione “Generale” della modifica ordine in WordPress dove puoi incollare il link del corriere (BRT, GLS, DHL, ecc.).

  • Area Clienti (My Account): Aggiunge un tasto “Traccia ordine” nella lista ordini e un tasto specifico nella pagina di dettaglio dell’ordine.

  • Email: Include automaticamente il link di tracciamento nelle email che vengono inviate al cliente quando l’ordine cambia stato.


woo-custom.php

Architettura del Catalogo (Separazione Collezioni/Opere)

Questa sezione trasforma la pagina del negozio standard in una galleria curata.

  • Gestione Hook: Rimuove il comportamento nativo di WooCommerce che mescola categorie e prodotti.

  • Sezioni Distinte: Crea due “contenitori” HTML separati. Il primo mostra le sottocategorie (le tue Collezioni) con un sottotitolo poetico, il secondo mostra i prodotti (le Opere) solo se effettivamente presenti.

  • UX: Migliora la navigazione, permettendo all’utente di scegliere prima il “mondo” (collezione) e poi il singolo pezzo.

Personalizzazione Testi ed Esperienza Emozionale

Qui il codice smette di essere solo funzionale e diventa parte del branding.

  • Micro-copy: Sostituisce termini freddi come “Prodotti correlati” con “Opere in dialogo” e “In offerta” con “Promo”.

  • Storytelling del vuoto: Anche il carrello vuoto comunica la filosofia del sito, invitando alla calma e all’esplorazione guidata dal Sole.

  • Pezzi Unici: Una funzione controlla la quantità in magazzino: se resta un solo esemplare, l’etichetta cambia in “Pezzo unico”, aumentando il valore percepito dell’opera.

Logica Transazionale e Regole di Pagamento

Questo blocco gestisce la sicurezza e i costi accessori durante l’acquisto.

  • Gestione Indirizzi: Semplifica il modulo di checkout invertendo o rinominando i campi per renderli più chiari all’utente italiano (es. esplicitando il Numero Civico).

  • Contrassegno (COD): * Applica una commissione di 10€ (moltiplicata per quantità) se l’utente sceglie di pagare alla consegna.

    • Protezione Rischio: Disabilita automaticamente il contrassegno per ordini superiori a 500€, obbligando l’uso di metodi tracciabili e sicuri per importi elevati.

  • Visual Review: Aggiunge le miniature delle opere nel riepilogo dell’ordine per ridurre gli errori di acquisto.

Strumenti di Navigazione (Shortcode)

Funzioni avanzate richiamabili tramite Elementor o editor di testo.

  • Descrizione Dinamica: Lo shortcode permette di mostrare automaticamente la descrizione di un attributo (es. la storia di una dimensione o di un materiale) solo quando l’utente lo seleziona nei filtri.

  • Reset Intelligente: Un tasto di “Reset” che appare magicamente solo quando ci sono filtri attivi, permettendo di pulire la ricerca con un clic.

Algoritmo dei Prodotti Correlati

  • Pertinenza: Forza WooCommerce a mostrare come “correlati” solo prodotti che appartengono alla stessa categoria del prodotto che si sta guardando.

  • Design: Limita il numero a 3 elementi, garantendo una visualizzazione pulita e bilanciata su desktop e mobile.

Motore di Traduzione Globale

  • Centralizzazione: Invece di avere mille funzioni sparse, un unico “dizionario” intercetta le stringhe di WooCommerce ed Elementor.

  • Coerenza: Assicura che in tutto il sito (carrello laterale, pagina carrello, checkout) i pulsanti abbiano lo stesso linguaggio (es. “Procedi alla scelta” invece di “Pagamento”).

Mauro Arte Plugin

Gestione Portfolio (class-mapl-cpt-opera.php)

Questa classe crea l’entità “Opera”. È progettata per essere un archivio storico delle creazioni.

  • Interfaccia Professionale: Utilizza l’icona dashicons-art (la tavolozza) nel menu di WordPress, separando nettamente le opere dai semplici articoli.

  • Dati Tecnici Su Misura: La Metabox “Dettagli Opera” organizza l’anno, la tecnica e i materiali in una griglia ordinata. L’uso di wp_editor per le note del curatore permette di formattare il testo (grassetti, liste) come se fosse un vero catalogo.

  • Galleria Avanzata (Drag & Drop): Implementato un sistema di gestione immagini che permette di ordinare le foto semplicemente trascinandole. Questo è fondamentale per decidere quale dettaglio dell’opera mostrare per primo.

  • Integrazione Elementor: La funzione elementor/query/opera_tax_archive  assicura che quando un utente clicca su una tipologia (es. “Sculture”), Elementor mostri esattamente le opere di quella categoria, pulite e senza interferenze.


Gestione Eventi e Mostre (class-mapl-post-eventi-fields.php)

Questa classe potenzia i normali articoli del blog, ma solo quando servono davvero.

  • Campi “Intelligenti”: Grazie al codice JavaScript admin_scripts, i campi della data e della location appaiono solo se è selezionata la categoria “Eventi”. Questo mantiene l’interfaccia pulita quando si scrive un post normale.

  • Logica del Tempo (Futuri vs Passati): Hai creato due query specifiche per Elementor:

    • mapl_eventi_futuri: Mostra solo le mostre in corso o imminenti (ordine cronologico).

    • mapl_eventi_passati: Sposta automaticamente le mostre concluse in un archivio separato (ordine inverso).

  • Lo Shortcode Intelligente : Invece di mostrare date brutte (es. 2026-04-26), il codice “scrive” in italiano corretto:

    • Se dura un giorno: 21 Agosto 2026.

    • Se è nello stesso mese: 21–28 Agosto 2026.

    • Se cambia mese/anno: gestisce perfettamente la spaziatura e i nomi dei mesi.

Personalizzazione Opere (class-mapl-product-fields.php)

Questa classe aggiunge una sezione nel pannello di controllo di ogni prodotto per gestire le richieste su misura.

  • Tab “Personalizzazione”: Appare direttamente nella scheda prodotto di WooCommerce, integrandosi perfettamente nell’interfaccia standard.

  • Matrice di Opzioni (5 Righe): Invece di un campo testo libero, ho creato una griglia strutturata per definire:

    1. Tipo: Cosa può cambiare (es. “Colore dei raggi”, “Finitura base”).

    2. Sovrapprezzo: Costo extra (es. “+€50”) o indicazione “Da concordare”.

    3. Tempo: Quanto incide sulla consegna (es. “+10 giorni”).

  • Note per il Cliente: Un’area dedicata per inserire istruzioni specifiche o limiti tecnici alla personalizzazione, visualizzabile nella scheda prodotto tramite Elementor o shortcode.


Il Motore Narrativo (class-mapl-taxonomy-storytelling.php)

Crea una nuova gerarchia chiamata Storytelling, che serve a collegare i prodotti a un “racconto” o a una “filosofia”.

  • Tassonomia Custom: Funziona come le categorie, ma è dedicata alla narrazione artistica.

  • Meta-dati Narrativi: Ogni termine dello Storytelling (es. “Il Ciclo del Sole”) ha campi extra:

    • Micro-intro: Un breve testo per la pagina di archivio (es. per il sottotitolo).

    • Micro-frase: Una “pillola” di testo che appare automaticamente sulla scheda del singolo prodotto per ricordarne il legame narrativo.

  • Filtri Dinamici: Lo shortcode storytelling_filters crea un menu di navigazione laterale che permette agli utenti di esplorare le opere in base alla storia che raccontano, non solo alla loro forma fisica.


Toolkit di Shortcode Pronti all’Uso

Ho creato un set di “etichette magiche” da usare in Elementor per mostrare questi dati:

Shortcode
Cosa visualizza
Dove usarlo
micro_intro_categoria
Il breve testo introduttivo della storia
Header della pagina categoria
storytelling_description
La descrizione lunga della storia
Pagina categoria Storytelling
micro_frase_prodotto
La frase poetica legata all'opera
Scheda prodotto (sotto il prezzo/titolo)
storytelling_filters
Lista di link a tutte le storie
Sidebar del Negozio

Il Cuore del Sistema: elementor-init.php

Questo file funge da direttore d’orchestra.

  • Sicurezza: Verifica che Elementor sia attivo prima di procedere.

  • Organizzazione: Crea un gruppo dedicato nel pannello Elementor denominato “Opera – Mauro Arte” per tenere separati i tuoi tag da quelli standard.

  • Caricamento Dinamico: Include automaticamente tutti i file dei tag contenuti nella sottocartella /dynamic-tags/, effettuando un controllo preventivo sull’esistenza dei file per evitare errori fatali.

  • Registrazione: Inizializza ogni classe (Tag) rendendola disponibile nei widget di Elementor (es. Intestazioni, Gallerie, Pulsanti).


La Base Comune: class-mapl-tag-base.php

È una classe astratta che serve a non ripetere codice inutile.

  • Fornisce il metodo get_meta() per recuperare i dati dal database in modo centralizzato.

  • Assegna automaticamente tutti i tag derivati al gruppo “Opera – Mauro Arte”.


Gestione Eventi (Text, Gallery, URL)

Questi file gestiscono i dati specifici della categoria Eventi:

  • class-mapl-tag-evento.php: Permette di mostrare Data Inizio, Fine, Location e Indirizzo. Include una funzione format_date_it() che trasforma le date del database (YYYY-MM-DD) in un formato umano italiano (es. 8 Ottobre 2021).

  • class-mapl-tag-evento-gallery.php: Permette di collegare la galleria immagini dell’evento ai widget “Galleria” di Elementor.

  • class-mapl-tag-evento-url.php: Gestisce specificamente l’URL di Google Maps come categoria URL, permettendo di rendere cliccabili icone o pulsanti.


Gestione Opere e Prodotti WooCommerce

Questi tag sono ottimizzati per le pagine prodotto e le opere d’arte:

  • class-mapl-tag-text.php: Estrae i dati curatoriali come Anno, Tecnica e Materiali. Gestisce le Note del Curatore supportando la formattazione HTML (wpautop).

  • class-mapl-tag-gallery.php: Collega la galleria specifica dell’Opera (diversa da quella degli eventi).

  • class-mapl-tag-product-text.php: Gestisce i singoli campi delle personalizzazioni (fino a 5) e le note per il cliente nei prodotti.

  • class-mapl-tag-product-personalizzazioni.php: È un tag “intelligente”. Invece di un singolo valore, genera automaticamente una lista HTML (<ul>) che riassume tutte le opzioni di personalizzazione disponibili per quel prodotto (tipo, sovrapprezzo e tempi), nascondendo i campi vuoti.

Stili CSS

portfolio-page.css: L’Estetica Museale

Questo file è progettato per dare alle pagine delle opere un aspetto editoriale e raffinato.

  • Tipografia a Contrasto: Utilizza il font serif EB Garamond per i titoli, richiamando lo stile dei cataloghi d’arte, contrapposto al sans-serif Source Sans 3 per le informazioni tecniche.

  • Scale Fluide: Implementa la funzione clamp() per i titoli (es. h1). Questo permette al testo di ridimensionarsi armoniosamente tra desktop e mobile senza salti bruschi di dimensione.

  • Gerarchia Visiva: Definisce stili specifici per i “Meta info” (anno, tecnica) usando il maiuscolo e una spaziatura tra le lettere (letter-spacing) accentuata per differenziarli dal testo narrativo.

  • Layout “Narrow”: Include una classe .section--narrow (max 900px) ideale per mantenere la leggibilità dei testi lunghi, evitando che le righe diventino troppo ampie sui grandi schermi.


shop-page.css: E-commerce Editoriale

Questo file personalizza l’esperienza di acquisto su WooCommerce, cercando un equilibrio tra funzionalità e pulizia visiva.

  • UI Dinamica: Include una logica intelligente per mostrare o nascondere i campi di “personalizzazione” in base alla categoria del prodotto (.product_cat-personalizzazioni).

  • Personalizzazione Bottoni: Il tasto “Aggiungi al carrello” è trasformato in un elemento elegante: bordo sottile, sfondo trasparente che si riempie all’hover e angoli arrotondati (pill-shaped).

  • Griglia Prodotti Mobile: Contiene un’importante ottimizzazione per smartphone che forza una griglia a due colonne e standardizza le altezze delle immagini (aspect-ratio: 1/1) per evitare disallineamenti.

  • Dettagli di Design: Introduce un “trattino editoriale” () tra titolo e prezzo nella griglia prodotti e trasforma il badge “In Offerta” in un ribbon diagonale (nastro) posizionato nell’angolo della foto.

  • Scheda Tecnica Pulita: Rimuove i bordi pesanti di default di WooCommerce dalle tabelle dei dettagli prodotto, optando per un layout a righe minimali.


style.css: Struttura e Micro-interazioni

È il file principale del Child Theme e gestisce l’infrastruttura globale del sito.

  • Transizioni di Pagina: Gestisce un overlay (.page-transition) che copre lo schermo durante il caricamento, creando un effetto di continuità tra le pagine.

  • Supporto Animazioni (GSAP): Prepara il sito per animazioni avanzate (fade, scale, reveal) ottimizzando le prestazioni tramite will-change (che allerta il browser del movimento imminente) e gestisce la conformità per chi ha impostato “riduzione movimento” nel sistema operativo.

  • Cursore Personalizzato: Implementa un sistema a due elementi (un punto centrale e un anello esterno) che reagisce dinamicamente quando l’utente passa sopra bottoni o link.

  • Scrollbar Custom: Personalizza la barra di scorrimento laterale rendendola quasi invisibile di default e colorandola solo quando l’utente sta effettivamente scorrendo la pagina (html.is-scrolling).


Sintesi delle differenze cromatiche

AmbienteBackgroundColore Testo Principale
Portfolio#F3EDE4 (Crema caldo)#1E2A38 (Blu scuro/Antracite)
Shop#F8F4EE (Quasi bianco)#1E2A38 (Coerente col brand)
Accento Shop#B84F3A (Color Mattone per i prezzi)