Crear zona de Widgets para añadir plugins
Todo programador que necesita crear un blog de WordPress se ha visto en la necesidad, ya sea por petición de un cliente o por la estructura a implementar, de tener que añadir código extra en los archivos de las plantillas.
Esta forma de añadir el contenido no es una buena forma si queremos que ese contenido sea administrable desde la zona de administración de Wordepress.
¿Que será necesario para poder crear zonas de contenido? o mejor dicho, que será necesario para poder añadir plugins a según que zonas de la plantilla?
En la administración de WordPress tenemos un apartado de Widgets donde comúnmente prácticamente todas las plantillas al menos tienen un Widget Sidebar para añadir plugins a la columna derecha o izquierda del blog.
¿Como creamos estos Widgets para otra zona? como por ejemplo el header o el footer que muchas plantillas no suelen tener.
En este artículo lo que veremos es como crear nuestras propias zonas listas para widgets y poder administrarlas desde la interfaz de WordPress.
En particular, vamos a vivir el ejemplo de crear un widget para la zona de la cabecera o header de la página.
Lo primero que tendremos que hacer es abrir el archivo «functions.php» de la plantilla activa y añadir lo siguiente:
add_action('widgets_init','header_widgets_init');
function header_widgets_init(){
$args = array(
'name' => 'Header Widget Zone',
'id' => 'header-widget',
'description' => '',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>' );
register_sidebar($args);
}
Si guardamos y subimos el nuevo archivo «functions.php» veremos que en la zona de Widgets de la administración abrá un nuevo elemento para depositar plugins llamado «Header Widget Zone».
Ahora tendremos que añadir el código necesario para que los plugins añadidos a este Widget sean visibles en el header de la página. Entonces tendremos que abrir el archivo «header.php» añadiendo allí donde deseemos lo siguiente:
<?php if (!dynamic_sidebar('header-widget')) {} ?>
A partir de ahora todo lo que añadamos al Widget «Header Widget Zone» será visible en la cabecera de la págna.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Claro y conciso como debe ser…gracias por tu ayuda
Hola, muchas gracias por este código que nos ha salvado la vida a muchos. Pero presento el siguiente problema, deseo colocar iconos de redes sociales en lado derecho, me sale ahorita en el lado izquierdo. ¿Habra una posibilidad de que pueda cambiarlo?
Muchas gracias.
Hola, me parce interesante tu tutorial pero yo necesito poner un widget encima de un slider y que se quede fijo para que cuando haga scroll hacia bajo siga viéndose el widget. Si quieres ver lo que te comento en la web mariner.es
Hola,
Creo que debes maquetar tu Widget con posición fija. En el siguiente enlace hay un ejemplo con CSS que quizá te pueda servir para conseguirlo:
https://www.jose-aguilar.com/blog/crear-una-cabecera-fija-con-css/
Saludos
Muy útil. Me ha costado mucho encontrar ésto. Muchas gracias y sirve perfecto.
Hola!
Gracias por el post.
Tengo un problema
cuando coloco
mi página no se muestra y sale el error
HTTP ERROR 500
que podrá ser?
gracias!
Hola, no puedo decirte. El error 500 es un error interno de servidor que se puede dar por muchos motivos. Quizá en el error log puedes encontrar alguna pista de lo que puede estar sucediendo, saludos
muchas gracias me funciono, tarde en entender algunas cosas pero way..gracias !!
Amigo excelente!! Muchas gracias lo busque por varios lados
Un gran saludo
Hola, lo primero agradecerte que hayas compartido este código, es justo lo que estaba buscando, me funciona perfectamente lo unico es que lo he puesto en el header.php después de la etiqueta body y solo se me muestra en la Home, que tengo que hacer para que se me muestre en todas las páginas?
Muchas gracias,
Un saludo,
Silvia
Hola, es una pregunta que depende mucho del template que estés utilizando. Yo creo que deberás ir probando en otros sitios. Tiene toda la pinta que donde lo has puesto debe estar condicionado para que solo aparezca en la home. saludos
Jose en mi tema no esta el archivo herader.php en que lugar ingreso el segundo codigo, gracias xD
Hola, me parece que si no está el archivo header.php debe haber alguno parecido o puede que esté incluido en algún directorio. El que te puede dar la respuesta más precisa es el desarrollador del tema. Saludos
Muchisimas gracias por este codigo, la verdad me ha servido batante, solamente un apregunta, yo deseo que el widget sea responsive, cmo podria hacerlo?
Muchas gracias
muy sencillo. por ejemplo en el before_widget puedes añadir:
‘before_widget’ => ‘
gracias por tu respuesta, o sea que a este codigo
‘before_widget’ => »,
le tengo que agregar el que me indicas?
Gracias
Disculpe con este codigo se puede poner la barra en la pagina de home?
Hola,
Si, se puede poner en cualquier lugar de la plantilla dentro del
Saludos
Gracias por seguir ahí!
Siempre olvido cómo hacerlo y siempre vuelvo a consultarlo
😉
Hola,
Muchas gracias por esta gran aportación, me ha sido muy útil. Sólo tengo una pregunta: ¿se podría hacer responsive de manera sencilla?. He introducido tres widgets en el footer, pero cuando he probado a reducir la pantalla se cortan. ¿Habría alguna forma de colocar estos tres widgets uno encima del otro como si se estuviera visualizando con un móvil?.
Muchas gracias
Hola buenos días,
Mi recomendación es que utilices bootstrap para la maquetación:
http://www.jose-aguilar.com/blog/maquetacion-web-con-bootstrap-responsive-design/
Saludos
Hola Jose
He seguido tus pasos y el primero me sale bien y tengo el widget en la administración de wordpres.
luego le he metido un slider que ya tenía hecho pero no se ve nada en la cabecera.
Yo también estoy usando un tema-hija, pero la plantilla te hace la cabecera con un logo y texto automático y no sé si por eso no me deja meter el slider.
¿Puedes ayudarme con esto?
Gracias, María.
Hola
Quiero darte las gracias y expresarte cuanto admiro y envidio tu trabajo. Por tu sabiduría y tu admirable compartir e incluso, atender las peticiones de los y las profanas.
He seguido tus instrucciones y me ha salido. he metido una imagen en un widget de texto y lo he puesto en el creado por ti, en la cabecera de la plantilla que es Cubby, sólo que ya no creo que quede nada de cubby, porque la he modificado entera y los widgets que traían no me funcionan.
El tema es que tengo un slider en la cabecera, a la izquierda, y quiero poner el logo a la derecha, pero todo me queda a la iquierda. He ido a tu enlace: http://www.jose-aguilar.com/blog/crear-distintas-sidebar-en-wordpress/ y la pregunta es, porque aquí has hablado de columnas, si los distintos sidebar que creas en el enlace son lo que podríamos llamar columnas.
Me gustaría hacer dos columnas, una para el slider y otra para el logo….
Gracias, María.
Hola,
Muchas gracias por la admiración y consideración del trabajo que tiene montar todo esto.
Yo creo que para resolver tu problema tan solo tienes que maquetar o posicionar los divs de los widgets nuevos. En el styles.css lo puedes hacer.
Saludos
Hola Jose
Lo he conseguido. Tengo el slider a la izquierda de la cabecera y el logo a su derecha.
Se han quedado, ambos, muy pegados al borde de la página y me gustaría darles un margen por la izquierda y derecha respectivamente pero cuando voy al style.css no encuentro nada que se refiera ni al widget ni al logo ni al slider….
¿Tengo que añadirlo yo en el style.css? y en tal caso, ¿qué es lo que tengo que poner?
Gracias, María.
Hola Jose,
yo tengo un problema, y es que quiero poner la zona del widget encima del footer y no se en que archivo hacer la llamada de php.
He probado a hacerlo en el footer.php y si, me sale encima del footer, pero en todo el blog, y yo lo que quiero es hacerlo es solo en los posts de los blogs.
Alguna sugerencia?
Hola,
Si, añade el código:
en el archivo single.php.
Saludos
Hecho!!! gracias por todo. 🙂
Hola, muy buen post, estas el primero en google jeje, podrías decirme que debo cambiar del código que das en el post para añadir un area de widget en la zonta TOP? (en la parte arriba del todo) Gracias y enhorabuena por el post, veo que has ayudado a mucha gente. Espero tu respuesta! Graciass!
hola, el código del ejemplo ya te sirve, lo único que tienes que hacer es posicionar en el top de tu plantilla el código siguiente:
Hola Jose, buenas tardes.
Gracias por tu tutorial, la primera parte me ha servido, con tus pasos he conseguido modificar con tu código el phuntions.php y en mi área de widgets ya aparece un Header widget zone. Hasta ahí todo bien.
En cambio el segundo paso no me ha funcionado.
Yo trabajo con un tema hijo, y tanto el phuntions como el header los he modificado en el tema hijo, eso no debería influir para que no me este funcionando verdad? para eso se hacen los temas hijos, para modificar tu plantilla sin que las actualizaciones te lo cambien todo y vuelta a comenzar.
No se en que parte del header tengo que colocarlo en verdad, he probado en cuatro sitios diferentes, pero al tun tun porque ni idea donde se supone que actua. Y nada en ninguno de los cuatro lugares que lo he puesto he logrado verlo luego en la web activo el widget. En este caso lo quiero usar para incluir las redes sociales.
Me puedes ayudar? te lo agradecería mucho.
Hola,
Las modificaciones siempre las tienes que hacer en el tema que esté activo. Eso cada uno lo colocará donde lo desee ver. Además con maquetación css se puede posicionar donde se quiera. La segunda parte de código la debes colocar en cualquier parte del archivo header.php pero que esté dentro de la etiqueta
.Espero haberte ayudado,
Saludos
Saludos
Hola me funciona perfecto, gracias y click en banner por el esfuerzo,
tengo un problema, como sería el codigo para que me cree un div mas pequeño? resulta que quiero poner un widget de busqueda, pero el div se alarga todo lo ancho de la plantilla como reduzco el tamaño?
mil gracias
Hola, creo que tan solo debes darle un ancho desde css. Por ejemplo: width: 100px; o width: 20%;
Hola me gustaria saber si es posible colocar el widget por encima del menu. gracias
Hola, si tan solo deberás poner por encima del menú en la plantilla el siguiente código:
Saludos
Me funcionó bastante bien el código muchas gracias, pude poner un widget debajo de la imagen del header. Con esto evité tener que cambiar de theme por otro que si tuviera el widget en el header. Saludos
Oye muchas gracias, está genial tu post, fue de muchísima ayuda!!! 😀
Muchas gracias por su aporte, me sirvió muchísimo!
Hola, gracias por el tutorial
A mi me da error al meter el código en functions.php, tengo que utizar otro tipo de función. Por más vueltas que le doy no hay manera. Es como si le faltara algún llave de cierre…me extraña porque parace que a todo el mundo le funciona¿?
Estoy utilizando este código pero me gustaría saber porque no me funciona el tuyo y que diferencia hay. Gracias 🙂
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Widgetpie',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
y en el template .footer.php
;
Prueba de meter algo en before_widget, etc como está en el ejemplo
Hola, de maravilla tu tutorial, solo me queda la duda, estoy usando el area de header para poner los filtros de variaciones de woocommerce: ¿Como hago para que me ordene los widgets en 3 columnas?
Te escribo para decir que por arte de magia, cerré mi navegador volví a abrir y ya estaba todo solucionado.
Gracias por todooooooooo.
Ah vale perfecto! Nos parecia muy extraño
El código me funciona perfecto, puedo ver en mi web la info que coloque en el widget del header, pero cuando intento entrar a la administración con midominio/wp-admin solo me muestra una pagina en blanco. Alguna idea de como solucionar este detalle? Mi versión de wp es 4.
Sakudos y quedo en espera de toda la yuda posible.
Nos podrías indicar cual fue el código que pusiste exactamente?
Saludos, logre poner el nuevo widget pero he estados horas buscando y buscando pero no logro mover el nuevo widget a la izquierda, como logro eso?? ayuda
Hola, deberías mover
al div que represente tu columna izquierdaEntre que código tengo que ponerlo y en que php? No tengo mucha idea de maquetar. Podria alguien ayudarme? gracias.
Jose Aguilar, gracias por querer echarme una mano. La parte de funtions.php esta claro donde tengo que pegarlo pero en la parte del header.php no se donde ponerlo porque lo ponga donde lo ponga siempre se va colocar debajo del menú y no en la parte superior-derecha del encabezado.
Mi header.php y no se donde situar lo que me has dicho Jose Aguilar.
<?php
/**
* The Header for our theme.
*
* Displays all of the section and everything up till
*
* @package Striker
* @since Striker 1.3
*/
?>
<html id="ie8" >
<html >
<!–
<meta charset="» />
<link rel="pingback" href="» />
<script src="/js/html5.js» type=»text/javascript»>
<body >
<a href="» title=»» rel=»home»><img src="» alt=»»>
<a href="» title=»» rel=»home»>
<a href="» title=»» rel=»home»>
<img src="» width=»width; ?>» height=»height; ?>» alt=»» />
<a href="#content" title="»>
‘primary’ ) ); ?>
Si quisiera introducir 3 areas de cabecera, izquierda, central y derecha como cambiaria el funtions.php y como header.php? Gracias.
Se puede plantear de 2 formas:
1- Si quieres considerar las zonas como independientes deberás crear 3 funciones para cada una de las zonas (como detallo en este post) y luego en el header.php maquetar tus 3 divs uno al lado del otro con float:left;
2- También puedes considerar la creación de una única zona para widgets y añadir tantos widgets como quieras a esta zona (en tu caso 3). Después simplemente tienes que maquetar los divs de los widgets que podrás identificar editando ‘before_widget’ => ‘
genial el artículo.
Pero me surge una duda (y perdona pero es que de programación ando algo perdido)
¿esto me serviría para añadir unas 2-3 imágenes pequeñas de banderas a la derecha del header que linkeen a su idioma en un wordpress multisitio?
¿haciéndolo exactamente como indicas y añadiendo la foto en el widget?
gracias.
Si, claro que funcionaría. De hecho crear widgets es interesante cuando queremos crear plantillas que se puedan admisnitrar las posiciones. En tu caso, sería crear una nueva zona y ponerlo en la plantilla por la cabecera y verás que metas el plugin que metas desde la administración a tu nuevo widget deberá aparecer en la cabecera.
Excelente tutorial. Lo hice y conseguí crear la zona de widget. Mi problema es que necesitaria hacerla mas pequeña porque el contenido se pone en un lateral totalmente desubicado ¿alguna solucion?
Hola buenas tardes,
Tan solo tienes que englobar lo siguiente
con alguna etiqueta html, como por ejemplo:
Y luego maquetarlo via css.
Elejante muy claro , gracias.
Gracias artista! Me ha sido realmente útil. Con noticias así uno se cree que sabe de código y todo…jejej
Muchas gracias!
Buen tutorial recomendado y agradecido con visita en banner
Hola Jorge, muy buen post. Logre crear una zona widget en el header. Ahora me gustaría crear una del lado derecho de mi web y centrar el texto de mi post. Con que código lograría esto?. Saludos.
Tienes que crear distintas sidebars –> http://www.jose-aguilar.com/blog/crear-distintas-sidebar-en-wordpress/
Y luego en la plantilla llamarlas allí donde quieras que se vean.
Muy bueno el tutorial, lo he probado y va perfectamente (aunque yo lo he puesto en el footer).
Pero me queda una pregunta…y para colocarlo directamente en una zona del header o footer en concreto (pegado a la derecha o a la izquierda o en el centro, etc…)
Por que lo he intentado tocando la css pero lo que me hace es mover todo el footer.
Gracias
Hola, lo único que se me ocurre es que la llamada al widget la coloques dentro de un contenedor y lo maquetas al gusto:
Por ejemplo:
<div class="widget-footer"><?php if (!dynamic_sidebar('header-widget')) {} ?></div>