Tecnología y Coaching para Emprendedores

WordPress: Cómo Crear Zonas Listas para Widgets

wordpress

En el artículo anterior comentaba como crear un tema propio desde el parent theme Thematic. Lo que a veces sucede cuando utilizamos bien un parent theme, bien un tema de otros autores, es que justo en la zona que queremos poner un widget no hay la opción para crearlo desde el menú de administración de WordPress. En este artículo lo que veremos es como crear nuestras propias zonas listas para widgets y poder administrarlas desde la interfaz de WordPress.

1. Modificar el archivo functions.php

Lo primero que tenemos que hacer es añadir las siguientes líneas de código a nuestro archivo functions.php


<?php 
 if ( function_exists('register_sidebar') )
       register_sidebar(array(
	'name'=>'header_widget',
        'before_widget' => '<liclass="widget">',
        'after_widget' => '</li>',
        'before_title' => '<h3 class="widgettitle">',
        'after_title' => '</h3>',
  ));
?>

 

Una vez hecho esto, vamos a la plantilla en la que queremos poner el widget, si por ejemplo es el header, vamos a header.php. Allí donde queremos añadir el widget escribimos el siguiente código:


<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header_widget') ) : ?>;
<?php endif; ?>

 

Lógicamente sustituiremos “header_widget” por el nombre que hayamos escogido en functions.php. Una vez hecho esto, vamos al panel de administración de WordPress a Apariencia > Widgets y veremos que se ha creado una nueva zona de widgets con el nombre que hayamos escogido.

Hemos de tener presente que es importante donde ponemos esta línea de código, porque esto condicionará en que parte de la plantilla se visualiza.


Comentarios

  • Yeow

    Muchas gracias! lo pondré en practica a ver si me sale

  • edd

    Que perfecto, primer tutorial que sirve! muchas gracias!

  • edd

    Si me sirvio : ), disculpa me podrías ayudar en una cosita, es que quiero que el widget quede como el “Most Commented Stories” de esta pagina http://www.ign.com/ Que esta alineado a la derecha, Pero siempre que agrego un widget nuevo lo coloca en la parte baja y queda el espacio vacío. Entonces me gustaría saber como puedo hacer para “Widgetizar” esa parte de mi tema. Agradezco tu pronta ayuda. PD: Deberias añadir la suscripción a los comentarios en este blog. Mi correo es earmandoperez@gmail.com Estaré revisando la pagina. Gracias.

    • Sandra

      Lo puedes hacer a través de CSS. Un saludo

  • Héctor

    Excelente…
    Justo lo que necesitaba. Gracias, realmente me ha sido de gran ayuda

  • Pascual

    Soy bastante novato en esto y quiero poner el widget en la parte superior derecha de la cabecera, y no se donde pegar la segunda parte del codigo, en header.php Te agradeceria si me puedes ayudar gracias

    • Sandra

      Hola, los puedes poner dónde lo quieras tener dentro de los tags correspondientes..

  • pirulón

    Eres un crack!!! Muchas gracias por tu tiempo!!! Lo fácil que es algo que por ahí la gente se empeña en complicar!!

    Un saludo!

    • CreativaSfera

      Gracias a ti por este comentario que anima a seguir escribiendo! Me alegro que te haya ayudado:-))

  • pablo

    EXCELENTE! :) resulto muy fácil

    gracias!

  • Emanuel Aguirre

    Muchas Gracias! con esto ya no tengo limite de personalización!

    Me parece que la segunda parte deberia ser 

    sin los “;” despues de cerrar “>”

    • Sandra

       tienes razón Emanuel, muchas gracias, lo acabo de actualizar!

  • Beatrizreguant

    Hola Sandra!! me interesa mucho saber como hacerlo y lo explicas muy bien, lo probé en mi plantilla ultra y me da el siguente error al guardar el archivo, a ver si sabes que puede ser:

    Warning: Cannot modify header information – headers already sent
    by (output started at
    /homepages/42/d407206350/htdocs/wp-content/themes/ultra/functions.php:404)
    in /homepages/42/d407206350/htdocs/wp-admin/theme-editor.php on line 103

    • Sandra

       Hola Beatriz, este error a mí me trajo loca. Es tan fácil como ir al archivo functions.php y no dejar espacios en blanco después del cierre del último tag. El documento debe terminar con el ?> y.. problema solucionado!

  • nakano

    hola muchas gracias me ayudo mucho, ¿saves como añadir widget en single.php ?

    • Sandra

      se hace igual, editando el archivo single.php

  • Jorge

    Como hago para activar un plugin dentro de un widget.

    Saludos.

    • Sandra

      me imagino que te refieres a poner el contenido de un plugin en una zona de widgets, no? Vas a Apariencia > Widgets y allí en el panel izquierdo si el plugin es un widget lo puedes arrastrar a una de las zonas de widgets. Nota: no todos los plugins son widgets y por tanto, muchos no permiten hacer esto.

  • mari carmen

    Hola,
    Para cambiar una imagen según el idioma ¿donde tendríamos que crear el código?
    Gracias

    • Sandra

      Pues si la imagen la cargas desde la zona de widgets, entonces deberás de hacerlo desde allí.

  • Enrique

    Hola buenas tardes,
    Muchas gracias por tu aporte.
    Conseguí lo que quería, pero no entiendo por qué, cuando he modificado “functions.php” se me han desfigurado los acentos y las eñes, quedando como sigue:

    diseño y fabricación (en lugar de diseño y fabricación)

    Mi plantilla es Architeckt Theme.
    Gracias.

    • Sandra

      Hola Enrique, es posible que hayas dejado algún espacio en blanco al final de functions.php, justo después de ?>

      Espero que puedas solucionarlo sin problemas. Un saludo, Sandra

  • Tere

    Hola me gustaría saber como se llama cada zona. ¿hay algún esquema?. ¿O le puedo poner el nombre que yo quiera?
    Quisiera poner botones para ir a redes sociales al lado del widget de buscar a ser posible en la barra de menú en la cabecera. Gracias, Un saludo.

    • Sandra

      Hola Tere, le puedes poner el nombre que quieras, en el caso del ejemplo el nombre es header_widget, pero lo puedes cambiar al que tú prefieras

  • Héctor Pinargote

    Excelente tutorial. Lo tengo entre mis marcadores de google porque es de referencia cuando estoy desarrollando un sitio en WordPress

  • Gregori

    holas amigo muy interesante tu post y como se pondria arriba de las entradas de wordpress estatico y que aparesca en todas las paginas, te agradeceria mucho si contestas mi pregunta.
    gracias Saludos Exitos.

    • Gregori

      lo probe y me funciono pero kiero poner y que mi sidebar derecho suba hasta arriba y asi encaje en ese espacio arriba de las publicaciones

    • Sandra

      pues creando una zona de widgets fuera de la zona de posts

  • Nuria

    De momento todos los posts son geniales y más para una novata como yo en wp.
    Estoy empezando y mi intención es hacer toda la web en wp.
    Querria preguntar una cosita, como hacer que las banderas de qTranslate no salgan verticales?
    Es decir querria ponerlas de forma horizontal en la cabecera.
    Es posible?
    Gracias

    • Sandra

      Hola Nuria,

      Sólo has de sobreescribir el CSS para que salgan horizontales.

      • Nuria

        Voy a probarlo.
        Gràcies

        • Nuria

          Bon dia;
          Ayer al final no pude ponerme a mirar el CSS hasta la noche y si te soy sincera voy muy perdida.
          No he sabido encontrar la línea que tengo que sobreescribir o si debo incluir algún código.
          Podrías plis darme alguna pista….
          Muchas gracias de antemano por tu tiempo.
          Por cierto he leido que das cursos? Esto me interesa.

        • Nuria

          Sandra ya lo solucione!
          Solo hacia falta estar más despejada….
          Gracias por la solución. Como decías es solo cuestión de ir al CSS.

  • Raul

    Hola, tengo un problema, quiero añadir el widget de entradas más recientes en una de mis páginas. Mi tema solo me permite insertar widgets en la sidebar y el footer, por tanto si quisiese widgetizar la página en la que quiero insertar el widget ¿que nombre tendría que ponerle al archivo functions.php para que surja efecto?

  • jaime

    Hola Sandra:

    Soy un poco novato en todo esto de la programación. El tema es quiero poner un contenedor de widget debajo de mi menu, para poner la banderas del Qtranslate. He seguido los pasos que tienes en tu tutorial. He pegado el texo al final de funtions.php y despues he pegado el otro texto en header.php pero no me aparece este nuevo widget en la sección de widgets.

    ¿Como puedo solucionarlo?

    Muchas gracias, me encantan tus tutoriales

  • Lázaro Castells

    Hola, muy buen post, !Excelente!. Hace bastante tiempo que he querido hacer eso, pero todavía no puedo activar los widgets.
    Dice esto:
    “Esta barra lateral no está disponible y no se muestra en tu sitio. Elimina cada uno de sus widgets para eliminar por completo esta barra inactiva.”
    Le agradecería que me informará sobre como incluir widgets en mi página, pues el tema que utilizo no me lo permite.
    Muchas gracias y espero su respuesta.

    • Sandra

      Hola Lázaro, deberías contactar al desarrollador del tema para saber a qué es debido este error, yo sin verlo no té sé decir. ¡suerte!

      Sandra

  • Isabel

    Hola Sandra, hermoso el nuevo diseño de esandra.com, quisiera preguntarte como hiciste para añadir ese formulario de acceso a tu menú. Ya que me gustaría hacer lo mismo con una plantilla de wordpress que estoy trabajando. Gracias!!

    • Sandra

      Gracias Isabel, necesitas un plugin de miembros para activar la gestión de usuarios como en esta web. El resto es CSS para el diseño. Un saludo!

  • Lois

    Muchas gracias!!! Gran tutorial ahora solo me falta manipular el css para que quede precioso.

  • Alfredo

    Felicidades por tu blog!
    ¿Sabes como cambiar de idiomas las categorías y etiquetas usadas con woocommerce?
    Gracias

    • Sandra de CreativaSfera

      Hola Alfredo, muchas gracias! Para traducir Woocommerce, necesitas el plugin WPML. La versión “Multilingual CMS” te viene con una extensión para traducir todo lo que aparece en Woocommerce. Muchos clientes míos lo utilizan y la verdad es que es una maravilla, vale la pena invertir los 79 dólares (alrededor de 60 euros, dependiendo del cambio). Te paso el enlace:

      http://wpml.org/purchase/

      Un saludo!
      Sandra

  • viviana

    me ha sido de gran ayuda, pero si solo necesito que me salga en las paginas de las categorias donde tengo que poner el codigo

    me podrias ayudar muchas gracias

    • eSandra

      Hola Viviana, depende de la plantilla.. un saludo y suerte! Sandra

  • Alejandro

    Hola Nuria y Sandra.. me pueden decir que hay que modificar en realidad en al CSS llevo días mirando y no doy con el, sería de mucha ayuda. Gracias

    • eSandra

      hola Alejandro, sólo reviso el código de mis alumnos directos, si quieres consultoría personalizada, ponte en contacto conmigo por email y te informo de mis tarifas. Un saludo y suerte! Sandra

  • Javier

    Tengo un blog xxx.wordpress.com, gratuito. Hay algún widget para cumplir con la ley de cookies? Estoy muy asustado con este tema, y como en wp gratuito no tenemos acceso a plugins aumenta la preocupación.

    Gracias

    • eSandra

      Hola Javier,

      el problema de wordpress.com es que no admite plugins, así que no sé qué solución hay cara a la LOPD… entiendo tu preocupación, han puesto ya algunas multas..

      un abrazo!
      Sandra

  • Kelitron!

    muy buen tutorial Sandra! Felicidades!

  • Alex

    Hola Sandra, gracias por el tutorial. Tengo un problema, y es que no me funciona.

    PHP me da el siguiente error:

    Fatal error: Call to undefined function funcion_exists() in sidebar.php on line 3.

    Está calcado al tuyo y no va :(

    • Luis

      Alex te lo dice en el error,
      Call to undefined function funcion_exists()
      Error al intentar llamar a la funcion funcion_exists() porque no esta definida o no la has hecho.
      En realidad es function_exists()
      No es funcion_exists()
      ¡Suerte!