Resultados

WP Carousel es el plugin para WordPress que te permite añadir carruseles de artículos y páginas a tu theme de forma fácil y rápida. Actualmente está en su versión 0.4.0.8.

En caso de cualquier problema o duda con el plugin, podéis reportarlo en el foro.

Descripción:

El objetivo de WP Carousel es permitir a cualquiera añadir un bonito carrusel donde mostrar artículos individuales,  los de una categoría de su blog o páginas a su elección, y así ofrecer una mejor experiencia al navegar. Pero WP Carousel también puede usarse para anunciar productos o contenido de interés, como hacen muchas páginas web.

Además, otra base fundamental de WP Carousel es que sea fácil de instalar, aplicar y personalizar. Hoy en día no hay que ser un experto para publicar en la red, y tampoco debería ser necesario para añadir un carrusel a tu web. Para añadir un carrusel basta con copiar y pegar un código que genera el propio plugin o añadir un Widget a la Sidebar de tu theme. Personalizarlo es muy sencillo con los nuevos themes, añadidos a partir de la versión 0.4

La página de opciones de WP Carousel permite personalizar las opciones que más se suelen usar de forma fácil, así que, por ejemplo, no es necesario editar ningún archivo para cambiar el tamaño que tendrán los artículos en el carrusel ni para ocultar o mostrar las flechas o la paginación.

Pero la sencillez no quita la funcionalidad, y es por eso que si hay alguna cosa que no aparece en la página de opciones y quieres modificarla, tienes acceso total a los archivos del plugin.

Cambios:

V 0.4.0.8

• Arreglado el error que ocultaba el contenido del artículo o de la página que se estaba viendo si ésta estaba configurada para ocultarse del index del blog.

V 0.4.0.7

• Arreglado el error que hacía que no se mostrasen las imágenes de los artículos si usábamos como imagen la miniatura del artículo.
• Arregladas las llamadas a la variable $path de los themes que vienen por defecto.
• A partir de ahora los themes por defecto cargar archivos CSS .css y no .php que envía cabeceras de CSS.

V 0.4.0.6

• Arreglado el error que cambiaba los artículos que se veían en las páginas de artículos anteriores.
• Añadida la posibilidad de no mostrar artículos del carrusel en el bucle del index de WordPress al cargarse el carrusel en archivos diferentes a index.php o al usarse la función para integrar WP Carousel en themes de terceros.

V 0.4.0.5

• Arreglado el error que hacía que los elementos del carrusel no se mostrasen según el orden establecido.

V 0.4.0.4

• Arreglado el error del bucle foreach de la línea 88 de wp-carousel.php, que apareció a partir de la versión 0.4.0.1 de WP Carousel

V 0.4.0.3

• Arreglado un error que no impedía mostrar el formulario de inserción correctamente al estar activado WP Main Menu

V 0.4.0.2

• Arreglado un fallo que hacía incompatible el plugin con versiones anteriores a la 2.9 de WordPress
• Arreglado un fallo de HTML del theme default-sidebar
• Arreglado un fallo que mostraba siempre el mismo número de versión del theme activado
• Arreglado un fallo que hacía incompatible WP Carousel y WP Main Menu
• Arreglado un fallo en la traducción española de WP Carousel

V 0.4.0.1

• Arreglado un fallo que hacía que si no se mostraban todos los carruseles, algunos carruseles fallaban
• Arreglada una frase mal traducida al español
• Añadida la posibilidad de devolver el código HTML generado por la función wp_carousel

V 0.4

• Se ha reescrito el plugin desde 0, cualquier bug reportado en versiones anteriores ya no afecta a esta versión.
• Se ha cambiado el método de almacenamiento del contenido. Los datos guardados de las versiones anteriores no son compatibles con la nueva versión.
• Se ha añadido soporte para themes. Por defecto hay 3 themes, aunque cualquier puede crear los suyos propios o modificar los que vienen por defecto.
• Se ha añadido soporte para mostrar artículos individuales y páginas en el carrusel.
• Se ha añadido la posibildad de no mostrar en el bucle de WordPress (sólo en el bucle del inicio del blog) los artículos o las páginas que tengan marcada la opción de ocultarse.
• Se ha añadido la opción de mostrar u ocultar las flechas.
• Se ha añadido la opción de mostrar u ocultar la paginación (nueva de esta versión).
• Se ha añadido las páginas de exportación e importación, con las cuales se puede hacer copias de seguridad y restaurar el plugin desde esas copias.
• Se ha mejorado el sistema de orden de los elementos del carrusel.
• Se ha añadido la posiblidad de personalizar la URL de la primera imagen de los artículos y las páginas, al igual que la URL del enlace mediante campos personalizados.
• Se ha añadido la página de desinstalación del plugin, que borra las entradas de la Base de Datos creadas por WP Carousel.
• El carrusel es capaz de cargar la imagen usada como miniatura del artículo en WordPress 2.9 (y posteriores).
• El plugin pasa de necesitar un campo en la Base de Datos a necesitar dos (uno para elementos del carrusel y otro para configuraciones).
• Se ha eliminado la opción de añadir el enlace “Sigue leyendo”.

V 0.3.0.4.1

• Se ha cambiado la altura mínima de las imágenes del carrusel de 250px a 50px, aunque de todos modos la altura por defecto sigue siendo 250px.

V 0.3.0.4

• Arreglado el error que hacía que no se pudiese determinar la altura de las imágenes del carrusel.
• Arregladas un par de frases del idioma “Español”.
• Eliminada la opción “Determinar altura para las imágenes del carrusel”. Ahora si se deja el campo de altura en blanco se usará la altura por defecto y si se introduce una altura, se usará ésta.

V 0.3.0.3

• Arreglado el error que hacía que no se ajustase la altura de la imagen si se quería ajustar.

V 0.3.0.2

• Arreglado el error que hacía que cuando un carrusel no tenía contenido personalizado se excedía el tiempo límite de ejecución del script.

V 0.3.0.1

• Arreglado el error que ocurría al activar la versión 0.3 y que hacía referencia a la línea 4 del archivo wp-carousel/lang/index.php.

V 0.3

• Añadida una nueva función:
  • Multilíngüe: Ahora puedes elegir entre inglés y español en el Página de Opciones Generales (POG)
  • Ordenar el contenido personalizado: Se puede elegir si mostrar primero artículos o contenido personalizado y también el orden de los distintos contenidos personalizados de forma sencilla
  • Múltiples carruseles: Puedes crear múltiples carruseles, cada uno con sus propias categorías de artículos (que se puede compartir) y con su contenido personalizado. Cada carrusel es independiente de los demás
  • Widget para la sidebar: Añade carruseles de forma mucho más fácil al disponer de un widget para la sidebar, con él no será necesario ni modificar el theme que usamos
  • Página principal: Ahora WP Carousel tiene su propio link en el menú principal del Panel de Administracion de WordPress
• Función mejorada:
  • Mejoras de diseño: La versión 0.3 detecta el número de imágenes que debe deslizar el carrusel cuando se pulsan los botones de desplazamiento manuel y si detecta que son 0, no muestra lo botones
  • Un sólo campo en la Base de Datos: Ahora WP Carousel tan sólo necesita un único campo en la tabla de opciones de WordPress, con lo que se hacen menos consultas a la Base de Datos y se reduce el consumo del plugin. Además esto hace que exportar la configuración de WP Carousel a una nueva instalación de WP Carousel sea mucho más fácil y rápido

V 0.2.2

• Arreglado el error que no permitía guardar como unidad para tamaños personalizados los porcentajes

V 0.2.1

• Modificado la condición que inicia el plugin: Ahora ya no es necesario especificar una categoría para que el carrusel aparezca, basta con añadir contenido personalizado.
• Arreglado el error que hacía que no se pudiese eliminar el contenido personalizado.

V 0.2

• Añadida una nueva función:
  • Contenido personalizado: Esta función te permite añadir más paneles (artículos) al carrusel sin tener que crear un artículo en WordPress. Basta con especificar la URL de la imagen, la URL del link y el texto que acompaña a la imagen en la página de opciones de WP Carousel.
• Añadidas más opciones de configuración:
  • Movimiento automático.
  • Tiempo entre cada movimiento automático.
  • Número de artículos a mover en cada movimiento automático.
  • Número de artículos a mover en cada movimiento manual.
  • Usar el mismo tamaño del panel de cada artículo para el tamaño de cada imagen.
  • Usar una altura personalizada para las imágenes del carrusel.
• Editada una opción de configuración:
  • Unidad del tamaño del contenedor de cada artículo: Ahora se una lista de dos opciones (px y %).
• Arreglados algunos bugs relacionados con la dirección a los archivos del plugin.

V 0.1

• Primera versión disponible.

Descargas:

En la página del plugin en WordPress.org está disponible la última versión del plugin para que quien quiera pueda descargarla.

Se puede ver una demostración del plugin en esta página.

Hay una demostración del carrusel en sí (no del plugin, sino del resultado del mismo) en esta página. Es la demostración del resultado de este tutorial.

Tutoriales (español)

Estoy actualizando los tutoriales para la versión 0.4 de WP Carousel, así que es posible que algún contenido se borre, se añada o se modifique en los próximos días. Disculpad las molestias.

Instalar WP Carousel

WP Carousel se instala como cualquier otro plugin, para lo cual hay dos posibles métodos.

El primero consiste en descargar la última versión del plugin desde esta página, descomprimir el archivo y subir la carpeta obtenida a la carpeta plugins, dentro de wp-content, en la raíz de WordPress.

El segundo consiste en ir a la página de Plugins, dentro del Panel de Administración de WordPress y una vez allí ir hacer clic en Añadir nuevo. En el buscador basta con introducir WP Carousel, y aparecerá el plugin el primero de la lista.

Una vez hecho esto, el plugin se activa desde la lista de la página de Plugins de WordPress.

Primeros pasos por la interfaz de WP Carousel

WP Carousel 0.4 viene con una interfaz totalmente rediseñada y puede que al principio resulte un poco confusa, así que explicaré cómo funciona la nueva interfaz, qué es cada cosa y a dónde lleva cada enlace.

Menú

Comenzaré por el menú, que está situado a continuación del enlace a la página de gestión de los comentarios de WordPress.

El menú ha sido rediseñado completamente en la versión 0.4, aunque aún tiene algunos aspectos en los que es similar al de versiones anteriores. Como podéis ver, hay en total 6 subenlaces dentro del enlace principal.

El primer sublink lleva al mismo lugar que el primer link: la página principal de WP Carousel. Esta página no tiene mucha utilidad en principio (sólo la añadí porque el link principal debía llevar a alguna página, y si no existen carruseles, no podía llevar a una página de un carrusel inexistente). Actualmente se muestra sólo un recuento de carruseles y el idioma en el que está WordPress (y por tanto, WP Carousel).

El segundo enlace, Carrusel o, lleva a la página de opciones del carrusel con ID 0. En esta página se encuentran todas las opciones del carrusel, que veremos más adelante. Cuando hay más carruseles, aparecen más enlaces como este.

El tercero y el cuarto, Exportar e Importar (respectivamente), llevan a la página de exportación y de importación. La primera genera un código que al ser pegado en la segunda, reemplaza el contenido que haya en el carrusel por el que había cuando se copió el código. Con esto se pueden hacer copias de seguridad y restaurarlas.

El quinto enlace, Desinstalar, borra el contenido que ha añadido WP Carousel a la Base de Datos. No afecta a otros plugins ni a WordPress. Es útil si se quiere desinstalar WP Carousel sin dejar rastros en WordPress o si se quiere resetear los carruseles.

El último enlace, Añadir, inserta un carrusel más en la Base de Datos.

Página de opciones del carrusel

Página de opciones

Cada carrusel dispone de su propia página de opciones, ya que centralizar todas las opciones en una sóla página haría bastante complejo manejar el plugin. Todas las páginas de opciones son idénticas en estructura, tan sólo cambiará el contenido específico de cada carrusel.

La página está dividida en 3 grandes bloques: la cabecera y el gestor de elementos, el formulario de inseción y edición de elementos; y el selector de themes y opciones de visualización.

El primer bloque muestra, por un lado, los mensajes importantes sobre cambios en el carrusel (mensajes como que se ha actualizado un elemento, o que se ha eliminado un elemento del carrusel. La mayoría de estos mensajes tienen un enlace para deshacer los cambios en caso de error) y el código para mostrar manualmente el carrusel en el theme (hay que tener en cuenta que hay un Widget para la Sidebar que permite mostrar cualquier carrusel sin necesidad de hacer ninguna modificación); por otro lado, muestra el contenido que hay añadido al carrusel y los enlaces para editarlo, eliminarlo o abrir su enlace. Los enlaces para eliminar el contenido tan sólo lo quitan del carrusel, no de WordPress (excepto los contenidos personalizables, que al sólo existir en el carrusel, desaparecen). El enlace de editar abre el editor de WordPress en el caso de ser un artículo o un página mientras que en el caso de los contenidos personalizables, se actualiza el formulario de inserción de contenido para que permita modificar los contenidos personalizados. El enlace para previsualizar el elemento carga la página que se abriría al hacer clic sobre dicho elemento en el carrusel.

El segundo bloque es el bloque en el que se muestran los formularios para añadir y editar contenidos. El formulario es bastante simple y se explica por sí sólo. Este bloque (y el tercero) se divide en pestañas. La primera muestra el formulario para añadir contenido generado por WordPress (categorías, artículos y páginas) mientras que el segundo muestra el formulario para añadir contenido personalizable. Cuando se editan contenidos personalizables, la primera pestaña pasa a contener el formulario de edición y la segunda pasa a ser un enlace hacia el formulario de inserción de contenidos.

El tercer bloque muestra dos puntos importantes del carrusel  (que se dividen en dos pestañas): el theme y las opciones de visualización. Respecto al primero, la estructura del selector de themes es prácticamente idéntica a la del gestor de themes de WordPress mientras que las opciones son tan sólo un formulario divido en tres grupos con opciones de diversos tipos.

Cada grupo de opciones permite personalizar una serie de configuraciones del carrusel. El primer grupo, Configuración del carrusel, tiene 4 opciones. La primera permite activar o desactivar las flechas mientras que la segunda te permite definir el número de paneles que se deslpazan en cada movimiento. Las flechas sólo se muestran si están activadas y el número de paneles desplazados es mayor que 0. Las otras dos opciones se permiten mostrar la paginación (esos circulitos que te indican en qué panel estás y te dan la posiblidad de saltar a cualquier otro panel) y activar el modo bucle (al acabar de mostrarse el último panel, regresa al primero), respectivamente.

El segundo grupo permite configurar el tiempo y el número de paneles desplazados en cada movimiento automático. El tiempo se india en milisegundos y si se deja en blanco este valor o el número de paneles desplazados es menor que 0, se deshabilitará automáticamente este tipo de movimiento.

El último grupo permite definir la anchura de los paneles y la altura y anchura de las imágenes. Las tres opciones deben indicar número y unidad, siendo algunos valores posibles, 100px o 12%, pero no 100 ni px ni 12 ni %.

Definiendo el contenido que se mostrará en el carrusel

Jerarquía de los campos personalizados

Desde WP Carousel 0.4, los carruseles soportan themes, y cada theme es un mundo. Esto  quiere decir que es tarea del theme mostrar u ocultar las flechas según esté configurado o mostrar la paginación o incluso mostrar el texto y las imágenes, es por esto por lo que puede que un theme muestre el título de los elementos del carrusel y otro muestra la descripción o incluso que no muestre nada.

Sin embargo, es importante saber cómo se puede definir el contenido de cada elemento que se mostrará. Los contenidos que se mostrarán principalmente son el título, la descripción (ya explicaré más adelante qué es), la imagen y el enlace. Estos elementos se definen de forma muy similar en artículos y páginas, y de forma muy diferente en contenidos personalizados. En estos últimos, el mismo formulario para añadirlos nos limita y a la vez nos simplifica el determinar esta información.

Pero pasemos a los artículos y las páginas. En ambos el título, la URL del enlace y la URL de la imagen se definen de la misma manera. Respecto al título, es el mismo que el original del artículo o de la página y no se puede modificar. La URL del enlace se puede definir de dos maneras distintas: o bien usando el permalink del propio elemento o bien mediante el campo personalizado wp_carousel_link_url. Si no existe dicho campo personalizado o está en blanco, se tomará el permalink. La URL de la imagen se puede definir de tres formas diferentes: si se usa WordPress 2.9.1 o posterior se puede usar la miniatura del artículo como imagen para el carrusel, si dicha miniatura no está definida, se tomará la URL de la imagen definida en el campo personalizado wp_carousel_image_url y si este campo personalizado está en blanco o no existe, se tomará la primera imagen del artículo o de la página.

Respecto a las descripciones, quizá usar ese término para hacer referencia a ellas no fue una idea brillante. Las descripciones consiste en el fragmento del artículo (o de la página) que se mostrará. Si existe el campo personalizado wp_carousel_carousel_text, se tomará como descripción el valor del mismo. Si este campo personalizado, se toma el valor del extracto.

En la imagen que tenéis arriba a la izquierda se explica todo esto de nuevo.

Creando un theme para WP Carousel

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.

Integrando WP Carousel en nuestros themes

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.

Tutorials (english)

Coming soon.