Últimamente es hasta habitual 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 lateral.
Es interesante tener widgets en el fondo del blog, por ejemplo, para poner enlaces a otros artículos del blog o quizás para añadir información sobre ti mismo. 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 WordPress: Kubrick.
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 «style.css» de la plantilla Kubrick en tu editor de código para añadirle el siguiente código, lo llamaremos subfooter:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #subfooter { width:730px; margin-left:15px; margin-right:15px; height:300px; background-color:#d5d6d7; clear:both; } #subfooter .widget { width:240px; height:300px; float:left; } #subfooter .widget .inner { padding:10px; } |
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”>:
1 2 3 4 5 6 7 8 9 10 11 | <div id="subfooter"> <div class="widget"><div class="inner"> Widget 1 </div></div> <div class="widget"><div class="inner"> Widget 2 </div></div> <div class="widget"><div class="inner"> Widget 3 </div></div> </div> |
Ahora, si observas el blog podrás ver al fondo de la página algo que se parezca a esto:
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:
1 2 3 4 5 6 7 8 | < ?php 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>', )); |
Cámbialo a esto otro:
1 2 3 4 5 6 7 8 9 10 11 | < ?php 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')); |
Lo que hemos hecho es registrar 3 barras laterales llamadas subfooterleft, subfootercenter y subfooterright que corresponderán a los widgets izquierdo, central y derecho del subfooter.
A continuación hay que hacer que el footer sea «widget ready». Para eso también añadiremos, en vez de lo comentado en el punto 2, lo siguiente:
Sustituimos Widget 1 por …
1 2 3 | < ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('subfooterleft') ) : ?> < ?php endif; ?> |
Sustituimos Widget 2 por …
1 2 3 | < ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('subfootercenter') ) : ?> < ?php endif; ?> |
… y Widget 3 por esto otro:
1 2 3 | < ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('subfooterright') ) : ?> < ?php endif; ?> |
Paso 4 Añadiendo los Widgets
Para añadir los widgets tienes que ir al panel de administración, al apartado «Diseño -> Widgets«. Veras un menú desplegable, haces clic en el y verás 3 opciones nuevas:
Ya sabes como se hace, eliges una de las opciones que inlcuimos en el subfooter y puedes ir añadiendo widgets a esa barra lateral especial. Eso si, añade solo un widget por cada área del subfooter.
Si vas ahora a tu blog deberías ver algo similar a lo de esta captura:
Paso 5 Mejorando su Aspecto
Ya lo tenemos configurado y funcionando, pero seguro que no tiene un aspecto todo lo interesante que desearíamos.
Añádele el siguiente código al fichero «style.css» para mejorarlo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #subfooter li { list-style-type: none; list-style-image: none; } #subfooter li ul { padding-left:0px; font-size:12px; } #subfooter a { padding:5px; width:90%; text-decoration:none; clear:both; display:block; } #subfooter a:hover { background-color:#1a6198; color:#FFFFFF; } |
Resultado
Y así es como queda, un estupendo subfooter listo para widgets en WordPress.
Si quieres puedes descargar los archivos modificados de la plantilla Kubrick aquí en formato .zip y revisar el código para adaptarlo como desees.
Gracias
Modificado para aceptar widgets dinámicos (gracias NachitoX)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!
