Tutorialdock | Free Web Resources

Output personalizzato della gallery di WordPress – #1

| di:

wordpress tips Output personalizzato della gallery di WordPress   #1

Questo tuts prevede che sappiate già qualcosa di php e siate a conoscenza delle API di Wordrepss.

Prima di iniziare a mostrarvi del php volevo passarvi l’idea e  farvi capire l’utilità di questa tecnica.

L’idea

Sostituire l’output di default delle gallery di wordpress con un nostro layout personalizzato.

L’utilità

L’upload delle immagini sarà comodo e intutitivo come sempre.

Il codice

Cerchiamo di capire dove scrivere le nostri funzioni. La soluzione migliore è creare un file php a parte e poi includerlo in functions.php . Chiameremo il file custom-gallery.php.
Così  facendo avremo la possibilità di mantenere un’ottima separazione dei file e quindi delle funzionalità aggiunte al nostro template. La prima cosa da fare è creare il file custom-gallery.php. Fatto questo potremo includerlo in functions.php così:

include_once('custom-gallery.php');

Solitamente io inserisco i file da includere alla fine del file functions.php

La seconda cosa da fare sarà rimuovere lo shortcode di default di wordpress in modo da assegnare successivamente una nostra funzione che deciderà l’output della gallery:

  • remove_shortcode('gallery', 'gallery shortcode');
    add_shortcode('gallery', 'custom_gallery_shortcode');

Punto 1: rimuovo l’hook di wordpress dalla funzione gallery_shortcode
Punto 2:  associo l’hook di wordpress alla funzione custom_gallery_shortcode ( la nostra )

Definiamo ora la nostra funzione alla quale ho associato uno shortcode:

function custom_gallery_shortcode($attr) {

		  global $post, $wpdb;

		  $galleryArray[] = array();
		  $i = 0;

		  $args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID );
		  $attachments = get_posts($args);

		  foreach($attachments as $attachment) :

		  if(function_exists('wp_get_attachment_image_src'))
		  	$the_image_downsize = wp_get_attachment_image_src($attachment->ID, 'intermediate'); // L'immagine scalata oppure quella originale se non esiste

			  $attachmentID = $attachment->ID;

			  $attachmentSRC = $attachment->guid;

			  $attachmentTITLE = $attachment->post_title;

			  $galleryArray[$i++] = array(
			  	  'attID'		=> $attachmentID,
				  'attSRC' 		=> $the_image_downsize[0], // L'immagine scalata oppure quella originale se non esiste
				  'attTITLE'	=> $attachmentTITLE
				  );

		  endforeach;

		  make_gallery($galleryArray);

	  }

Un problema interessante è stato trovare il modo di recuperare gli attachment. WordPress intende gli attachment come dei post i quali hanno come parent (papà) il post ai quali sono “attaccatti”.
Ho definito quali argomenti da passare alle API di WordPress:

$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID );

Ho definito che tipo di post con  post_type, numberposts -1 significa tutti, post_status null perché è un attachment e post_id è l’id del post corrente.

Ho memmorizzato l’output in una variabile:

$attachments = get_posts($args);

La funzione get_posts, API WordPress, accetta come paramentri una serie di argomenti che possono essere uniti in un array e passati tutti insieme.
Restituisce un array che è stato memorizzato nella variabile $attachments tramite la quale potrò accedere ai risultati di get_posts:

foreach($attachments as $attachment) :
   if(function_exists('wp_get_attachment_image_src'))
     $the_image_downsize = wp_get_attachment_image_src($attachment->ID, 'intermediate'); // L'immagine scalata oppure quella originale se non esiste
   $attachmentID = $attachment->ID;
   $attachmentSRC = $attachment->guid;
   $attachmentTITLE = $attachment->post_title;
   $galleryArray[$i++] = array( 'attID' => $attachmentID, 'attSRC' => $the_image_downsize[0], 'attTITLE' => $attachmentTITLE );
endforeach;

Se non siete abituati a questo tipo di struttura di array allora dovete sapere che si tratta di un “array di array” cioè un array multidimensionale. L’array principale è, nel nostro caso, $galleryArray. Quest’ultimo array contiene altri array.
Dove sta il vantaggio?
Semplice. Posso portarmi in giro una sola variabile di tipo array ma contenente tantissime informazioni recuperabili tramite il nome che noi abbiamo deciso di associare ad ogni elemento dell’array.

Cioè:

$galleryArray[$i++] = array( 'attID' => $attachmentID, 'attSRC' => $the_image_downsize[0], 'attTITLE' => $attachmentTITLE );

Ciò significa che $attachmentID potrò recuperala così: $galleryArray['attID'] dove attID è il nome da noi scelto per recuperare il valore della variabile $attachmentID

Prima della chiusura della funzione custom_gallery_shortcode, ho richiamato l’ultima funzione che ci serve: make_gallery($galleryArray); Come si evince ho passato come parametro l’array multidimensionale che questa funzione utilizzerà per recuperare le informazioni che servono per costruire la nostra nuova gallery. Ecco la funzione:

function make_gallery($galleryA){
   echo '<div id="gallery">';
   foreach($galleryA as $gallery) :
     echo "<img src=".$gallery['attSRC']." title=".$gallery['attTITLE']." code8=".$gallery['code8']." code10=".$gallery['code10']."/>";
   endforeach;
   echo '</div>';
}

Lancio un ciclo foreach stampando tutte le immagini della gallery.

Ricapitolando: basta inserire una gallery nel post o nella pagina e nient’altro. Automaticamente l’output verrà sostituito con il nostro.

Questo layout non ha niente di particolare ma nella seconda parte vedremo come ottenere una slider con jquery adattando l’output alle nostre esigenze.

STAY TUNED!!

Tags:


L'Autore

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

  • Pingback: Output personalizzato della gallery di WordPress – #2 | Tutorialdock

  • Pingback: Output personalizzato della gallery di WordPress – #3 | Tutorialdock

  • Roberto

    echo “”;
    ho un problema, come faccio ad assegnare una delle miniature di defolt di wp tipo la “media” ad esempio?

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

      precisamente che risultato vuoi raggiungere?

  • Riccardo

    Ciao Roberto.
    L’immagine media (intermedia) la puoi ricavare tramite un parametro da passare a questa funzione: wp_get_attachment_image_src($attachment->ID, ‘intermediate’);
    Il parametro intermediate ti permetterà di ottenere l’immagine scalata se esiste. In caso contrario otterrai l’immagine a dimensione originale.

Tips: abilitare Airdrop sui mac non supportati ufficialmente