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
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (13 votos, promedio: 4,62 de 5)
Cargando…
Comparte en las redes sociales

64 respuestas a “Crear zona de Widgets para añadir plugins”

  1. Salvador dice:

    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

    • Jose Aguilar dice:

      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>

  2. Lucas dice:

    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.

  3. Ricardo dice:

    Buen tutorial recomendado y agradecido con visita en banner

  4. Patri dice:

    Muchas gracias!

  5. Migue dice:

    Gracias artista! Me ha sido realmente útil. Con noticias así uno se cree que sabe de código y todo…jejej

  6. Ángel Mª Rodrigo dice:

    Elejante muy claro , gracias.

  7. Maria dice:

    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?

    • Jose Aguilar dice:

      Hola buenas tardes,

      Tan solo tienes que englobar lo siguiente

      < ?php if (!dynamic_sidebar('header-widget')) {} ?>

      con alguna etiqueta html, como por ejemplo:

      < ?php if (!dynamic_sidebar('header-widget')) {} ?>

      Y luego maquetarlo via css.

  8. Abel dice:

    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.

    • Jose Aguilar dice:

      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.

  9. Juanlu dice:

    Si quisiera introducir 3 areas de cabecera, izquierda, central y derecha como cambiaria el funtions.php y como header.php? Gracias.

    • Jose Aguilar dice:

      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’ => ‘

      ‘, añadiendo un identificador class=”widget” para poder acceder fácilmente a nivel de css.
  10. Juanlu dice:

    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.

    • Juanlu dice:

      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’ ) ); ?>

  11. Juanlu dice:

    Entre que código tengo que ponerlo y en que php? No tengo mucha idea de maquetar. Podria alguien ayudarme? gracias.

  12. yaret dice:

    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

    • Jose Aguilar dice:

      Hola, deberías mover < ?php if (!dynamic_sidebar('header-widget')) {} ?> al div que represente tu columna izquierda

  13. Anna dice:

    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.

  14. Anna dice:

    Te escribo para decir que por arte de magia, cerré mi navegador volví a abrir y ya estaba todo solucionado.

    Gracias por todooooooooo.

  15. Dies Arzola dice:

    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?

  16. luis dice:

    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


    ;

  17. Marilin dice:

    Muchas gracias por su aporte, me sirvió muchísimo!

  18. Melissa dice:

    Oye muchas gracias, está genial tu post, fue de muchísima ayuda!!! 😀

  19. 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

  20. Miguel dice:

    Hola me gustaria saber si es posible colocar el widget por encima del menu. gracias

  21. Ana Maria dice:

    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

  22. María dice:

    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.

    • Jose Aguilar dice:

      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

  23. Isra4772 dice:

    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!

    • Jose Aguilar dice:

      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:

      < ?php if (!dynamic_sidebar('header-widget')) {} ?>

  24. Raúl dice:

    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?

  25. María dice:

    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.

    • Jose Aguilar dice:

      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

      • María dice:

        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.

  26. María dice:

    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.

  27. Adela dice:

    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

  28. Tierralandia dice:

    Gracias por seguir ahí!
    Siempre olvido cómo hacerlo y siempre vuelvo a consultarlo
    😉

  29. angel dice:

    Disculpe con este codigo se puede poner la barra en la pagina de home?

  30. Victor dice:

    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

  31. Mike dice:

    Jose en mi tema no esta el archivo herader.php en que lugar ingreso el segundo codigo, gracias xD

    • Jose Aguilar dice:

      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

  32. Silvia dice:

    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

    • Jose Aguilar dice:

      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

  33. Andres dice:

    Amigo excelente!! Muchas gracias lo busque por varios lados

    Un gran saludo

  34. rita dice:

    muchas gracias me funciono, tarde en entender algunas cosas pero way..gracias !!

  35. camila dice:

    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!

    • Jose Aguilar dice:

      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

  36. Ecamisetas dice:

    Muy útil. Me ha costado mucho encontrar ésto. Muchas gracias y sirve perfecto.

  37. Juan Antonio dice:

    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

  38. JoséAngel dice:

    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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.