Podeis encontrar varias hojas de referencias CheatSheet para programadores en addedbytes, ordenadas por distinto lenguajes de programación. Y para programadores de templates para Wordpress podéis descargar la CheatSheet de Splashnology.

Recopilación de 267 temas gratuitos para Wordpress que podremos usar para nuestros clientes que necesiten una nueva apariencia en sus blogs o para uso personal en nuestros blogs en Wordpress. Algunos de los temas de la recopilación están hechos por diseñadores profesionales con un gran aspecto, y otros por diseñadores aficionados. Personalmente prefiero diseñar desde cero los temas pero para obtener un poco de inspiración a la hora de diseñar nos puede resultar bastante útil.

70 Temas gratuitos para Wordpress por TrazosWeb

14 Temas gratuitos para Wordpress por Mashable

83 Temas gratuitos para Wordpress por Smashing Magazine

100 Temas gratuitos para Wordpress por Smashing Magazine

¿Que necesitamos para empezar a crear nuestro Widget?

Necesitamos ante todo disponer de un theme que soporte Widgets, tal y como aprendimos en el tutorial “Wordpress: Crear theme para usar Widgets“. Recomiendo hacer las pruebas en nuestro servidor local por las posibles incidencias que podrían ocurrir mientras realizamos nuestro Wiget y una vez terminado se actualizaría en el servidor de producción. Podremos continuar cuando tengamos un theme que soporte Widgets.

Nombre para nuestro Widget

Como hemos comentado anteriormente, nuestro Widget mostrará los editores del Blog con sus últimas X entradas publicadas. Un nombre por ejemplo seria “Últimos post por autor”. Tendremos que comprobar si dicho nombre existe ya para otro plugin, para evitar posibles incompatibilidades si tenemos los dos instalados. Podríamos usar el buscador de plugins de Wordpress o el propio Google para verificar si existe un plugin con el mismo nombre.

Empezamos a crear el Widget

Comenzamos creando un directorio con el nombre de nuestro Widget en el directorio “wp-content/plugins/”. Aquí es donde Wordpress almacena los plugins. Recomiendo crear un directorio siempre que se crea un Widget, aunque éste contenga sólo un archivo, ya que más tarde podrías incorporarle más archivos y te verías obligado a tocar porciones del código del Widget. En nuestro caso vamos a crear el directorio “ultimos-post-por-autor” y dentro de él un archivo llamado “widget-ultimos-post-por-autor.php”

La cabecera de nuestro Widget

<?php
/*
Plugin Name: NOMBRE_DE_NUESTRO_PLUGIN
Plugin URI: URL_DONDE_EXISTE_INFORMACION_DE_NUESTRO_PLUGIN
Description: DESCRIPCION_DE_NUESTRO_PLUGIN
Version: VERSION_DEL_PLUGIN
Author: AUTOR_DEL_PLUGIN
Author URI: URL_DEL_AUTOR
*/
?>

Toda esta información se utilizará para identificar nuestro Widget en la administración de plugins para Wordpress, como podemos ver en la siguiente imagen.

Estructura principal de nuestro Widget

// Cuando se inicializa el widget llamaremos al metodo register de la clase Widget_ultimosPostPorAutor
add_action( "widgets_init", array( "Widget_ultimosPostPorAutor", "register" ) );

// Clase Widget_ultimosPostPorAutor
class Widget_ultimosPostPorAutor
{
    // Panel de control que se mostrara abajo de nuestro Widget en el panel de configuración de Widgets
    function control()
    {
        echo "Hola, soy el panel de control.";
    }

    // Metodo que se llamara cuando se visualize el Widget en pantalla
    function widget($args)
    {
        echo $args["before_widget"];
        echo $args["before_title"] . "Editores de " . get_option( "blogname" ) . $args["after_title"];

        echo "Hola soy tu Widget";
        echo $args["after_widget"];
    }

    // Meotodo que se llamara cuando se inicialice el Widget
    function register()
    {
        // Incluimos el widget en el panel control de Widgets
        register_sidebar_widget( "Últimos post por autor", array( "Widget_ultimosPostPorAutor", "widget" ) );

        // Formulario para editar las propiedades de nuestro Widget
        register_widget_control( "Últimos post por autor", array( "Widget_ultimosPostPorAutor", "control" ) );
    }
}

Una vez guardado nos dirigiremos al Panel de Control de plugins y lo activaremos. Una vez activado, vamos a las opciones de los Widgets, dentro del submenú apariencia, y lo añadiremos a nuestro sidebar. En nuestro template aparecerá nuestro Widget.

Datos dinámicos para nuestro Widget

Se añadirá fuera de la clase del Widget las llamadas a “register_activation_hook” y “register_deactivation_hook”, que serán las encargadas de llamar a los métodos de la clase cuando se active o desactive el plugin. Tambien se añadirán dos nuevas funciones llamadas “activate” y “deactivate” que serán para los métodos llamados.

// Cuando se active el plugin se llamara al metodo activate de la clase Widget_ultimosPostPorAutor
// donde añadiremos los argumentos por defecto para que funcione el plugin
register_activation_hook( __FILE__, array( "Widget_ultimosPostPorAutor", "activate" ) );

// Cuando se desactive el plugin se llamara al metodo desactivate de la clase Widget_ultimosPostPorAutor
// donde se eliminaran los argumentos anteriormente guardados, para tener una DB limpia
register_deactivation_hook( __FILE__, array( "Widget_ultimosPostPorAutor", "deactivate" ) );
function activate()
{
    // Argumentos y sus valores por defecto
    $aData = array( "SIZE_AVATAR" => 50, "NUMERO_POST" => 5 );

    // Comprobamos si existe opciones para este Widget, si no existe las creamos por el contrario actualizamos
    if( ! get_option( "ultimosPostPorAutor" ) )
        add_option( "ultimosPostPorAutor" , $aData );
    else
        update_option( "ultimosPostPorAutor" , $data);
}

function deactivate()
{
    // Cuando se desactive el plugin se eliminaran todas las filas de la DB que le sirven a este plugin
    delete_option( "ultimosPostPorAutor" );
}

Como se puede apreciar, hemos creado dos datos que son dinámicos para nuestro Widget. Uno llamado “SIZE_AVATAR” que será el que contenga el tamaño para el avatar de los editores. Y otro llamado “NUMERO_POST” que es el encargado de mostrar el número máximo de posts por editor.

Crear el panel de control para nuestro Widget

Usaremos el método control para la visualización y actualización de las opciones de nuestro Widget.

// Panel de control que se mostrara abajo de nuestro Widget en el panel de configuración de Widgets
function control()
{
    $aData = get_option( "ultimosPostPorAutor" );

    // Mostraremos un formulario en HTML para modificar los valores del Widget
    ?>
        <p>
            <label>Tamaño del avatar:</label>
            <input name="ultimosPostPorAutor_SIZE_AVATAR" type="text" value="<?php echo $aData["SIZE_AVATAR"]; ?>" />
        </p>
        <p>
            <label>Numero máximo de post:</label>
            <input name="ultimosPostPorAutor_NUMERO_POST" type="text" value="<?php echo $aData["NUMERO_POST"]; ?>" />
        </p>
    <?php

    // Si se ha enviado uno de los valores del formulario por POST actualizaremos los datos
    if( isset( $_POST["ultimosPostPorAutor_SIZE_AVATAR"] ) )
    {
        $aData["SIZE_AVATAR"] = attribute_escape( $_POST["ultimosPostPorAutor_SIZE_AVATAR"] );

        $aData["NUMERO_POST"] = attribute_escape( $_POST["ultimosPostPorAutor_NUMERO_POST"] );

        update_option( "ultimosPostPorAutor", $aData );
    }
}

En el Panel de Control de Widgets, dentro de “apariencia”, nos mostrará el sidebar con nuestro Widget en él. Si desplegamos las opciones podremos editarlas como se aprecia en la imagen a continuación.

Funcionalidad del Widget

<?php
function widget($args)
{
	// Variables
	$aData     = get_option( "ultimosPostPorAutor" );
	$aUsuarios = null;
	$aUsuario  = null;
	$aPosts    = null;
	$aPost     = null;
	global $wpdb;

    // Cargamos en un array todos los editores del blog
    $aUsuarios = $wpdb->get_results( "SELECT ID, user_login, user_nicename, user_email FROM " . $wpdb->users . " WHERE user_login != "admin"" );

    // Recorremos todos los editores
    foreach( $aUsuarios as $aUsuario )
    {
        echo "<li>
				  <a class="avtr" rel="nofollow" title="Avatar del autor " . $aUsuario->user_login . "" href="/author/" . $aUsuario->user_nicename . "/">
					 " . get_avatar( $aUsuario->user_email, $aData["SIZE_AVATAR"] ) . "
				  </a>
				  <div>
					  <a rel="nofollow"  title="Perfil del autor " . $aUsuario->user_login . "" href="/author/" . $aUsuario->user_nicename . "/">" . $aUsuario->user_login . "</a>
					  <a onclick="document.getElementById(\"slde-edit" . $aUsuario->user_nicename . "\").style.display = (document.getElementById(\"slde-edit" . $aUsuario->user_nicename . "\").style.display == \"block\" ? \"none\" : \"block\");" class="mas" href="javascript:void(0);"><span>[+]</span> Ver las últimas entradas publicadas</a>
					  <div class="post" id="slde-edit" . $aUsuario->user_nicename . "">
						  <ul>";

        // Cargamos en un array todos los post de un editor
        $aPosts = $wpdb->get_results( "SELECT ID, post_title, post_date, comment_count
                                       FROM " . $wpdb->posts . "
                                       WHERE post_status = "publish" and post_type = "post" AND post_author = " . $aUsuario->ID . "
                                       ORDER BY post_date DESC
                                       LIMIT " . $aData["NUMERO_POST"] );

        // Recorremos todos los post del editor
        foreach( $aPosts as $aPost )
        {
            // Obtenemos el permalink del post
            $sSlug = get_permalink( $aPost->ID );

            echo "<li>
                      <a title="" . $aPost->post_title . "" href="" . $sSlug . "">" . $aPost->post_title . "</a>
                      <span>" . date( "d/m/Y", strtotime( (string)$aPost->post_date ) ) . " - <a title="Comentarios para " . $aPost->post_title . "" href="" . $sSlug . "#comments">" . $aPost->comment_count . " comentario" . ($aPost->comment_count > 0 ? "s" : "") . "</a></span>
                  </li>";
        }

        echo "</ul></div></div></li>";
    }
}
?>

En el método “widget” hemos añadido la funcionalidad del Widget, es decir mostrar los editores de Blog junto con sus X post que han escrito. Como dije antes en el código fuente del Widget que podéis descargaros al final del tutorial se encuentra todo documentado para no perderse.

Hemos aprendido a crear un Widget, usar el objeto “$wpdb” de Wordpress para realizar nuestros consultas y añadir opciones al Panel de Control de Widgets en nuestra administración de Wordpress. Ésta es la forma que he utilizado yo para crear el Widget “últimos post por autor”, seguramente existan muchos caminos mejores o peores para crearlo, así que eres libre de modificarlo a tu antojo. Se pueden añadir más funcionalidades como por ejemplo un efecto slide para visualizar los post, como se puede ver en Ruta Relativa. Si usas este Widget puedes modificar el CSS dentro del plugin.

Enlace: Demo Widget últimos post por autor
Enlace: Descargar Widget últimos post por autor
Fuente: Valums

• La facilidad de actualizar varios plugins
• Editar imágenes en nuestro post como por ejemplo cortarlos mediante crop, voltearlos, redimensionarles, etc.
• Añadir videos embebidos fácilmente, tan sólo añadiendo su Url. La función reconoce varias web de video como por ejemplo, Wordpress.tv, Youtube, Google Videos, etc.
• Papelera de reciclaje para nuestros posts borrados.
• Reparar la base de datos, como ejemplo si algún plugin ha dejado residuos en ella.

Tenéis más información en el video que ha creado Wordpress.tv que en el que podréis revisar visualmente todas estas novedades de Wordpress 2.9 Carmen:

Fuente: Novedades de Wordpress 2.9 Carmen

La mayoría de los themes que nos descargamos actualmente para Wordpress disponen ya de una zona para añadir o quitar Widgets. En el caso que estemos creando un theme desde cero o añadiendo una nueva parte que contendrá Widgets la cosa se “complica”. Crear en el theme una zona con Widgets, acción también llamada Widgetizing, no es complicado. Empecemos poco a poco, los beneficios de usar Widgets en nuestros template son:

• Tener una estructura mejor dividida, con lo que podemos añadir o quitar partes de nuestro template rápidamente.
• Poder cambiar el aspecto de todos los Widgets cómodamente.
• Tener un template más “amistoso” para los usuarios que no saben programar.
• Tener varias áreas estructuradas con la posibilidad de cambiarlas.

HTML del Widget

<div id="sdbr-lscm" class="sdbr-cntd">
<div class="sdbr-titl">Últimos comentarios</div>
<div class="sdbr-cndr">
// Contenido del Widget
</div>
</div>

Registrar el Sidebar

Para poder tener una o varias zonas que contengan Widgets necesitamos registrar tantos sidebars como zonas quremos que integren Widgets en nuestro fichero functions.php.

    // Registramos el sidebar de la izquierda
    register_sidebar( array
    (
        "before_widget" => "<div id="sdbr-%1$s" class="sdbr-cntd">",
        "after_widget"  => "</div>",
        "before_title"  => "<div class="sdbr-titl">",
        "after_title"   => "</div>"
    ) );

El código se explica por si mismo, los argumentos before_widget y after_widget se utilizan para el contenedor del Widget mientras que los argumentos before_title y after_title se usan para el título del Widget. En este caso “Últimos comentarios”.

Añadiendo nuestro Sidebar al theme

Para que nuestro template contenga el Sidebar creado nos dirijimos al archivo sidebar.php y añadimos:

<?php if ( !function_exists("dynamic_sidebar") || !dynamic_sidebar() ) : ?>
// Sidebar por defecto
<?php endif; ?>

Esto llamará dinámicamente a nuestro Sidebar creado junto a todos sus Widgets. Si la versión de Wordpress no permite Sidebar dinámico esto cargará el código que tenemos dentro de la sentencia IF.

Añadiendo varios Sidebar a nuestro theme

    // Registramos el sidebar de la izquierda
    register_sidebar( array
    (
        "name" => "izquierda",
        "before_widget" => "<div id="sdbr-%1$s" class="sdbr-cntd">",
        "after_widget"  => "</div>",
        "before_title"  => "<div class="sdbr-titl">",
        "after_title"   => "</div>"
    ) );

    // Registramos el sidebar de la derecha
    register_sidebar( array
    (
        "name" => "derecha",
        "before_widget" => "<div>",
        "after_widget"  => "</div>",
        "before_title"  => "<h2>",
        "after_title"   => "</h2>"
    ) );

Como puede observarse la única diferencia es el añadido de un nuevo argumento llamado “name” que es una clave única para identificar este sidebar.

Añadiendo varios Sidebar al theme

<?php if ( !function_exists("dynamic_sidebar") || !dynamic_sidebar("derecha") ) : ?>
// Sidebar por defecto
<?php endif; ?>

Es idéntico al caso anterior pero esta vez a la funcion “dynamic_sidebar” le pasamos como argumento qué Sidebar vamos a usar.

Podemos encontrar más información en Widgets plugins y Widget themes, dos guías bastante extensas sobre los Widgets en Wordpress creada por automattic.

¿Como instalar el XML para realizar las pruebas del theme de Wordpress?

• Descargamos el archivo XML.
• Importamos el XML hacia nuestro Wordpress. Herramientas -> Importar.
• Seleccionamos el XML que hemos descargado y lo cargamos. En cuestion de segundos tendremos todos nuestros post, comentarios y categorías para realizar las pruebas al theme de Wordpress.

Con este sencillo XML podremos realizar las pruebas a nuestro theme de una forma más fácil y precisa, algo que para los que hemos desarrollado themes para Wordpress, sabemos que es algo muy útil.

Algunos usuarios ya disfrutan del plugin WpMooSnow que incluye en tu blog de Wordpress un bonito efecto nieve, pero sólo funcionaba para los usuarios de la librería para javascript llamada Mootools. Existe un gran número de usuarios que utilizan en lugar de Mootools la librería JQuery, y es por eso por lo que hemos querido adaptar este plugin para esos usuarios.

Ya, pero yo uso Mootools, ¿que hago?

Dirígete al post donde hablamos sobre el plugin y ahí te informamos de todo.

Me gustaría ver en acción el efecto nieve en una demo

Puedes ver una demo del plugin efecto nieve en JQuery para Wordpress funcionando.

¿Como lo instalo?

• Descomprime el archivo .zip
• Sube el directorio wpmoosnow al directorio de plugins “/wp-content/plugins/”.
• Activa el plugin desde el apartado “Plugins” de la administración de Wordpress.
• Ahora puedes cambiar las opciones desde el menú WpMooSnow que aparece en el menú Opciones.
• La opción más importante es la de “Contenedor donde se mostrarán los copos de nieve”, en la que tendrás que insertar el ID de la capa en la que quieras que apareza el efecto nieve. Si no indicas nada en el campo ID, se mostrará automáticamente en toda la web, de modo que es la opción más recomendable si no entiendes este punto. Si tienes dudas acerca de esto escríbenos un comentario y te ayudaremos.
• El resto de opciones puedes dejarlas tal y como están, pero si te apetece puedes trastear y configurar a tu gusto el efecto de los copos de nieve.
• Selecciona si usas Mootools o JQuery.

Descargar WpMooSnow: Plugin efecto nieve en JQuery para Wordpress

Descargar

Iconos de Navidad

Themes Navidad para Wordpress

Wallpapers de Navidad

Con todo esto ya tenéis vuestros ordenadores y blogs preparados para la Navidad.

Ya estamos en época estival, en breve comienza la Navidad y lo que ello conlleva: compra de objetos decorativos para el hogar, el árbol e incluso los hay que visten sus mascotas para la ocasión. Vuestro blog no podría ser menos y ahora podrá lucir un aspecto más Navideño. Hemos realizado un plugin efecto nieve en Mootools para Wordpress con un efecto de copos de nieve cayendo desde el “cielo”.

¿Pero ya existen muchos plugins efecto nieve, no?

Si es verdad, pero este efecto nieve en Mootools está actualizado a la última version de Mootools 1.2.4 por Dimitar Christoff y creado por Rutarelativa para Wordpress de forma que sea mucho más fácil la instalación y además es muy configurable. Por eso este este es tu plugin perfecto para mostrar efecto nieve en Wordpress y tener tu blog listo para las Navidades.

Puntos a favor de WpMooSnow

• Instalación sencilla con tan sólo un par de clics.
• Configuración en el panel de administración donde es posible cambiar colores, fuentes y efectos.
• Está testeado y es compatible con los exploradores IE6+, Firefox 2.0+, Opera 9+, Safari Windows 3.2.1+ y Google Chrome 2.0+.

Me gustaría ver en acción el efecto nieve en una demo

Puedes ver una demo del plugin efecto nieve en Mootools para Wordpress funcionando.

¿Como lo instalo?

• Descomprime el archivo .zip
• Sube el directorio wpmoosnow al directorio de plugins “/wp-content/plugins/”.
• Activa el plugin desde el apartado “Plugins” de la administración de Wordpress.
• Ahora puedes cambiar las opciones desde el menú WpMooSnow que aparece en el menú Opciones.
• La opción más importante es la de “Contenedor donde se mostrarán los copos de nieve”, en la que tendrás que insertar el ID de la capa en la que quieras que apareza el efecto nieve. Si no indicas nada en el campo ID, se mostrará automáticamente en toda la web, de modo que es la opción más recomendable si no entiendes este punto. Si tienes dudas acerca de esto escríbenos un comentario y te ayudaremos.
• El resto de opciones puedes dejarlas tal y como están, pero si te apetece puedes trastear y configurar a tu gusto el efecto de los copos de nieve.
• Selecciona si usas Mootools o JQuery.

Descargar WpMooSnow: Plugin efecto nieve en Mootools para Wordpress

Descargar

Ya, pero yo uso Jquery, ¿que hago?

Dirígete al post donde hablamos sobre el plugin y ahí te informamos de todo.