WordPress Responsive

Modificare la gallery di WordPress rendendola responsive con Magnific Popup

By Andrea Marchetti
@marchetti_design

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!

Responsive

Potrebbero interessarti:

FULLBY: Free Responsive Grid WordPress Theme

Creare il tuo primo Tema WordPress Responsive

Swipy! nuovo Tema WordPress Free con supporto Swipe

10 Temi WordPress Responsive Free & Flat