Tutorialdock | Free Web Resources

Output personalizzato della gallery di WordPress – #2

| di:

wordpress tips Output personalizzato della gallery di WordPress – #2

Ben ritrovati per la seconda parte del tutorial. Nel caso non abbiate ancora letto la prima parte: Output personalizzato della gallery di wordpress

Vi consiglio caldamente di dare un’occhiata all’articolo precedente se non siete abituati a lavorare con le API di WP. Lo stesso vale per jQuery

L’obiettivo

Scegliere una gallery fotografica realizzata tramite jQuery (open source, possibilmente). Comprenderne il layout ed il funzionamento base. Replicare, in wordpress tramite php, lo stesso layout.

Il codice (gallery)

Personalmente la mia scelta ricade su Nivo Slider. Potete scaricarla gratuitamente. Per me è un’ottima slider realizzata col framework jQuery. Passiamo all’azione.

Una volta scaricato il file zip estraetelo. All’interno troverete varie cartelle e files tra cui: jquery.nivo.slider.js, jquery.nivo.slider.pack.js, nivo-slider.css. Questi files sono il motore della gallery.

Per renderci conto e capire come vada costruito il layout, dobbiamo aprire la cartella demo. Al suo interno troveremo un file html: demo.html. Possiamo aprire quel file con un qualsiasi editor free (NotePad++) oppure con un qualsiasi altro. L’importante è che si possa avere sotto gli occhi il codice sorgente della pagina. Il mio è questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
    <div id="wrapper">

        <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>

        <div class="slider-wrapper theme-default">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>

    </div>
    <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>

Possiamo notare che nella sezione head della pagina sono presenti varie inclusioni. Le prime tre fanno riferimento ai tre file css corrispondenti ai possibili temi applicabili alla slider.  nivo-slider.css invece si occupa di applicare lo stile solo agli elementi della gallery (pulsanti, frecce, segnafoto ecc.). Lo style.css non fa altro che applicare qualche stile alla pagina, non è indispensabile.

In fondo alla pagina, prima del tag body, ci sono le inclusioni di due file js: la versione aggiornata di jQuery e il js di Nivo Slider. Dopo che questi files sono stati inclusi e di conseguenza il browser conosce quel javascript, sarà capace di eseguire il blocco di js sottostante:

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

Passo a jQuery l’id del box (div) che contiene gli elementi da mostrare in slide (le immagini). Eseguo il metodo nivoSlider(). Fatto!!

Ora basta replicare tutto questo in WordPress. Vi assicuro che è più semplice a farsi che a dirsi.

Potrei continuare in questa pagina ma preferisco creare una terza parte per concentrarmi su WordPress. In questo modo saranno ben chiare le tre fasi di sviluppo:

  • 1) modificare l’output della gallery
  • 2) scegliere e comprendere che gallery utilizzare
  • 3) implementarla in WordPress

Ci vediamo per la terza ed ultima parte. Stay tuned!!

Tags:


L'Autore

Web designer / developer - AS3 developer - Wordpress Specialist Sito web dell'autore

Tips: abilitare Airdrop sui mac non supportati ufficialmente