CREARE NUOVA SIDEBAR PERSONALIZZATA GESTITA DA CAMPI PERSONALIZZATI

(Aggiornato il 27/11/2015)
In questo articolo vedremo come creare una nuova sidebar personalizzata che tramite i campi personalizzati (conosciuti anche come custom fields) potrà essere inserita in sezioni specifiche del sito a seconda delle nostre esigenze.

Tramite i campi personalizzati potremo aggiungere in modo facile e sbrigativo la nuova sidebar in articoli specifici a nostra scelta oppure solamente nelle pagine o in una singola pagina e nelle categorie.


Si specifica che, tutte le modifiche che andremo ad eseguire per creare una nuova sidebar personalizzata e il nuovo codice che dovrà essere inserito in vari file, andranno eseguite solamente all’interno delle cartelle che contengono i file del tema wordpress che state utilizzando.

Come sempre, la fase più importante prima di modificare qualsiasi cosa è eseguire un backup del database di wordpress..

INSERIRE IL PRIMO CODICE PER LA NUOVA SIDEBAR PERSONALIZZATA:

La prima cosa da fare è inserire un nuovo codice nel file function.php, prima di eseguire questa procedura controllate che all’interno del file non sia già presente un codice simile a quello che andremo ad inserire, che serve appunto per richiamare la sidebar già presente nel vostro tema.

Un’altro controllo da eseguire, è ricercare eventuali file dal nome sidebar.php, attenzione perchè a seconda del tema che state utilizzando potrebbero essercene presenti più di uno in cartelle diverse e questo influisce nel codice che dovremo inserire perchè anche in questo caso potrebbe essere già presente un codice uguale che gestisce l’attuale sidebar.

Se trovate un codice uguale o simile a quello che segue all’interno di uno dei due file function.php o sidebar.php non dovrete fare altro che copiare il codice presente e incollarlo uguale e tale subito dopo.

Codice che potrebbe già essere presente:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Sidebar',
		'before_widget' => '<div id="%1$s" class="widget sidebar-block %2$s">',
		'after_widget' => '</div> <!-- end .widget -->',
		'before_title' => '<h3 class="widgettitle">',
		'after_title' => '</h3>',
?>

Con il nuovo codice inserito:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Sidebar',
		'before_widget' => '<div id="%1$s" class="widget sidebar-block %2$s">',
		'after_widget' => '</div> <!-- end .widget -->',
		'before_title' => '<h3 class="widgettitle">',
		'after_title' => '</h3>',
    ));
	
if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Sidebar pagine',
		'before_widget' => '<div id="%1$s" class="widget sidebar-block %2$s">',
		'after_widget' => '</div> <!-- end .widget -->',
		'before_title' => '<h3 class="widgettitle">',
		'after_title' => '</h3>',
    ));
?>

Come si nota, è stato inserito un nuovo codice uguale identico al primo, l’unica modifica fatta è stata quella di inserire il nome della nuova sidebar che verrà visualizzata alla sezione widget, cioè da Sidebar a Sidebar pagine.

Il nuovo nome “Sidebar pagine” è stato scelto per identificare che la nuova sidebar personalizzata verrà utilizzata solo per le pagine del sito ma potete scegliere qualsiasi nome di vostro gradimento.

Segue una foto di esempio di come vedrete la sezione widget con il nuovo campo per la nuova sidebar dove verranno inseriti i widget da visualizzare.

CREARE IL FILE PER LA NUOVA SIDEBAR:

Il passo successivo sarà quello di creare il file per la nuova sidebar da gestire tramite i campi personalizzati, che essendo già presente vi basterà copiare e rinominare con un nuovo nome.

Di norma, il file che gestisce la sidebar è presente nella cartella principale del tema con il nome di sidebar.php, tramite FTP scaricatelo nel vostro computer e semplicemente rinominatelo con un nome a vostra scelta ad esempio sidebar-nuova.php.

Attenzione, il nuovo nome dovrà essere inserito dopo il trattino perché, per la gestione tramite campi personalizzati, sarà quello il nome che verrà “riconosciuto” per essere correttamente interpretato.

Una volta rinominato il file, apritelo con il vostro editor di testo perché dovrete inserire il nuovo nome che avete scelto in precedenza per la nuova sidebar, cioè “Sidebar pagine“.

Un esempio di codice che troverete all’interno del file:

<div id="sidebar" class="clearfix">
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?> 
	<?php endif; ?>
</div> <!-- end sidebar -->

Un’altro esempio di codice all’interno del file, in questo caso tratto dal file del tema di default di wordpress Twenty Twelve:

<?php
/**
 * The sidebar containing the main widget area.
 *
 * If no active widgets in sidebar, let's hide it completely.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>

	<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
		<div id="secondary" class="widget-area" role="complementary">
			<?php dynamic_sidebar( 'sidebar-1' ); ?>
		</div><!-- #secondary -->
	<?php endif; ?>

Il nuovo nome “Sidebar pagine” va inserito sostituendo il nome di default subito dopo “dynamic_sidebar” ad esempio nel primo codice va sostituito il nome “sidebar” nel secondo codice va sostituito “sidebar-1“.

Dopo aver sostituito il nome di default con il nome della nuova sidebar personalizzata, caricate il nuovo file all’interno della stessa cartella da dove lo avete scaricato.

MODIFICARE LA FUNZIONE GET_SIDEBAR:

La funzione get_sidebar è la funzione che permette di richiamare ovviamente la sidebar in ogni sezione del sito per gli articoli, per la pagine e per le categorie. (segue codice di esempio)

<?php get_sidebar(); ?>

Come potete vedere dal codice di esempio, all’interno delle due parentesi tonde non vi è alcun nome specifico, quindi verrà richiamata e visualizzata la sidebar di default che avete nel vostro tema e sarà uguale in ogni sezione del vostro sito.

Generalmente il codice lo si può trovare e modificare all’interno dei file del vostro tema chiamati “page.php” “single.php” “home.php” “index.php”

Il codice dovrà essere sostituito completamente e come forse avrete già immaginato, si dovrà inserire all’interno delle parantesi tonde il nome della nuova sidebar, è la stessa procedura che abbiamo eseguito quando abbiamo rinominato e creato il nuovo file per la nuova sidebar.

Ecco il codice completo da inserire sostituendo quello esistente:

<?php $sidebar = get_post_meta($post->ID, "Sidebar pagine", true); get_sidebar($sidebar); ?>

Come notate anche qui troverete subito dopo il codice post->ID il nome della nuova sidebar”Sidebar pagine“. Questo codice dovrete inserirlo in tutti i file che gestiscono la chiamata della sidebar che vi permetteranno di inserire tramite campi personalizzati la nuova sidebar dove avete scelto di utilizzarla, ed esempio, se volete utilizzare la nuova sidebar solo per la pagine, dovrete inserire il codice solo all’interno del file page.php.

RICHIAMARE LA NUOVA SIDEBAR TRAMITE CAMPI PERSONALIZZATI:

A questo punto siete pronti per inserire la nuova sidebar utilizzando il campo personalizzato, potrete inserire e visualizzare la nuova sidebar in ogni posizione voi vogliate nel momento stesso in cui state inserendo nel vostro sito una nuova pagina, un nuovo articolo, solo per un’articolo specifico, per le categorie o per una singola specifica categoria.

Alla sezione “campi personalizzati” scorrendo il menu che trovate al suo interno, ritroverete il nome “Sidebar pagine” da selezionare, mentre nel campo di destra dovrete inserire la parola “nuova” che è il nome che abbiamo inserito dopo il trattino subito dopo la parola “sidebar” nel momento in cui abbiamo rinominato il file con il nome di sidebar-nuova.php. (segue foto di esempio)

A questo punto, come ultimo passo, vi basterà cliccare su “aggiungi campo personalizzato” e la nuova sidebar verrà visualizzata con i widget che avete inserito.

Un esempio pratico di questa personalizzazione la potete vedere direttamente su questo sito che, per la home page utilizza una sidebar diversa di quella per gli articoli, pagine e categorie.

Qualcuno di voi ha già utilizzato queste modifiche e vuole condividere il risultato ?

Articoli interessanti:

Footer personalizzato per sezioni specifiche
Indecisi? lista di siti creati con wordpress
Strumenti gratuiti per analizzare siti internet
Come eseguire il backup per un sito WordPress
Sicurezza wordpress: Protezioni e impostazioni
Sito wordpress multilingua meglio installazione singola o multipla?
Aggiungere css personalizzato tramite campi personalizzati wordpress
Gestire commenti wordpress tramite database e query SQL


Vietata la Riproduzione.