Agregar Widget al Footer

Ahora se ve bastante encontrarse con blogs en los que hay widgets en el pié de página son prácticos pues añade un área en la que incluir bloques de información que igual no quedarían bien en la barra latera.

En este tutorial vamos a crear 3 áreas de widget en el pié de página que podrán editarse desde el panel de administración. Usaremos la plantilla por defecto de WordPres.



Paso 1 Crea el CSS

Lo primero que tenemos que hacer es crear el CSS del área del pié de página. Abre el archivo CSS de tu plantilla wordpress en tu editor de código para añadirle el siguiente código, lo llamaremos subfooter:
 
#subfooter
{
    background-color: #252525;
    box-shadow: 0 0 2px #000000;
    margin: 0 auto;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    width: 970px;
    /*width:970px;
    margin-left:15px;
    margin-right:15px;
    height:300px;
    background-color:#d5d6d7;
    clear:both;*/
}

.widget
{
    /*margin:0 0 0 20px;*/
    /*margin-left:15px;
    margin-right:15px;*/
}
#subfooter .footer-block1, .footer-block2 , .footer-block3
{/*.footer-block4 {*/
    background: blue;
    float: left;
    height:200px;
    overflow:hidden;
    padding: 20px 15px 0 0;
    margin-left:5px;
    margin-right:5px;
    width: 295px;
}


El código anterior crea un área llamada subfooter y una clase widget, en el código HTML, en la que añadiremos las tres instancias de la clase widget y con la opción float:left; se alinearán uno junto al otro.

Paso 2 El HTML
 
Abre el archivo “footer.php” y añade el siguiente código antes del código <div id=”footer”>:

Paso 3 Haciendo que admita Widgets
 
En este momento aún no está listo para widgets, lo que significa que tendrías que añadir código manualmente en cada widget en el fichero “footer.php”. En este paso vamos a ver como hacer que admita widgets para que puedas añadirlos desde la sección “Diseño -> Widgets” de tu panel de administración. Para hacerlo usaremos el fichero “functions.php” como hemos visto en otras ocasiones. Abre este archivo en tu editor de código.Verás en la parte superior del fichero “functions.php” lo siguiente:


//agrega widget al footer
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array('name'=>'subfooterleft'));
register_sidebar(array('name'=>'subfootercenter'));
register_sidebar(array('name'=>'subfooterright'));


CODIGO HTML Y PHP

<div id="subfooter">
    <div class="footer-block2">
        <div class="widget">
           
                    <?php if ( !function_exists('dynamic_sidebar')
                            || !dynamic_sidebar('subfooterleft') ) : ?>
                    <?php endif; ?>
           
        </div>
    </div>

    <div class="footer-block2">
    <div class="widget">
       
            <?php if ( !function_exists('dynamic_sidebar')
                    || !dynamic_sidebar('subfootercenter') ) : ?>
            <?php endif; ?>
       
    </div>
    </div>
   
    <div class="footer-block2">
    <div class="widget">
       
            <?php if ( !function_exists('dynamic_sidebar')
                    || !dynamic_sidebar('subfooterright') ) : ?>
            <?php endif; ?>
       
    </div>
    </div>

</div>

<div id="footer">
    <div class="foot-wrap">
        <p class="copyright">Cosmetic-Fasion © 2013</p>
        <p class="credit"><a href="#" title=""></a></p>
    </div>
</div>