Come aggiungere il widget di prenotazione Schedito a WordPress
Non serve un plugin WordPress specifico per Schedito. Configura il calendario di prenotazione in Schedito, apri il codice del widget e aggiungi a WordPress i tre elementi dell'integrazione: il foglio di stile condiviso, il JavaScript condiviso e il contenitore specifico del calendario.
Questa guida utilizza l'editor a blocchi nativo di WordPress. Lo stesso principio vale anche per page builder che offrono elementi HTML, embed o funzionalità globali per codice personalizzato.
Prima di aprire WordPress
Un calendario Schedito funzionante
Configura servizi, risorse e disponibilità che vuoi rendere prenotabili ai visitatori WordPress prima di pubblicare il widget.
Accesso alla modifica di WordPress
Devi poter modificare la pagina e, se CSS o JavaScript devono essere aggiunti a livello di sito, avere accesso a un metodo appropriato per la gestione del codice frontend.
Il codice widget Schedito
Apri il codice del widget nel pannello Schedito. Schedito fornisce tre elementi separati da copiare: link CSS, script JavaScript e contenitore HTML specifico del calendario.
1. Copia i tre elementi dell'integrazione Schedito
Apri nel pannello Schedito il codice del calendario che vuoi pubblicare. L'integrazione viene presentata intenzionalmente come tre elementi separati:
Link CSS — carica lo stile del widget.
Script JavaScript — carica e inizializza le funzionalità di prenotazione.
Contenitore widget — identifica organizzazione e calendario pubblico e definisce il punto in cui deve apparire l'interfaccia.
Mantieni separati questi tre elementi. CSS e JavaScript normalmente devono essere caricati una sola volta, mentre puoi inserire uno o più contenitori specifici dei calendari nei punti in cui devono apparire le prenotazioni.
I tre elementi in Schedito
1. Link CSS
Carica una sola volta
2. Script JavaScript
Carica una sola volta
3. DIV del widget
Inserisci dove deve apparire il calendario
2. Inserisci il DIV del widget in un blocco HTML personalizzato
Apri la pagina WordPress nella quale vuoi permettere ai clienti di prenotare, per esempio Prenota, Appuntamenti, Contatti oppure una pagina dedicata a uno specifico servizio.
Aggiungi un blocco HTML personalizzato. Puoi anche digitare /html in un nuovo blocco.
Dal pannello Schedito copia soltanto il contenitore HTML del widget e incollalo nel blocco. È l'elemento specifico del calendario che contiene valori come data-organization-id e data-calendar-public-id.
Non duplicare link CSS e script JavaScript Schedito dentro ogni blocco. Aggiungili separatamente come risorse frontend condivise.
3. Carica CSS e JavaScript Schedito una sola volta
Torna al codice del widget nel pannello Schedito e copia gli altri due elementi: il <link> CSS e lo <script> JavaScript.
Sono risorse frontend condivise. Normalmente devono essere caricate una sola volta nella pagina o, più spesso, nelle pagine del sito in cui Schedito può essere utilizzato. Non ripeterle per ogni calendario.
Se WordPress o il tuo page builder dispone di una funzione globale per il codice personalizzato, può essere un punto appropriato per questi elementi. In un tema WordPress gestito da uno sviluppatore, le risorse corrispondenti possono invece essere caricate tramite il normale sistema frontend di enqueue di WordPress.
Più calendari Schedito sullo stesso sito possono condividere gli stessi CSS e JavaScript. Ogni calendario necessita soltanto del proprio <div>.
Struttura WordPress consigliata
Link CSS — una volta
Script JavaScript — una volta
Blocco HTML personalizzato
DIV Schedito specifico del calendario
Una nota su permessi WordPress e JavaScript
Le versioni recenti di WordPress permettono contenuto HTML personalizzato nell'editor a blocchi, ma JavaScript e altro markup potenzialmente non sicuro dipendono dai permessi dell'utente. WordPress può rimuovere contenuto non consentito quando la pagina viene salvata da un utente senza le autorizzazioni necessarie.
Con Schedito normalmente non è necessario inserire tutto nello stesso blocco. Mantieni il DIV specifico del calendario nella pagina e carica CSS e JavaScript condivisi una sola volta tramite un meccanismo appropriato a livello di sito.
Se uno script o un foglio di stile scompare dopo il salvataggio, non continuare a reinserirlo nella pagina. Controlla i permessi WordPress e utilizza il metodo previsto dal sito per caricare risorse frontend.
4. Pubblica e prova come un cliente
Una pagina corretta nell'editor non è sufficiente. Verifica il frontend, la disponibilità e l'invio della prenotazione.
Apri la pagina pubblica
Prova il frontend pubblicato, non soltanto l'anteprima dell'editor. Verifica che Schedito venga caricato per un normale visitatore.
Completa una prenotazione
Scegli servizio, data e orario e completa una vera prenotazione di prova. Verifica poi il risultato in Schedito.
Controlla il layout responsive
Prova desktop e mobile e verifica che il tema WordPress non limiti, nasconda o deformi il widget.
Risoluzione problemi del widget WordPress
Controlla separatamente i tre elementi dell'integrazione. Verifica prima che il DIV Schedito sia presente e contenga gli identificatori corretti di organizzazione e calendario pubblico. Poi controlla che CSS e JavaScript Schedito siano effettivamente caricati nella pagina pubblica.
Utilizza gli strumenti sviluppatore del browser per individuare richieste CSS o JavaScript fallite, errori JavaScript, restrizioni di sicurezza o markup modificato da WordPress o da altri plugin.
Se WordPress elimina il DIV stesso, controlla markup e permessi. Se elimina uno script o altro markup eseguibile, normalmente si tratta di sanitizzazione o di una limitazione dei permessi.
La configurazione Schedito consigliata evita di incorporare ripetutamente questi script nel contenuto: mantieni il DIV nella pagina e carica CSS e JavaScript condivisi una sola volta con il metodo frontend previsto dal sito.
L'integrazione WordPress probabilmente funziona. Controlla Schedito: servizio, risorse richieste, disponibilità ricorrente, eccezioni per date specifiche, prenotazioni esistenti, capacità e impegni nei calendari esterni collegati.
Controlla larghezza, overflow, padding e regole di layout del blocco o contenitore WordPress padre. Evita di inserire l'interfaccia in una colonna inutilmente stretta o a larghezza fissa.
Se il widget funziona correttamente al di fuori di quel contenitore, il problema è probabilmente nel CSS del layout WordPress circostante.
Usa la configurazione di stile Schedito per scegliere una modalità chiara o scura adeguata e modificare colori e proprietà supportate.
Controlla inoltre se il tema WordPress applica regole CSS troppo generiche a pulsanti, form o altri elementi dell'interfaccia.
Dopo modifiche al markup o alle risorse frontend, svuota le cache WordPress, CDN e browser coinvolte. Funzioni di ottimizzazione o caricamento ritardato del JavaScript possono interferire con codice frontend esterno: escludi le risorse Schedito se impediscono loro di funzionare correttamente.
WordPress è soltanto il livello di presentazione
Quando il widget funziona, continua a gestire servizi, disponibilità, sincronizzazione calendari, capacità e stile in Schedito invece di ricreare quelle regole in WordPress.
Inizia gratisPanoramica WordPress
Tutte le guide Schedito · Personalizzazione widget · Sincronizzazione Google Calendar