Tutorialdock | Free Web Resources

Output personalizzato della gallery di WordPress – #3

| di:

wordpress tips Output personalizzato della gallery di WordPress – #3

Ben ritrovati per la terza ed ultima parte del tutorial. Nel caso non abbiate ancora letto la prima e seconda parte vi consiglio di controllare i tutorial precedenti.

L’idea

Sostituire il layout della gallery fotografica di default di WordPress con la gallery Nivo Slider

Il codice

Nel primo articolo, Output personalizzato della gallery di wordpress, avevo creato un file PHP dedicato in cui avevo inserito tutta la logica per la gallery. Il file era stato chiamato custom-gallery.php

Riprendiamo in mano quel file, in particolare la funzione adibita alla creazione del layout della gallery make_gallery:

function make_gallery($galleryA){
   echo '<div id="gallery">'; foreach($galleryA as $gallery) : echo " Output personalizzato della gallery di WordPress – #3"; endforeach; echo '</div>';
}

Ciò che dobbiamo fare è ricreare il layout di Nivo Slider. Permettetemi di utilizzare una scrittura un po’ più complessa. Quindi:

function make_gallery($galleryA){
		echo '<div id="wrapper">
			<div class="slider-wrapper theme-default">
				<div class="ribbon"></div>
				<div id="slider" class="nivoSlider">';
		foreach($galleryA as $gallery) :
			 echo "<img src=".$gallery['attSRC']." title=".$gallery['attTITLE']."/>";
		endforeach;
		echo '</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>';
}

Come potete notare, le immagini vengono ciclate da un foreach. Ad ogni ciclo stampo il tag img con i relativi attributi src e title popolati dinamicamente da PHP.

Se al posto del contenuto del title inserite l‘id dell’elemento subito dopo il ciclo foreach, Nivo Slider come caption non prenderà il title dell’immagine ma bensì il contenuto del div con l’id htmlcaption.

Questo serve per ottenere delle captions con html anziché solo testo. Fate delle prove per vedere i risultati.

Provando a lanciare lo script vedrete che non otterrete niente perché mancano le inclusioni dei Javascripts e dei fogli stile CSS. I javascripts e i fogli di stile vanno inseriti nella sezione head della pagina html. Usiamo le  API di WordPress per ovviare a questo:

wp_enqueue_script('jquery');
wp_register_script('nivo_slider', get_bloginfo('template_directory').'/nivo/jquery.nivo.slider.pack.js');
wp_enqueue_script('nivo_slider');
wp_register_script('nivo_init', get_bloginfo('template_directory').'/nivo/nivo_init.js');
wp_enqueue_script('nivo_init');
wp_register_style('default_nivo', get_bloginfo('template_directory').'/nivo/default/default.css');
wp_enqueue_style('default_nivo');
wp_register_style('nivo-slider', get_bloginfo('template_directory').'/nivo/nivo-slider.css');
wp_enqueue_style('nivo-slider');

Per prima cosa includo jQuery. Poi registro i file js e css che mi serviranno per la slider ed infine li includo.

Registro lo script attraverso questa API:

wp_register_script

Includo lo script attraverso questa:

wp_enqueue_script

Lo stesso procedimento vale per i fogli di stile.

La cartella nivo, dove ci sono tutti i files, potete inserirla nella directory del tema. Attraverso l’API et_bloginfo(‘template_directory’); avrete accesso alla cartella del template. Dopodiché basta aggiungere il percorso che porta alla cartella Nivo Slider e quindi ai vostri files.

Tutte le registrazioni e inclusioni andranno racchiuse dentro una funzione che verrà chiamata nel momento in cui la piattaforma WordPress verrà inizializzata. La funzione va inserita in functions.php  prima dell’iclusione del file custom-gallery.php La funzione sarà dunque chiamata dalle API:

add_action('init', 'gallery_script');

	  function gallery_script(){ /*tutte le inclusioni vanno qui dentro*/ }

Questo è ciò che dovete inserire in functions.php prima di includere il file custom-gallery.php

Fatto!! Provate a caricare una gallery in una pagina oppure in un post e vedrete che l’output sarà sostituito da Nivo Slider.

Tags:


L'Autore

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

  • Afmarchetti

    Grazie e complimenti per l’articolo, le immagini vengono inserite dal foreach in ordine alfabetico? Non riesco a impostare l’ordine che volgio dal back end..

    • http://www.tutorialdock.altervista.org Tutorialdock

      L’ordine è quello che vi è di default nel database, quindi è ordinato a seconda della data di caricamento. Purtroppo non è possibile cambiare l’ordine nel back end con un ciclo foreach, probabilmente esiste un’altra tecnica. Se la trovi non esitare a postarla, grazie!

Tips: abilitare Airdrop sui mac non supportati ufficialmente