Come integrare la libreria Spotlight gallery nel tuo sito WordPress [no plugin]

Introduzione

Oggi vi spiegherò come ho integrato la libreria Spotlight gallery in un sito WordPress, senza alcun plugin, solo grazie al codice (PHP, Javascript/JQuery).

Nota su WordPress

Se stai sviluppando un sito web con WordPress, devi essere in grado di modificare qualsiasi tipo di codice (PHP, HTML/CSS/JS) al fine di evitare un enorme carico di plugin, e la conseguente lentezza del tuo sito web. Ho notato che molte persone si definiscono “sviluppatori WordPress”, ma possono lavorare solo all’interno dell’interfaccia di WordPress. Al di là di questo, sono completamente persi! Database, hosting e codice: c’è una tonnellata di conoscenze da avere prima di poter padroneggiare il web. Nel migliore dei casi, stiamo parlando di uno specialista della piattaforma, non di uno sviluppatore.

Ho recentemente lavorato per un imprenditore che usa WordPress per il suo ecommerce. Questo povero ecommerce è un’istanza di WordPress con un Woocommerce installato sopra. All’inizio, questo progetto è stato costruito da 3 designer, poi da un presunto sistemista… Quando ho preso in carico il progetto, c’era qualcosa come 90 plugin! 90 plugin!!! Non sto scherzando. Il risultato di Google Page Speed mobile era 2 e quello del desktop 11. Ho passato la maggior parte del tempo a rimuovere duplicazioni e spostare codice nel tema figlio.

Purtroppo, questo fa si che gli imprenditori inizino a pensare che chiunque mette mano a WordPress è uno sviluppatore, e che chiunque può farlo. Inoltre, questi imprenditori penseranno che data la scarsa qualità dei lavori precedenti, è giusto pagare poco la prossima persona che si presenta da loro come sviluppatore. Per loro è più importante spendere migliaia di euro in sponsorizzate. Ma il rovesglio della medaglia c’è, eccome: con un sito colabrodo (o che si carica in 30 secondi), loro stanno perdendo i prossimi potenziali clienti. Chi arriva sul vostro sito deve proprio volervi bene per completare un ordine, per cui avoglia spendere migliaia di euro al mese in sponsorizzazioni se poi vengono sprecate.

Quindi, tornando alla gallery: qual è il tuo prossimo passo se vuoi integrare una nuova galleria nella tua istanza di WordPress? Probabilmente cercare un plugin. Poi passare ore a integrare il plugin e a leggere la documentazione (i più attenti), e probabilmente questo finirà per coprire il 70% di quello che vi aspettavate. Per questo motivo, se si padroneggia il linguaggio di programmazione si possono ottenere risultati decisamente migliori.

Cos’è Spotlight

Secondo il suo Github, Spotlight è la libreria di gallerie lightbox più facile da integrare sul web. Super leggero, prestazioni eccezionali, nessuna dipendenza. Tempo fa, cercando una soluzione da implementare su un sito demo per Digital Mastiff, ho optato per questa libreria perché a prima vista era davvero promettente.

Integrare Spotlight in WordPress

Ora sappiamo cos’è Spotlight, ma come possiamo integrarlo nel nostro WordPress? Prima di tutto abbiamo bisogno di enqueue lo stile e lo script della libreria. Spotlight è fondamentalmente una libreria di 2 file: spotlight.min.css e spotlight.min.js. Puoi anche usare il bundle, ma per questo tutorial userò i singoli file.

Quindi, nel tuo tema figlio devi aggiungere l’azione wp_enqueue_scripts, così:

function child_theme_enqueue_styles() 
{
    /* CSS */
    wp_enqueue_style( 'spotlight-css', get_stylesheet_directory_uri() . '/css/spotlight.min.css' );

    /* JS */
    wp_enqueue_script( 'spotlight-js', get_stylesheet_directory_uri() . '/js/spotlight.min.js', array(), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Usiamo lettere minuscole nei nomi delle azioni e delle funzioni (mai camelCase), separando le parole tramite underscore come è stabilito dai PHP Coding Standards

Aggiungi una nuova galleria

Per prima cosa, modifica il post o la pagina dove vuoi aggiungere la galleria di immagini. Nella schermata di modifica del post, clicca sull’icona Aggiungi nuovo blocco (icona +) e seleziona il blocco Galleria. Questo aggiungerà il blocco Galleria al tuo editor di WordPress dove puoi cliccare sul pulsante ‘Upload’ per caricare le foto dal tuo computer o selezionare dalle foto precedentemente caricate nella libreria multimediale. Qui la documentazione.

Aggiungi una classe alle tue immagini

Per attivare lo Spotlight sulle tue immagini, devi aggiungere la classe “spotlight” alle tue immagini. Puoi raggiungere questo obiettivo in due modi: usando PHP o Javascript.

Aggiungere una classe alle tue immagini con PHP

Possiamo ottenere il contenuto della pagina (o del post) usando il filtro di WP the_content, e poi possiamo facilmente aggiungere la nuova classe “spotlight” a tutte le immagini. Il codice è commentato in modo da poter avere le informazioni per ogni riga.
Puoi migliorare la funzione e attivarla solo quando serve.

add_filter( 'the_content', 'add_spotlight_class_to_gallery_image' );

function add_spotlight_class_to_gallery_image( $content ) 
{
    // Get the post object
    global $post;

    // Create a new DOMDocument object
    $doc = new \DOMDocument();

    // Load the content of the post/page
    $doc->loadHTML( $post->post_content );

    // Get all the images and loop over them
    $imgs = $doc->getElementsByTagName( 'img' );
    foreach ($imgs as $img) 
    {
        // Get the current class of the img
        $class = $img->getAttribute( 'class' );

        // Add a new class the the current one
        $img->setAttribute( 'class', $class . ' spotlight' );
    }

    // Save the new post content
    $post->post_content = $doc->saveXml();

    // Return the content 
    return $content;
}

Aggiungere una classe alle immagini con Javascript e JQuery

Più semplice del codice PHP di cui sopra, possiamo aggiungere una nuova classe con Javascript o JQuery. Di seguito:

// Javascript
if( document.querySelector( '.wp-block-gallery' ))
{
    Array.from(document.querySelectorAll( '.wp-block-gallery img' )).forEach(( element,index ) =>
    {

         element.classList.add( 'spotlight' );
    });
}

// JQuery
if( jQuery( '.wp-block-gallery' ).length > 0 )
{
    jQuery( '.wp-block-gallery img' ).addClass( 'spotlight' );
}

E questo è tutto! Apri la pagina della tua galleria con un browser e clicca sulle immagini.

Conclusione

Puoi trovare la libreria Spotlight su Github.
E’ molto semplice da integrare su WordPress o qualsiasi tecnologia tu stia usando per il tuo sito web (sito web PHP statico, viste Laravel/Symfony, ecc). È una libreria frontend in realtà, quindi hai solo bisogno del tuo HTML di base!
E ricorda: una volta che avrai preso confidenza con PHP e Javascript, WordPress non avrà più alcun segreto.

Grazie per il tuo tempo, spero che tu abbia ottenuto qualche nuova informazione su WordPress e Spotlight. Fammi sapere cosa ne pensi di questo articolo attraverso i commenti o mandami un messaggio!

Leggi altro…