Quando si utilizza wordpress si può avere la necessità di dover ricorrere a “pesanti” customizzazioni di un template. Proprio in questi giorni infatti siamo alle prese con una di queste modifiche: inserire dei widget aggiuntivi in una nuova area dedicata all’interno del footer.

Con il trascorrere del tempo  può capitare di dovere aggiungere nuove funzionalità al nostro cms; data la quantità di widget presenti sul web, l’unico problema può consistere nell’impaginazione e organizzazione dei contenuti sul nostro sito web. In tal caso può tornare utile aggiungere uno spazio dedicato all’interno del footer, rendendolo quindi widget-ready.

Di seguito mostreremo come ottenere, in pochi passaggi, 3 aree distinte all’interno del footer in grado di accogliere tutti i widget di cui potremmo avere bisogno.

Step1

Come prima cosa occorre abilitare la nuova area dedicata ai widget. Inserendo il seguente codice all’interno del file function.php:

if ( function_exists('register_sidebar') )
 register_sidebar(array('name'=>'FooterLeft','before_widget' => '<div class="fwidget">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>',));
 if ( function_exists('register_sidebar') )
 register_sidebar(array('name'=>'FooterCenter','before_widget' => '<div class="fwidget">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>',));
 if ( function_exists('register_sidebar') )
 register_sidebar(array('name'=>'FooterRight','before_widget' => '<div class="fwidget_last">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>',));

In questo modo diremo a wordpress di metterci a disposizione 3 aree distinte, le quali saranno editabili nella sezione “Widget” assieme alla Sidebar Standard.

Step2

In questa fase occorre posizionare all’interno del template le nostre 3 nuove aree. Creeremo quindi delle nuove div all’interno del footer; compileremo il file footer.php con il seguente codice:

<div id="footer_widget">
 <div class="fwidget">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterLeft') ) : ?>
 <?php endif; ?>
 </div>

<div class="fwidget">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterCenter') ) : ?> <?php endif; ?>
 </div>

<div class="fwidget_last">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterRight') ) : ?>
 <?php endif; ?>
 </div>

Step3

Ora non ci resta che assegnare il nostro stile css alle div appena create. Di seguito troverete un esempio di stile css:

#footer_widget {

 width: 883px;
 height:190px;
 float: right;
 margin:0;
 padding-top:15px;
 padding-bottom:20px;
 position:relative;
 right:10px;
 }
 .fwidget {
 width: 250px;
 padding-right: 65px;
 color: #a4a5a1;
 float: left;
 font-size: 11px;
 }
 .fwidget_last {
 width: 250px;
 color: #a4a5a1;
 float: right;
 font-size: 11px;
 }
 .fwidget_last h3{
 color:#FFFFFF;
 padding-top:15px;
 padding-left:29px;
 height:29px;
 background-repeat:no-repeat;
 background-image:url(../img/btnh3.png);
 background-position:left;
 margin-bottom:10px;
 font-size:13px;
 font-weight:bold;
 font-family:"Helvetica", "Arial", sans-serif;
 text-transform:uppercase !important;
 line-height:17px;
 }

.fwidget_last li{
 padding-left:47px;
 padding-bottom:10px;
 line-height:15px;
 height:auto;
 }

.fwidget h3{
 color:#FFFFFF;
 padding-top:15px;
 padding-left:29px;
 height:29px;
 background-repeat:no-repeat;
 background-image:url(../img/btnh3.png);
 background-position:left;
 margin-bottom:10px;
 font-size:13px;
 font-weight:bold;
 font-family:"Helvetica", "Arial", sans-serif;
 text-transform:uppercase !important;
 line-height:17px;
 }

.fwidget li{
 padding-left:50px;
 padding-bottom:15px;
 line-height:15px;
 background-image:url(../img/rssli.jpg);
 background-repeat:no-repeat;
 width:202px;
 float:right;
 background-position:0 100%;
 padding-top:5px;

}
 .fwidget li a{
 color:#3d3d3d;
 }

.fwidget li a:hover{
 color:#a8051a;
 }