Contenido

WordPress Widgets, ¿Como?

3 oct

+ 32

Bueno, he recibido varios mails pidiendome información de como instalar y adaptar wordpress widgets a nuestros themes, realmente es muy facil pero sino sabes algo de Inglés, si yo he podido… cualquiera puede :D, puede complicarse algo.

Voy a intentar explicarlo de forma facil.

Widgets

Instalación 

  • Descargar el plugin [Descargar]
  • Luego solo tendremos que descomprimirlo respetando la siguiente estructura.
- wp-content 
    - plugins 
        - widgets 
            | delicious.php 
            | gsearch.php 
            \ widgets.php 
    - themes 
        - classic 
            | functions.php (optional) 
            \ sidebar.php (optional) 
        - default 
            | functions.php (optional) 
            \ sidebar.php (optional) 
- wp-includes 
    - images 
        \ rss.png 
    - js 
        - scriptaculous 
            | builder.js 
            | controls.js 
            | dragdrop.js 
            | effects.js 
            | MIT-LICENSE 
            | prototype.js 
            | scriptaculous.js 
            | slider.js 
            \ unittest.js 
 

La instalación es más bien simple, ubicando los ficheros en su sitio ya dispondrémos del plugin instalado en el cual podremos comenzar a trabajar con nuestro theme para conseguir que los widgets funcione.

Por defecto tenemos los ficheros necesarios para los themes Kubrick y Classic, que se supone que son los ficheros exactos con los que viene WordPress con la modificación necesaria para que funcione WordPress Widgets. En ellos podemos ver que es lo que necesitamos para montar algo parecido en nuestro theme. Voy a poner un ejemplo para que veais más o menos por donde van los tiros, y luego vosotros con un poco de maña y muchas copias de seguridad podreis hacer funcionar los widgets en vuestro theme facilmente.

Imaginar que en nuestro fichero sidebar.php (generalmente está aqui, depende del theme) tenemos el siguiente código que nos muestra nuestro sidebar. En este ejemplo vemos que nuestro sidebar.php esta formado por una lista de elementos <li></li> con id sidebar, para este tipo de sidebar montaremos nuestro widget de la siguiente forma.

<ul id="sidebar">
 <li id="about">
  <h2>About</h2>
  <p>This is my blog.</p>
 </li>
 <li id="links">
  <h2>Links</h2>
  <ul>
   <li><a href="http://example.com">Example</a></li>
  </ul>
 </li>
</ul>

Esto nos mostraría una lista con un about, información sobre el blog, y links. La adaptación necesaria para nuestra modificación es muy facil.

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
 <li id="about">
  <h2>About</h2>
  <p>This is my blog.</p>
 </li>
 <li id="links">
  <h2>Links</h2>
  <ul>
   <li><a href="http://example.com">Example</a></li>
  </ul>
 </li>
<?php endif; ?>
</ul>

Y, ¿que pasa si nuestro sidebar no está formado por una lista?

Realmente no es ningún drama, estos chicos ya han pensado en eso y han montado un sistema la mar de sencillo y cómodo de usar. Imaginemos que nuestro sidebar es asi:

<div id="sidebar">
 <div class="title">About</div>
 <p>This is my blog.</p>
 <div class="title">Links</div>
 <ul>
  <li><a href="http://example.com">Example</a></li>
 </ul>
</div>

Como se puede ver la estructura es distinta, más basada en capas omitiendo el elemento <h2></h2> como título de nuestra lista de enlaces. Para poder disfrutar de esto tendremos que contar con un fichero functions.php en el cual registraremos nuestro sidebar con la función register_sidebar().

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));
?>

register_sidebar(), es una función con la que decimos al plugin que estructura ha de tener nuestro sidebar resultante despues de haberlo convertido a widgets. Cada parámetro indica una parte de la estructura que ha de mostrar el resultado.

'before_widget' => Inicio del sidebar
'after_widget' => Final del sidebar
'before_title' => Inicio del título del widget
'after_title' => Final del título del widget.

 De esta forma, despues de haber indicado como ha de construir nuestro sistema de widgets, simplemente nos queda integrarlo en nuestro fichero sidebar.php para que sea tratado al ejecutarse por nuestros usuarios.

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
 <div class="title">About</div>
 <p>This is my blog.</p>
 <div class="title">Links</div>
 <ul>
  <li><a href="http://example.com">Example</a></li>
 </ul>
<?php endif; ?>
</div>

Como podemos ver la llamada es exactamente igual, pero al estar registrado nuestro widget, lo tratará como nosotro deseamos que lo haga.

Y los widgets, ¿como se instalan?

Si algo tiene este plugin es la facilidad de empleo y el sistema de instalación de nuevos widgets no iba a ser algo diferente. Generalmente basta con insertar tus nuevos widgets en la carpeta wp-content/plugins/widgets/ y nos aparecerá una nueva opción en la configuración de nuestro sidebar.

Más Información

  1. WordPress Widgets API
  2. WordPress Widgets Theme Integration
  3. WordPress Widgets Plugins Integration
  4. Wigets para descargar
  5. Nube Comments Widget 2.3 (Adaptación de Nube Comments)
  • Saludos!
    Buen manual, aunque no sólo de wordpress vive el hombre :p
    Una curiosidad, el feed de esta noticia ha mostrado un error de la db por cula de la id de la noticia

    WordPress database error:[Duplicate entry '843' for key 1]
    INSERT INTO `wp_tla_rss_map` SET post_id = '843', advertisement = ''

  • Buenas Erudite, ¿donde te ha salido ese error?

    Parece cosa de los chicos de Text-ads-link, abrá que informarles.

  • Buen artículo. Sólo podría señalar que, según me parece, también es posible poner todo el contenido relacionado con el plugin en el directorio de plugins

  • Muy buen articulo, justo andava buscando como hacer que mi theme soporte widgets, boy ha provarlo en cuanto lo tenga echo les comento como me fue, gracias de antemano Alex.

  • #2 simplemente en el feed (http://www.anieto2k.com/feed/)
    aún sigue, asi que lo puedes ver :p

  • Me parecio muy clara la explicación y he lograro probarlo de manera satisfactoria. Pero hay una duda que aun tengo. ¿Solo es posible utilizar widgets registrado como “admin” o hay alguna forma de permitir a otros ususarios su manejo?
    Gracias.

  • Necesito modificar la cabecera para ponerle una foto con el logo de nuestra Peña. Me puedes ayudar con esto? toda ayuda sera bienvenida.

    Gracias.

  • Hola, muy buena su web, llevo dos meses en la blogosfera, utilice el servicio gratuito de wordpress, pero ahora estoy empezando mi nuevo proyecto de instalar wordpress en un servidor privado, pero tengo el siguiente problema y me vendria bien un poco de ayuda. Tengo el tema Regulus by Ben @ Binary Moon, de esta web http://www.binarymoon.co.uk/projects/regulus/, te agradecieria un monto si me ayudas a configurar los widgets de la barra lateral ya me he volvido loco tratando y nada

  • porque los widgets de la sidebar en el panel de administración, no se arrastran, se quedan pegados?

  • Muy útil! Lo utilizaré en mi próximo theme para wordpress :) gracias aNieto

  • Hola esq tng un problema, no instalé el plugin de widgets porque segun creo mi version de wordpress lo trae integrado, asique solo modifiqué mi theme para que se puediera.

    En Presentación/Widgets personalicé mi sidebar y me salía que todo bien que se había actualizado y tal. Pero al ir a verla no ha cambiado nada!!!

    Asique probé a instalar el plugin pero me dice que no lo puedo activar por un fatal error. K pasa?? K hago??

    Muxas gracias

  • Buenas BaDGirl, ese Fatal Error, es debido a que está encontrando las funciones definidas para el Widgets ya cargadas, por que tu versión ya lo trae instalado.

    Quizas el problema sea del theme, que no has colocado correctamente el código necesario para que aparezca.

    ¿Usas WP-Cache? Quizas te esté cacheando la salida y si esté funcionando.

    Saludos

  • He vuelto a revisar el codigo del theme y está bien, lo que tiene que poner en functions.php y lo que tiene que poner en sidebar.php

    El wp-cache no lo tengo…
    Esque antes de hacer lo del theme en el presentacion/widgets no me dejaba editar nada y me decia que mi theme no era apto, pero ahora me deja editarlo me dice que se cambiado pero en realidad no…

  • Vale tiene que ser cosa del theme pork con el Kubric si que va… mierda!

  • Need Help!!
    Hola yo la verdad no entendi nada de eso, ya he probado otros manuales y nada :S, porfavor ayudenme, les dejo aqui mi sidebar.php para ver si me pueden ayudar:

    <a href=”” title=””>
    <?php _e(‘RSS‘); ?>

    Ese es mi sidebar.php , ahora como quedaria el functions.php?,yo a lo que no le entiendo es a ‘before_widget’ => Inicio del sidebar
    ‘after_widget’ => Final del sidebar
    ‘before_title’ => Inicio del título del widget
    ‘after_title’ => Final del título del widget.
    Hay no se que poner por favor ayudenmeeee, muchas gracias de antemano , no supe si poner mi comentario aqui o en el foro si tengo que hacerlo en el foro diganme plis..

  • No salio el sidebar :S sorry, sidebar.php:

    <a href=”” title=””>
    <?php _e(‘RSS‘); ?>

  • oyes tengo 2 años leyendote y me gusto el nuevo estilo xDD

    necesito para php a html ya k yo uso WP desde el servidor o la pagina y no desde mi computadora lo ke kiero cambiar es lo siguiente (lo voy a escribir en otro comentario para ke lo rekuperes de akismet lo mas seguro es k lo marke como spam)

  • Hola Andres:

    Una vez mas estoy aqui molestando.
    Esta vez, me ha traido un verdadero misterio.( al menos para mi)

    Si gustas pasas a ver mi blog de perros y asi te enteraras mas o menos de que trata mi pregunta.

    En wordpress me ha surgido el problema para eliminar los widgets del sidebar. Por algun motivo misterioso el sidebar no me permite eliminar los widgets que voy agregando, lo que es unverdero problema ya que quiero eliminar algunos.

    Mi pregunta apunta a si hay alguna manera de meter mano a la base de datos para eliminar los widget que ya no quiero poner en el sidebar ( caso del enlace a blogalaxia)

    Agradeceria me pudieras dar algún consejo Andres.
    Saludos!!

  • Hola que tal, que me podrias pasar para entender mas sobre los widget para modificar un blog de wordpress, no entiendo mucho, y busque uno de encuestas pero no consigo, desde ya gracias

  • hola, soy usuario de wordpress gratuito pero he intentado agregar un reloj a mi sidebar y wordpress me borra siertas partes del codigo, que hago para burlar esto??? y no pienso pagar el dereho a edicion de plantilla, que hago??? garcias.. calqier persona que sepa favor comentar a: dnoscar@hotmail.com

  • Tengo un problema… me muestra los titulos de los widgets por defecto ya en H2, quisiera ponerlos en H3, pero tengo una duda…

    ¿Cómo hago con ese array? ya que son 2 sidebar, y no se como “adaptarlo”. Tengo este código en el fuction.php de mi theme (“whitespace”):

    Sólo eso, y leí en otros lados que debo editar el widgets.php de la carpeta includes, pero no hayo donde…

    Gracias.

  • Tengo un problema… me muestra los titulos de los widgets por defecto ya en H2, quisiera ponerlos en H3, pero tengo una duda…

    ¿Cómo hago con ese array? ya que son 2 sidebar, y no se como “adaptarlo”. Tengo este código en el fuction.php de mi theme (“whitespace”):

    Sólo eso, y leí en otros lados que debo editar el widgets.php de la carpeta includes, pero no hayo donde…

    Gracias.

  • No he entendido nada, ¿me puedes ayudar a activar el widget?Soy nueva en esto del wordpress, sólo lo utilizo para hacer deberes ya que lo utilizamos como bloc del instituto.

  • Estan muy buenos los post. Alguien puede ayudarme necesito publicar widgets en una hora determinada por ejemplo a las 02:00 am y no se como hacerlo o existe un plugin para eso . De ante mano gracias

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.