Muestra imágenes aleatorias con el Widget de texto de WordPress

This post was published 9 years ago. It may be exremely outdated.

Ayer expliqué como mostrar imágenes aleatorias con PHP, para lo cual era estrictamente necesario modificar el archivo PHP en el que íbamos a mostrar la imagen aleatoria. Hoy voy a explicar cómo crear un pequeño plugin para WordPress que mediante el uso de etiquetas especiales en el Widget de texto, muestre una imagen aleatoria que definamos anteriormente.

Nota: Podéis realizar las modificaciones en el archivo functions.php de vuestro theme. También pondré a vuestra disposición el resultado del tutorial en forma de plugin, sin embargo no lo actualizaré ni lo enviaré al repositorio de plugins, ya que la idea no es crear un nuevo plugin, sino adaptar el tutorial de ayer al Widget de texto de WordPress.

Bien, utilizaremos la siguiente estructura en las etiquetas:

[RANDOM_IMG]
URL||IMG_URL[]
URL1||IMG_URL1[]
URL2||IMG_URL2
[/RANDOM_IMG]

La primera y la última línea indican que vamos a definir imágenes y enlaces y que vamos a mostrarlas. La segunda (y la tercera) línea es la estructura básica de una imagen y un enlace. Donde pone URL se debe poner la URL del destino del enlace y donde pone IMG_URL se debe poner la URL a la imagen. “[]” (sin las comillas) indica que ahí acaba una imagen y que el siguiente código corresponderá a otra imagen. La última imagen no necesita el indicador anterior.

Vista la estructura básica, pasaremos a crear la función que reemplazará las etiquetas por el código PHP correspondiente. El código que usaremos es el siguiente, que está comentado, explicando para qué sirve cada línea:

// Añadimos el filtro
add_filter('widget_text', 'imagenes_aleatorias');
// Ahí va la función
function imagenes_aleatorias($text) {
// Primero separamos el texto en búsqueda de la etiqueta que indica el final de un conjunto de imágenes aleatorias
$array_text = explode('[/RANDOM_IMG]', $text);
// Crearemos una variable que contenga el código que analizará la función
$replace_text = $array_text[0];
$replace_text .= '[/RANDOM_IMG]';
// El primer elemento de la matriz hará referencia al código anterior a la etiqueta, así que eliminaremos
$array_text[0]  = str_replace('[RANDOM_IMG]', '', $array_text[0]);
// Ahora ya tenemos en una variable todas las imágenes y las URLs, así que vamos a separar cada una en un elemento de la matriz
$array = explode('[]', $array_text[0]);
// Por cada elemento de la matriz, añadimos un elemento a la matriz de contenido
foreach ($array as $key => $value)
{
$temp_explode = explode('||', $value);
$item[] = array(
'URL' => $temp_explode[0],
'IMG_URL' => $temp_explode[1]
);
}
// Movemos el puntero de la matriz al último elemento
end($item);
// Calculamos el último índice de la matriz
$last_index = key($item);
// Sacamos un número al azar
$key = rand(0, $last_index);
// Nueva matriz con los datos del elemento a mostrar
$showed_item = $item[$key];
// Reemplazamos el código [[SHOW_IMG]] por la imagen y el link
$replace_value = '<a href="'.$showed_item['URL'].'"><img src="'.$showed_item['IMG_URL'].'" /></a>';
$text = str_replace($replace_text, $replace_value, $text);
return $text;
}

Este código se debería añadir al archivo functions.php de vuestro theme, aunque si lo preferís, podéis descargar este archivo, que es el mismo código pero pensado para usarse como plugin de WordPress. Independientemente del método que uséis, el resultado debería ser idéntico.

5 Responses to Muestra imágenes aleatorias con el Widget de texto de WordPress

Muchas gracias por este mini-plugin! Funciona a la prefección! 🙂

Excelente plugin funciona muy bn pero es muy complicado meterle jquery o javascript, para que no cambie con la pagina sino cada x segundos ??? si se puede me avisas para mirar como gracias 🙂

Poderse se puede, pero el plugin era algo de ejemplo para el tutorial, realmente no es el objetivo del tutorial y requeriría bastantes cambios en el código, así que no es tan fácil como parece a simple vista.

Te recomiendo que busques por Google: seguro que ya hay un plugin para WordPress que hace lo que buscas.

Gracias sumolari, mmm la verdad lo he googleado y no encuentro algo asi, simplemente es lo que hace el tuyo mas que las imagenes sean aleatorias, si conoces alguno me avisas, gracias 🙂

😀 Muchas gracias, el código está excelente y funciona sin ningún contratiempo.

Leave a Reply