Gabriele Morero - Grafico Webdesigner SEO

Come inserire dei widget nel footer

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;
 }

13 risposte per Come inserire dei widget nel footer

    Pingback: Rendere un footer “widget-ready” « web&grafica

  1. By Ivan, maggio 8, 2014 al 8:17 pm

    ciao non riesco a farlo funzionare.. ho bisogno di cambiare il footer ad un tema che sto usando

  2. By Ivan, maggio 8, 2014 al 8:41 pm

    Mi inserisce i widget uno sotto l’altro anzichè affiancati orizzontalmente..

  3. By Ivan, maggio 8, 2014 al 8:46 pm

    ho risolto ho trovato dov’era il bug ;)

    • By niky, dicembre 28, 2015 al 11:41 am

      Come hai risolto la disposizione dei widget da verticale ad orizzontale?
      Grazie se vorrai darmi indicazioni

  4. By deamon, maggio 23, 2014 al 1:42 pm

    Ciao, io ho creato un widget e dovrei aggiungere un codice nel footer quando questo widget è attivo, come potrei fare?

    NB:
    Faccio un esempio stupido,
    se il widget è disattivo la mia pagina è:

    blabla

    blabla

    se il widget è attivo deve diventare:

    blabla

    blabla
    MIO WIDGET

    ALTRO CODICE MIO WIDGET

    Possibile?

  5. By daniela, novembre 24, 2014 al 6:04 pm

    Ho incollato il codice dello step 1 alla fine di funcions.php e mi è comparso:

    Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\wordpress2\wp-content\themes\dw-minion\functions.php on line 116

    e il sito non si vede più.

    Ho provato a rincollarci il funciont.php del tema originale, ma niente.

    Come posso fare?

  6. By marco, febbraio 16, 2015 al 11:03 am

    Ho copiato pari pari ma mi inserisce solo 2 widget nel footer il centrale e il destro … dove sbaglio ?

    • By admin, marzo 18, 2015 al 9:21 am

      Ciao Marco,
      difficile a dirsi, hai provato a ispezionare il sito e verificare se i widget vengono generati?

  7. By lele, marzo 5, 2015 al 10:31 am

    ciao,

    volevo chiederti in che posizione va inserito il codice dello step 1 e dello step 2.
    inoltre quando dici “Ora non ci resta che assegnare il nostro stile css alle div appena create.”
    1 devo usare tutti gli stili css? o solo quelli che fanno al caso mio? e dove vanno inseriti?
    nel file stile.css per caso ? se si in quale posizione?

    scusami ma mi mancano un po di passaggi
    grazie in anticipo lele.

    • By admin, marzo 18, 2015 al 9:19 am

      Ciao Lele,
      il codice dello Step 1 va inserito all’interno del file function.php (lo puoi trovare in Aspetto >> Editor), lo puoi inserire al fondo, dopo l’ultima riga di codice.
      Il codice dello Step 2 puoi inserirlo all’interno del file footer.php, all’interno della “zona” in cui vuoi far apparire i widget.
      Gli stili css puoi utilizzare quelli da me proposti e aggiungerli nel file style.css e ovviamente customizzarteli a piacere.

  8. By Alice, giugno 20, 2015 al 5:51 pm

    Utilissimo.
    Siete stati risolutivi con questo articolo.

    Grazie

  9. By Massimo Berti, marzo 18, 2016 al 2:47 pm

    Gabriele buonasera,
    Vorrei iniziare a usare Word Press per qualche semplice impostazione promozionale,

    E nei primi tentativi, difficoltà a parte, sarei tentato di caricare un format comunemente usato in cartaceo, da fare compilare nei campi vuoti dall’utente….

    Nello specifico il format caricato nella pagina come Jpg può accogliere campi editabili come quando si modifica un PDF

    Ringraziandoti se puoi lasciarmi qualche dritta a mezzo mail
    un saluto
    Massimo Berti

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Tweets

Scroll to top