Blog

Utilizzare sidebar diverse per ogni pagina di wordpress

Il cliente del proggetto per cui sto lavorando qualche giorno fa mi ha fatto richiesta di inserire delle componenti diverse per ogni pagina ed articolo sulla sidebar del sito in wordpress.
Dopo un’accurata valutazione ho realizzato uno script che facesse al caso mio. Ossia ho pensato di creare tante sidebar quante erano le richieste del cliente e poi inserirle nelle varie pagine facendo si che si alternassero.
Siete confusi? Niente paura ora vi spiego come ho fatto, vi accorgerete che è molto più semplice di quanto voi pensiate.

Innanzitutto andremo a creare le sidebar, quindi aprite il file function.php presente all’interno del vostro tema e scrivete in fondo ad esso:

/*sidebar creator*/

if (function_exists('register_sidebar')) {

 register_sidebar(array(
 'name' => 'Sidebar',
 'id'   => 'sidebar-area',
 'description'   => 'La nostra widget area.',
 'before_widget' => '<div class="widget-box">',
 'after_widget'  => '</div>',
 'before_title'  => '<h2>',
 'after_title'   => '</h2>'
 ));

 register_sidebar(array(
 'name' => 'sidebar due',
 'id'   => 'sidebar-due',
 'description'   => 'La nostra widget area.',
 'before_widget' => '<div class="widget-box">',
 'after_widget'  => '</div>',
 'before_title'  => '<h2>',
 'after_title'   => '</h2>'
 ));

  register_sidebar(array(
 'name' => 'sidebar tre',
 'id'   => 'sidebar-tre',
 'description'   => 'La nostra widget area.',
 'before_widget' => '<div class="widget-box">',
 'after_widget'  => '</div>',
 'before_title'  => '<h2>',
 'after_title'   => '</h2>'
 ));

  register_sidebar(array(
 'name' => 'sidebar quattro',
 'id'   => 'sidebar-quattro',
 'description'   => 'La nostra widget area.',
 'before_widget' => '<div class="widget-box">',
 'after_widget'  => '</div>',
 'before_title'  => '<h2>',
 'after_title'   => '</h2>'
 ));

}

Io in questo esempio ne ho create quattro, voi sentitevi liberi di crearne quante ne volete.

Ora aprite il vostro backend ed andate su aspetto->widget , se notate la presenza delle sidebar appena create tutto è andato per il meglio. Se avete bisogno di inserirla a destra o a sinistra modificate o aggiungete lo stile nel vostro file style.css. Dovete creare e personalizzare il div presente in queste righe:

'before_widget' => '<div class="widget-box">',
'after_widget'  => '</div>',

Ovviamente sentitevi liberi di chiamare la classe del div come vi pare purchè mettiate il solito nome nelle righe suddette.

Bene! Ora vediamo come alternare le sidebar create nei vari post o pagine, per far ciò aprite il file sidebar.php presente nel vostro tema e modificate così:

<?php   
global $sidebar;
    if( $sidebar == "right-sidebar" )
    {global $right_sidebar;
    echo "<div class='four columns mb0 gdl-right-sidebar'>";
    echo "<div class='gdl-sidebar-wrapper'>";
    echo "<div class='sidebar-wrapper'>";
    $page_id = $wp_query->get_queried_object_id();

switch($page_id)
{case "0":case 0:
break;
case "33": // servizi
case 33:
?>      
    <div id='Dx'>
    <?php dynamic_sidebar( 'sidebar' ); ?>
    </div>
<?php
break;
case "30": // chi siamo
case 30:
?>
    <div id='Dx'>
    <?php dynamic_sidebar( 'sidebar' ); ?>
    </div><?php
break;
case "39": // contatti
case 39:
?>
    <div id='Dx'>
    <?php dynamic_sidebar( 'sidebar quattro' ); ?>
    </div>
<?php
break;
case "35": // prodotti
case 35:
?>
    <div id='Dx'>
    <?php dynamic_sidebar( 'sidebar quattro' ); ?>
    </div>
<?PHP
break;
case "37": // dove siamo
case 37:
?>
    <div id='Dx'>
    <?php dynamic_sidebar( 'sidebar due' ); ?>
    </div>
<?php
break;
case "116": // vai al negozio
case 116:
?>      
    <div id='Dx'>
    <?php dynamic_sidebar( 'sidebar due' ); ?>
    </div>
<?php
break;
default:
break;
}
echo "</div>";
echo "</div>";
echo "</div>";
}
else if( $sidebar == "both-sidebar" )
{global $right_sidebar;
echo "<div class='three columns mb0 gdl-right-sidebar'>";
echo "<div class='gdl-sidebar-wrapper'>";
echo "<div class='sidebar-wrapper'>";
dynamic_sidebar( $right_sidebar );
echo "</div>";
echo "</div>";
echo "</div>";
}      
?>

Chiaramente i div presenti all’interno del file sono personali, quindi personalizzatelo come vi pare in base al tema del vostro sito, sembra più complicato di quello che è. Vi assicuro che non è difficile io mi sono limitato ad aggiungere un semplice switch dove all’interno del case ho inserito l’id della pagina o articolo interessato.

Se avete problemi contattatemi o commentate sarò lieto di offrirvi il mio aiuto!!

Ciauz!!!

lucio

Chi è ?

Lucio Ticali è un Web & App developer con la passione per il web marketing,si occupa anche di tecniche di indicizzazione del sito e di promozione dello stesso (SEO e SEM).

Lascia la tua opinione