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.
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
24 comentarios, 8 referencias
+
#