Aggiungere un datepicker a Divi senza plugin con 9 righe di codice

scritto da Denali

il 3 Giugno 2024

Divi, sviluppato da Elegant Themes, è riconosciuto non solo per la sua flessibilità e facilità d’uso, ma anche per la sua capacità di essere esteso tramite plugin. Questa caratteristica lo rende una scelta ideale per utenti che desiderano aggiungere funzionalità specifiche e personalizzate ai loro siti web. Vediamo più in dettaglio come Divi si presta all’estensibilità tramite plugin.

Estensibilità e Modularità di Divi

  1. Architettura Modulabile: Divi è progettato con un’architettura modulare, che consente l’integrazione facile e senza soluzione di continuità dei plugin. Ogni componente di Divi può essere esteso o modificato senza interferire con le altre parti del tema.
  2. Compatibilità con Plugin WordPress: Essendo basato su WordPress, Divi è compatibile con la vasta gamma di plugin disponibili nella directory di WordPress. Ciò significa che è possibile aggiungere funzionalità di terze parti senza problemi di compatibilità.
  3. Divi Builder API: Elegant Themes ha reso disponibile una API per il Divi Builder, permettendo agli sviluppatori di creare plugin che si integrano direttamente con il costruttore visivo di Divi. Questo facilita la creazione di moduli personalizzati, estensioni e altre funzionalità aggiuntive.

Non sempre è necessario l’uso di Plugin per estendere le funzionalità di Divi

Ad esempio una delle funzionalità più richieste, e semplici da realizzare (con appunto 9 righe di codice) consiste nell’estendere il modulo Form Builder di Divi per aggiungere un campo DatePicker.
Per farlo potete procedere come segue:

    1. All’interno del vostro tema child (non usate un tema child? Molto male. Guardate qui come lo si crea in modo semplice) nel file functions.php aggiungete lo script flatpickr

      -- divi-child/functions.php
      [...]
      function flatpicker_enqueue() {
            wp_enqueue_script( 'flatpickerjs', 'https://cdn.jsdelivr.net/npm/flatpickr', array( 'jquery'));
            wp_enqueue_script( 'flatpicker-activated', get_stylesheet_directory_uri() . '/js/datetimepicker/jquery.datetimepicker-activated.js', array( 'jquery'));
            wp_enqueue_style( 'flatpickercss', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css', false, '1.0', 'all' ); // Inside a child theme
      }
      add_action( 'wp_enqueue_scripts', 'flatpicker_enqueue');
      [...]
    2. A questo punto dovrete semplicemente associare il campo del form di Divi con la classe flatpickr instanziata sopra, in questo modo:
      -- divi-child/js/datepicker/jquery.datetimepicker-activated.js
      jQuery( document ).ready(function() {
                jQuery("#et_pb_contact_datetimepicker_0").flatpickr({enableTime: true,dateFormat: "Y-m-d H:i"});
      });
    3. Dove #et_pb_contact_datetimepicker_0 è l’id del campo a cui volete associare questa funzionalità
    4. Salvando i file e rinavigando ora la pagina del vostro Form, vedrete che il DatePicker sarà online regolarmente

Il risultato finale che otterrete sarà un DatePicker a costo zero, che si presenterà in questo modo:

 

Ci auguriamo che questo piccolo tutorial sia di vostra utilità, e vi ricordiamo che WordPress in tutte le sue versioni è modalità, è completamente supportato sia dal nostro piano di hosting professionale che dal nostro piano hosting fast. Con entrambi è disponibile la modalità di staging (one-click nel caso di hosting fast) e con cache LiteSpeed inclusa con ogni pacchetto hosting fast.

Articoli Correlati

Rimani in contatto con noi e chiedici tutto quello che vuoi.

Guadagna con Noi

Scopri tutti i dettagli di affiliazione e rivendita. Con possibilità di guadagno dal 10% al 50%.

Ti servono informazioni sui nostri servizi?

 

Seguici

E rimani aggiornato in tempo reale

Stay in touch with us and ask us anything you want.

Earn with Us

Find out all the details of affiliation and resale. With earning possibilities from 10% to 50%.

Need information about our services?

 

Follows Us

And stay updated in real time