Modificare la gallery di WordPress rendendola responsive con Magnific Popup – Marchetti Design

Modificare la gallery di WordPress rendendola responsive con Magnific Popup

By Andrea Marchetti
Mag 2013

Modificare la gallery di WordPress rendendola responsive con Magnific Popup

La settimana scorsa abbiamo parlato di Magnific Popup, plug-in jquery per gallery responsive. Oggi vedremo come integrare il plug-in con wordpress, modificando il codice che viene creato dal CMS per visualizzare le gallery.

Come prima cosa scarichiamo Magnific Popup, scompattiamo lo zip e copiamo i file magnific-popup.css e jquery.magnific-popup.js dalla cratella dist alla cartella del nostro tema WordPress.

Header

Successivamente richiamiamo nell’header del nostro tema wordpress lo stile:


<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_directory’); ?>/magnific-popup.css">

bloginfo(‘stylesheet_directory’) è il template tag di wordpress che inserisce il percorso della cartella del nostro tema.

Footer

Richiamiamo jquery e i file javascript necessari nel footer di wordpress:


<!– jQuery –>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
window.jQuery || document.write(‘<script src="js/libs/jquery-1.7.min.js">\x3C/script>’)
// ]]></script>

<!– Magnific Popup core JS file –>
<script type="text/javascript" src="<?php bloginfo(‘stylesheet_directory’); ?>/jquery.magnific-popup.js"></script>

Ora prima di inizializzare il plug-in dobbiamo modificare il codice html generato da wordpress nelle gallerie. Di default wordpress utilizza una struttura per le gallery di questo tipo:

HTML

<div class="gallery">
<dl>
<dt><a title=""><img class="attachment-thumbnail" alt="" width="150" height="150" /></a></dt>
</dl>
<dl>
<dt><a title=""><img class="attachment-thumbnail" alt="" width="150" height="150" /></a></dt>
</dl>
<dl>
<dt><a title=""><img class="attachment-thumbnail" alt="" width="150" height="150" /></a></dt>
</dl>
</div>

Functions.php

Andreamo a rimuovere gli elementi dl e dt, lasciando solo il div .gallery con all’interno i link a con le immagini ottenendo una struttura di questo tipo:

HTML


<div class="gallery">
<a title=""><img class="attachment-thumbnail" alt="" width="150" height="150" /></a>

<a title=""><img class="attachment-thumbnail" alt="" width="150" height="150" /></a>

<a title=""><img class="attachment-thumbnail" alt="" width="150" height="150" /></a>
</div>

Per farlo inseriamo il seguente codice nel file functions.php.


<!–?php <br ?–>
add_shortcode( ‘gallery’, ‘modified_gallery_shortcode’ );

function modified_gallery_shortcode($attr) {

global $post, $wp_locale;
$output = gallery_shortcode($attr);

$output = preg_replace(array(‘/]*>/’, ‘/<\/dl>/’), ”, $output);
$output = preg_replace(array(‘/]*>/’, ‘/<\/dt>/’), ”, $output);

return $output;
}

?>

Con la funzione preg_replace del php andiamo a eliminare i tag dl e dt. Per sostituire i tag con altri tag o aggiungere classi guardare la documentazione di preg_replace.

Inizializziamo il plug-in

Ora che il codice è ripulito dai tag in eccesso possiamo inizializzare il plug-in, nel footer del nostro tema aggiungiamo il seguente codice:


<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$(‘.gallery’).magnificPopup({
gallery:{enabled:true},
delegate: ‘a’, // child items selector, by clicking on it popup will open
type: ‘image’,
// other options
});

});
// ]]></script>

Con la seguente sintassi indichiamo al plug-in di utilizzare tutti i link a all’interno della classe .gallery per aprire le immagini della gallery.

Ora se inseriamo una galleria in un post quando clicchiamo le immagini si aprirà la gallery responsive con Magnific Popup.

Stile

Ultimi ritocchi aggiustiamo l’aspetto delle thumbnail, nel file css del nostro tema aggiungiamo:


.gallery {padding:40px 0 0 0; width:100%;}
.gallery a{margin: 0 35px 35px 0; float:left;}

Con questo articolo abbiamo visto come modificare le gallery di wordpress, cosa spesso utile durante lo sviluppo di un sito.

Qui di seguito il file per il download con all’interno tutti i codici utilizzati.

Stay Tuned!

4 Commenti

  1. Nicolò ha detto:

    Complimenti….
    Una domanda, ma se voglio applicare il tutto in un tema child cambia qualcosa??

  2. antonio ha detto:

    ciao andrea!

    ho esattamente bisogno di fare quello che la tua guida indica : utilizzare in una galleria il codice di magnific-popup…solo che non funziona :)!

    http://www.webra.it/demo/raint/con-galleria/

    ci dovrebbe essere una galleria (e una sidebar) ma non è visibile.
    se guardi il codice sorgente della pagina il prolema sembra essere nella codice che vado ad aggiungere a functions.php

    • Andrea Marchetti ha detto:

      Ciao Antonio, ti consiglio di controllare bene il codice in funcions.php probaiblmente chè qualche errore che di di conseguenza non ti fa mostrare la sidebar e la gallery..

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Share