Los datos son, cuanto menos, curiosos. No creo que pueda resumir brevemente los resultados: es mucho mejor explorar cada uno a sus anchas los distintos datos que nos ofrece en su web o usar la tabla interactiva para consultar algún theme en especial.

A modo de resumen, os dejo unas gráficas que muestran a grandes rasgos el tiempo de carga medio y las consultas SQL que podréis encontrar en la mayoría de los themes de WordPress.

Se trata de Quality Control, un theme para WordPress pensado especialmente para usarse para estos fines. Permite crear de una forma cómoda un sistema de gestión de tickets, ordenados por estados, categorías, etiquetas y ramas. Sin duda de lo más útil para gestionar los bugs que vayan apareciendo en nuestros proyectos.

Además de un excelente diseño y una gran utilidad, este theme tiene otro punto a su favor: es totalmente gratuito y podéis descargarlo gratis o ver la demo.

Afortunadamente Víctor me avisó del problema, y ha dado la casualidad de que tenía una copia de la versión 1.0.2.3 en mi servidor de pruebas, así que la he subido a Sumolari.com y la podéis descargar desde aquí.

De momento Portal Colorido no soporta el nuevo gestor de menús de WordPress 3.0, sin embargo en cuanto esté disponible la versión estable de WordPress 3.0, comenzaré a preparar el soporte para el nuevo gestor de menús.

Por cierto, el salto de la versión 2.0.3 a la 2.0.6 no ha sido para nada intencionado, se trata de un error mío al escribir el siguiente número de versión. Se ve que no me fijé demasiado y puse directamente 6 en lugar de 5.

Podéis descargar esta versión desde aquí, y podéis ver una demostración aquí (página de demostración de WordPress) o aquí (página de demostración de Sumolari.com).

Así que, si todo va bien, y la solución que he dado al último error no genera ningún otro fallo, la versión 2.0 de Portal Colorido (bueno, ahora sería la 2.0.2) estaría disponible en uno o dos días.

Tras unas pocas semanas de desarrollo y después de rehacer el theme desde 0, en unas horas (o días) estará disponible en WordPress.org la versión 2.0 de Portal Colorido. Ya comenté las novedades hace dos semanas, a las cuales sólo le he de añadir una más que decidí integrar hace un par de días: los colores de cada categoría. Básicamente consiste en un listado de categorías, donde tú puedes establecer un color para cada categoría, de modo que al visitar una categoría con X color, toda la página cambiará su esquema de colores por el que has indicado anteriormente.

Ahora sólo queda pasar la validación de WordPress.org, ya que los themes, a diferencia de los plugins, se ven con el filtro de calidad siempre, cuando añades uno nuevo o cuando actualizas la versión, mientras que los plugins sólo pasan el filtro al añadirlos al repositorio por primera vez. Espero que pase la validación a la primera, si no es así, tardará unos días más en estar en la red.

Theme por defecto de WP Carousel 0.4

Nota: Este tutorial está destinado a los diseñadores de themes de WordPress y para poder entenderlo del todo son necesarios conocimientos básicos de PHP.

Desde la versión 0.4 de WP Carousel, los carruseles admiten themes, y claro, esto da mucho juego a los diseñadores, que con un poco de ingenio y creatividad, pueden hacer maravillas. También permite darle al carrusel un toque más acorde con el diseño de nuestros blogs, aunque claro, es posible que al distribuir nuestro theme con soporte de WP Carousel muchos usuarios se pierdan a la hora de instalar un segundo theme para WP Carousel.

Sin embargo, en la versión 0.4.0.1 añadí un parámetro muy útil a la función wp_carousel() (encargada de mostrar el carrusel): el parámetro $mode. Este parámetro acepta tres valores: show, get y array. El primero es que se toma por defecto y muestra el carrusel. El segundo devuelve el código HTML generado por el theme, mientras que el tercero devuelve una matriz con el contenido y la configuración del carrusel. Entonces disponemos de dos métodos diferentes para integrar WP Carousel en nuestro theme: llamándolo estableciendo el parámetro $mode en get (y reemplazando código) o llamándolo estableciendo el parámetro $mode en array, para más adelante crear un theme muy similar a los normales de WP Carousel, sólo que almacenado en la carpeta de nuestro theme e inseleccionable desde la página de opciones de WP Carousel.

Veamos cómo hacerlo.

Lo primero que haremos será crear una variable que almacene la matriz que devuelve wp_carousel() con el parámetro $mode establecido en array. Podemos crearla dentro de una función, en el archivo functions.php o directamente en el archivo correspondiente de nuestro theme (header.php, index.php, etc).

A continuación cargamos en nuevas variables la configuración del carrusel y sus elementos. La matriz que hemos obtenido antes tiene 3 índices: CONFIG, que almacena la configuración, ITEMS, que almacena los elementos e ID, que almacena la ID del carrusel (aunque ésta debemos definirla nosotros, así que no es de mucha utilidad).

He creado la variable $c_id para que el mismo código de un theme normal de WP Carousel sirva en nuestro theme especial y he tomado el valor del índice ID de la matriz del primer paso para hacer uso de éste, aunque podríamos haberlo tomado del valor que usamos como primer parámetro de la función wp_carousel().

A continuación utilizo la función eval() para crear la función encargada de cargar el código Javascript necesario para iniciar el carrusel. La siguiente línea tan sólo carga la función en el pie de página del theme.

Por último, cargamos el archivo wp-carousel-theme.php, que es el que contiene el theme en mi ejemplo. El código que podéis ver a continuación es el que utilizo para integrar WP Carousel en Portal Colorido 2.0.

$carousel_array = wp_carousel(ID_DEL_CARRUSEL, 'array');
$carousel_config = $carousel_array['CONFIG'];
$carousel_items = $carousel_array['ITEMS'];
$c_id = $carousel_array['ID'];
eval('if (!function_exists("wp_carousel_load_carousel_'.$c_id.'_js_code")) { function wp_carousel_load_carousel_'.$c_id.'_js_code() { wp_carousel_load_carousel_js('.$c_id.'); } }');
add_action('wp_footer', 'wp_carousel_load_carousel_'.$c_id.'_js_code');
require_once('wp-carousel-theme.php');

El archivo wp-carousel-theme.php contiene un theme normal de WP Carousel, la única diferencia es que la matriz $config en este caso es $carousel_config, al igual que la matriz $items es $carousel_items. Podéis seguir este tutorial para crear el theme de WP Carousel.

Como veis, no tiene demasiada complicación y no difiere demasiado del sistema general de creación de themes de WP Carousel.

Parte de Portal Colorido 2.0

La novedad más importante de todas es que he rediseñado el theme, aunque sigue una línea muy similar a la de la versión 1.x.  Hay algunas cosas nuevas en esta versión y algunas otras que he eliminado. Entre los añadidos a la versión 2.0 podemos encontrar las 32 sidebars, divididas en 4 grupos (nombrados de la A a la D). Cada grupo dispone de una sidebar para cada tipo de página que muestra WordPress (inicio, viendo un artículo, viendo una página, viendo una categoría, viendo una tag, viendo resultados de una búsqueda, viendo un archivo o viendo la página de error 404). Las sidebars ocupan posiciones fijas, estando la primera (A) justo antes del contenedor principal y la última sidebar (D ) justo al final de éste. El contenedor principal está divido en tres columnas: la izquierda (donde se muestra la segunda sidebar (B)), la central (donde se muestran los artículos, las páginas, los resultados de las búsquedas, etc) y la derecha (donde se muestra la tercera sidebar (C)).

Otro de los pilares del theme, que gustará a muchos y disgustará a otros tantos por sus repercusiones, es la personalización del color. Me he decantado por permitir cambiar todos los colores del theme sin necesidad de editar ningún archivo CSS, mediante una página de opciones del theme en el Panel de Administración de WordPress y un círculo cromático (con el cual no es necesario ni siquiera conocer el código del color que queremos usar). Lamentablemente, para poder ofrecer este grado de personalización he tenido que sacrificar el cumplir con los estándares de CSS para poder mostrar bordes curvos. Afortunadamente sólo rompo el estándar para añadir estas decorativas esquinas, así que no hay problema alguno con aquellos navegadores que no soporten los atributos no estándares que he utilizado: verán el diseño igual, pero con esquinas rectas.

Siguiendo con la línea de la versión 1.x, se podrá asignar un color (o mejor dicho, una combinación de colores) a cada página o artículo. Ahora mismo estoy trabajando en esta función, cuya base teórica es bastante sencilla: al ir a la página del theme veremos una lista de combinaciones de colores que podremos editar, eliminar y ampliar creando nuestras propias gamas mediante la introducción del código de cada color o seleccionando cada color desde un círculo cromático. A continuación podemos definir una combinación de colores para cada página o artículo, y al visitar un contenido que tenga asignada una gama de colores determinada, todos los colores de la página cambiarán a los que le corresponden a la gama del contenido. Algo similar a lo que ocurría en la versión 1.x de Portal Colorido, sólo que en la próxima versión se podrán cambiar las gamas de colores fácilmente y se podrá asignar una gama para cada artículo. Actualmente estoy trabajando en esto así que está sujeto a cambios, aunque supongo que no serán muchos.

También he añadido soporte para mis plugins, concretamente para WP Carousel y WP Main Menu. Sobre el soporte del WP Carousel, poco hay que decir. Aprovechando una de las novedades de la versión 0.4.0.1, que devuelve la matriz de contenidos en lugar del theme ya generado, he creado un theme para WP Carousel almacenado en la propia carpeta de Portal Colorido, de modo que se puede editar como cualquier theme (aunque no se puede utilizar coo un theme normal, ya que no aparece en el listado de themes). El soporte de WP Main Menu aún no está disponible (lo añadiré más adelante, cuando tenga acabadas las funciones de las gamas de colores).

El último añadido que he hecho ha sido la compatiblidad con el sistema de traducciones de WordPress (como ya he hecho con WP Carousel y WP Main Menu), de modo que copiando los archivos .mo y .po correspondientes, se podrá traducir instantáneamente el theme al idioma de WordPress.

Y ahora pasando a los elementos que he eliminado en esta nueva versión, he suprimido la posiblidad de arrastrar los widgets de la sidebar a posiciones diferentes, ya que no tenía demasiada utilidad y el theme no guardaba las nuevas posiciones. Por otro lado, también he suprimido los enlaces para compartir los artículos ya que hay muchos plugins que los añaden y lo hacen mejor que el propio theme.

Como podéis ver, la próxima versión de Portal Colorido ya está en marcha y aunque tardaré algo de tiempo en acabarla (de nuevo, no voy a dar fechas), no por ello su desarrollo está parado.

Theme por defecto de WP Carousel 0.4

Con este título ya os podéis imaginar de qué trata el artículo y cómo va el desarrollo de WP Carousel 0.4. Sobre lo primero, hoy explicaré cómo diseñar un theme para WP Carousel (similar a los de WP Main Menu pero con sus cosas particulares) y acerca de lo segundo, he de decir que va inesperadamente muy bien: ya sólo queda el Widget para la Sidebar, los múltiples carruseles en una (o varias) páginas, las traducciones, el valor por defecto de ciertas variables que se pueden configurar (como anchura de los paneles, mostrar flechas o no, etc), exportar e importar y la búsqueda y arreglo de errores. ¿Previsiones? No, gracias. Seguiré sin dar un fecha exacta, aunque voy bastante bien, prefiero seguir sin presión, aunque si tuviera que dar un porcentaje de lo completado de esta versión, diría que ya he superado el 60%.

Pero volviendo al tema, es hora de explicar cómo crear theme para WP Carousel. Por defecto vendrán un par de themes (tengo hechos 2, aunque puede que añada alguno más especialmente pensado para la sidebar), así que viendo el código de cada uno y comparándolo se podrán ver las principales diferencias, pero explicaré paso a paso cómo se crea un theme.

En cuanto a la composición de archivos, es la misma que los themes de WP Main Menu, totalmente idéntica, aunque eso sí, los themes de uno y de otro no son compatibles para nada. Como mucho, la página de opciones os puede detectar los themes de ambos, pero no son compatibles.

Partiremos de un archivo index.php que almacenará la información del theme, cosas como nombre del autor, versión, descripción y archivos CSS que usará (no se permiten añadir archivos Javascript), en una matriz llamada $theme. A continuación podéis ver el código del archivo index.php del theme Default:

<?php

	// THEME INFORMATION

	$theme['author'] = "Sumolari";
	$theme['author_url']= "http://sumolari.com";
	$theme['name'] = "WP Carousel 0.3 Look";
	$theme['url'] = "http://sumolari.com/wp-carousel";
	$theme['desc'] = __('Use WP Carousel 0.3\'s theme', 'wp_carousel');
	$theme['version'] = '1.0';

	$theme['css'] = array();
	$theme['css'][] = 'style.css';

?>

Otro archivo fundamental en los themes es el archivo theme.php, que mostrará el contenido del carrusel. Lo cierto es que en este punto los themes no son muy flexibles: tienen que tener una estructura bastante fija en el diseño. A continuación podéis ver el código mínimo de un theme de WP Carousel comentado y explicado.

<?php
		echo '<div class="nombre_de_mi_theme">'; // Es recomendable poner al principio una capa que tenga por clase el nombre del theme, así se evitan conflictos relacionados con el CSS de otros themes que estén activados en otros carruseles

		if ($config['ARROWS']): // Comprobamos si están habilitadas las flechas y en cada desplazamiento manual se debe desplazar como mínimo un panel
			echo '<a href="javascript:stepcarousel.stepBy(\'carousel_'.$c_id.'\', '.$config['SLIDE_POSTS'].')">'; // Enlace para adelantar un panel
			printf(__('Forward %s panel', 'wp_carousel'), $config['SLIDE_POSTS']); // Texto del enlace
			echo '</a>'; // Fin del enlace
		endif; // Fin de la comprobación

		if ($config['ARROWS']): // Comprobamos si están habilitadas las flechas y en cada desplazamiento manual se debe desplazar como mínimo un panel
			echo '<a href="javascript:stepcarousel.stepBy(\'carousel_'.$c_id.'\', -'.$config['SLIDE_POSTS'].')">'; // Enlace para retroceder un panel
			printf(__('Back %s panel', 'wp_carousel'), $config['SLIDE_POSTS']); // Texto del enlace
			echo '</a>'; // Fin del enlace
		endif; // Fin de la comprobación

?>

		<div id="carousel_<?php echo $c_id; ?>" class="stepcarousel"> <?php // Esta capa (div) debe tener esa ID y no otra, ya que StepCarousel (el script en el que está basado WP Carousel) crea los carruseles mediante las IDs de los elementos que los contienen ?>

			<div class="belt"> <?php // Otra capa necesaria para el correcto funcionamiento de StepCarousel. No se debe modificar la clase, puede hacer que falle el script ?>
				<?php foreach ($items as $i_id => $item): // Iniciamos el bucle que mostrará los elementos del carrusel, donde $i_id es la ID INTERNA de los elementos del carrusel (la ID que utiliza WP Carousel) y el índice ID de la matriz $item es la ID que tiene el elemento dentro de WordPress. En este ejemplo están todos los índices importantes de $item, hay más, pero no merecen ser explicados ya que no son usados mas que internamente por WP Carousel ?>
				<div class="panel" <?php if ($config['HAS_PANEL_WIDTH']) echo 'style="width:'.$config['PANEL_WIDTH'].';"'; ?>><?php // Esta es otra capa que debe tener de clase panel. El índice HAS_PANEL_WIDTH comprueba que el valor de la anchura personalizada del panel no esté en blanco y si es un valor aceptable, lo usa como anchura ?>
					<a href="<?php echo $item['LINK_URL']; ?>" title="<?php echo $item['TITLE']; ?>"><?php // Enlace hacia la URL del elemento el carrusel. Ojo, es la URL a la que debe dirigir el elemento, no la URL del elemento dentro de WordPress, así que un artículo que tenga por permalink /post, no tiene por qué llevar a /post, sino que puede llevar a http://sumolari.com (por ejemplo). El índice LINK_URL almacena la URL del enlace mientras que el índice TITLE almacena el título del contenido. Como podréis suponer, la matriz $items no contiene ninguna categoría, sino que anteriormente WP Carousel ha reemplazado las categorías por los artículos que hay en ellas ?>
						<img src="<?php echo $item['IMAGE_URL']; ?>" alt="<?php echo $item['TITLE']; ?>" title="<?php echo $item['TITLE']; ?>" width="<?php if ($config['HAS_IMG_WIDTH']) { echo $config['IMG_WIDTH']; } else { echo '100px'; } ?>" height="<?php if ($config['HAS_IMG_HEIGHT']) { echo $config['IMG_HEIGHT']; } else { echo '100px'; } ?>" /><?php // Ahora mostramos la imagen que hemos establecido para este elemento. El índice IMAGE_URL se corresponde a la URL de la imagen, el índice TITLE lo hemos comentado antes, el índice HAS_IMG_WIDTH es true si la anchura personalizada de las imágenes del carrusel es un valor aceptable, mientras que el índice IMG_WIDTH es el valor anteriormente comprobado. El índice HAS_IMG_HEIGHT e IMG_HEIGHT devuelven lo mismo que los anteriores pero sobre la altura. Podéis ver que la altura y la anchura por defecto es de 100px.  ?>
					</a><?php // Cerramos el link ?>
					<div class="panel-text"><?php // Esto es opcional, y es la capa en la que se mostrará la descripción de cada elemento. Se pueden hacer themes que no muestren la descripción y themes que no muestren el título, al igual que themes que no muestren ninguno o que muestren ambos ?>
					<?php echo $item['DESC']; // El índice DESC se corresponde con el extracto del artículo o el campo personalizado wp_carousel_carousel_text ?>
					</div><?php // Cerramos la capa de la descripción ?>
				</div><?php // Cerramos la capa del panel ?>
				<?php endforeach; // Finaliza el bucle ?>
			</div> <?php // Cerramos la capa con clase belt ?>
		</div><?php // Cerramos la capa del carrusel ?>

		<?php if ($config['ENABLE_PAGINATION']): // El índice ENABLE_PAGINATION devuelve true si se deben mostrar los iconos indicadores del panel en el que nos situamos ?>
		<div id="carousel_<?php echo $c_id; ?>-paginate" class="wp_carousel_default_pagination"><?php // La ID de esta capa no se puede modificar, pero la clase sí ?>
			<img src="<?php echo $path[6]; ?>/img/opencircle.png" data-over="<?php echo $path[6]; ?>/img/graycircle.png" data-select="<?php echo $path[6]; ?>/img/closedcircle.png" data-moveby="1" /><?php // Mostramos la imagen de carga e indicamos la URL a los iconos de la paginación. El índice 6 de $path devuelve la URL hasta la carpeta del plugin. Para cargar la carpeta del theme, deberíamos usar el siguiente código: $path[6].'/themes/'.$config['THEME'].'/imagen.png ?>
		</div><?php // Cerramos la capa de la paginación
		endif;

	echo '</div>'; // Cerramos la capa con la clase especial para evitar conflictos CSS

?>

Con esto ya tenemos dos tercios del trabajo hecho, pero nos queda el CSS, que también es algo restrictivo, ya que tenemos que partir de un código CSS básico que es:

.nombre_de_mi_theme .stepcarousel {
position: relative;
overflow: scroll;
}

.nombre_de_mi_theme .stepcarousel .belt {
position: absolute;
left: 0;
top: 0;
}

.nombre_de_mi_theme .stepcarousel .panel {
float: left;
overflow: hidden;
}

Os recomiendo que diseñéis teniendo en cuenta que hay otros themes y que puede que haya dos themes en uso a la vez, así que hay que procurar una máxima compatibilidad entre los themes.

Y esto es todo, así se crea un theme para WP Carousel. ¿Fácil? ¿Difícil? ¿Flexible? ¿Estricto? Puede que no sea el mejor sistema de creación de themes, pero es el que habrá en la próxima versión de WP Carousel, y seguramente en las posteriores.