Nullable Blog [Ignoranto.Info]

Hola amigos bloggers y queridos lectores, en este post explicaré como hacer que nuestro blog tenga una imagen de cabecera aleatoria.

Requisitos (Se incluyen enlaces a descargas):

• Conocimientos de PHP [a nivel teletubi]
• Conocimientos de Plantillas Wordpres [Básico/Medio]
• Editor de imágenes [Gimp, Photoshop, mspaint.exe]
• Editor PHP [Aptana, Geany, notepad.exe]

Ok, primero necesitamos que nuetro Theme NO tenga la opción de “cabecera personalizada”, pero si la tiene la podemos desactivar, pero…

¿Por que no debe tener cabecera personalizada?
Por que nosotros mismos programaremos y modificaremos nuestro template (plantilla) para que cambie de cabecera cada vez que alguien visite nuestro blog

Antes de Eliminar la Cabecera personalizada

¿Cómo será el funcionamiento?
Crearemos funciones de PHP las cuales se encargarán de leer el contenido de un directorio (de imágenes), el cual insertará como background la dirección de la imagen extraida, todo esto al azar! Las funciones las guardaremos en el archivo functions.php de nuestra plantilla.

Archivos de nuestra plantilla que deberemos de editar (la mayoria de plantillas cuentan con estos archivos)

• style.css
• headers.php
• functions.php

Funciones PHP que usaremos

• scandir($directorio); crea un array con los nombres de archivo dentro de un directorio;
• rand($min, $max); devuelve un número aleatorio entre los valores $min y $max;
• count($array); cuenta la cantidad de datos dentro de un array;

Funciones de WordPress que usaremos

• bloginfo($parametro); imprime un valor según el parámetro ingresado, usaremos el parametro “template_url”, la función nos mostrará la url de la plantilla!

NOTA: Por seguridad antes de hacer cambios en dichos archivos debemos de crear una copia de los mismos (respaldo)

Despues de eliminar la Cabecera Personalizada

En este pequeño tutorial usaremos como ejemplo la plantilla Yashfa [clic para descargar] de WPgpl.com, ésta plantilla tiene la opción de “Cabecera personalizada”, como se dijo anteriormente quitaremos dicha propiedad para que nuestro template cambie por si mismo de cabecera en cada visita y editaremos los archivos anteriomente mencionados.

MODIFICANDO functions.php

Las plantillas para wodpress incluyen el archivo functions.php donde guardan un conjunto de funciones a utilizar y  funciones que añaden “capacidades extras” de la plantilla en nuestro panel de WordPress, el archivo functions.php de Yashfa tiene ésta línea de código [línea 134]

if ( function_exists('add_custom_image_header') ) {
 add_custom_image_header('header_style', 'admin_header_style');

Eliminaremos esas líneas, tambien podemos comentarlas (para comentar usamos /* texto no visible */), una vez que las hayamos comentado, eliminamos (opcionalmente) las funciones “header_style” y “admin_header_style”, ya que estarían en vano (y sería código innecesario) debemos de tener mucho cuidado de eliminar o no <?php  ?> ya que se está mezclando el código PHP con HTML y si olvidamos “cerrar” el código PHP probablemente nos encontremos con un terrible error!

Una vez que eliminamos las funciones y también la condición, ahora crearemos nuestra función para imágenes aleatorias! Las funciones serán las siguientes:

1. Una función que lea un directorio de imágenes
2. Una función que imprima el código css para incluir el fondo aleatorio

Crearemos 2 funciones, imagenAleatoria() y fondoAleatorioCSS(); también usaremos una variable global llamada $dir.

Variable global $dir
$dir contendrá la URL hacia la carpeta de imágenes de nuestro tema, se ha creado la carpeta “splash” exclusiva para guardar las imágenes de fondo usadas por nuestra plantilla (yashfa) modificada!, el valor de $dir que usaremos dentro de functions.php será >> “wp-content/themes/yashfa/images/splash”;

$dir = "wp-content/themes/yashfa/images/splash";

» Función imagenAleatoria(); ¿Cómo funciona?
Esta funcion lee un directorio de imágenes usando scandir(), nos crea un array y usando rand() generamos un número entre 2 y el tamaño máximo de nuestro array, pero…

¿Por que 2 como número minimo? explicación:
Cuando leemos un directorio siempre nos encontramos con estos subdirectorios . y .. (punto, y 2 puntos), los cuales nos permiten ir al directorio contenedor (un directorio atrás), por ello el valor mínimo será 2 para que al momento de llamar a una posición del array ésta no devuelva . o ..

Leeremos nuestro directorio $dir y crearemos un array de los archivos con scandir($dir), contaremos la cantidad de archivos usando count($array); generaremos una posición aleatoria en el array usando rand(), luego devolveremos el valor del array en la posición dada.

function imagenAleatoria()
{
 global $dir;
 $imagenes = scandir($dir);
 $cantidadImagenes = count($imagenes);
 $posicionImagenAleatoria = rand(2,$cantidadImagenes-2);
 return $imagenes[$posicionImagenAleatoria];
}

Lo que hace nuestra función

• global $dir; lee el contenido de la variable $dir, ésta variable está fuera de la función;
• $imagenes almacena el valor que devuelve la funcion scandir($dir), una lista (array) con el nombre de los archivos, sabemos que $dir es la url de nuestra carpeta splash, donde tenemos almacenadas nuestras imágenes;
• $cantidadImagenes será el número de imágenes que tenemos, count($imagenes) cuenta la cantidad de imágenes (cuenta los elementos del array);
• $posicionImagenAleatoria nos devolverá un numero aleatorio entre 2 y el número de elementos del array ($cantidadImagenes), le restamos 2 al final por que no contamos los 2 primeros elementos, ya sabemos que son . y .. éstos elementos NO son imágenes!
• return $imagenes[$posicionImagenAleatoria]; retorna el valor generado por la función, le indicamos que retorne el NOMBRE del archivo de $posicionImagenAleatoria

» Función fondoAleatorioCSS(); ¿Cómo funciona?
Nuestra función solo imprimirá el código CSS dentro de nuestra etiqueta DIV a la cual queremos añadir el estilo de background-image, su creación es sensilla

function fondoAleatorioCSS()
{
 $nImagen = imagenAleatoria();
 echo "background-image:url(";
 bloginfo(template_url);
 echo "/images/splash/$nImagen)";
}

Lo que hace ésta función

• $nImagen = imagenAleatoria(); aquí llamamos a la función imagenAleatoria(); y el valor devuelto lo guardamos como $nImagen;;
• echo “background-image:url(“; imprimimos de manera INCOMPLETA el valor CSS background-image;
• bloginfo(template_url); llama a la función de wordpress y esta imprime la url de nuestra plantilla;
• echo “/images/splash/$nImagen)”; termina de imprimir el código CSS background-image;

Listo! Hasta ahora ya tenemos preparada nuestra plantilla para que muestre fondos aleatorios, ahora falta editar el archivo header.php de nuestra plantilla y llamar a la función PHP fondoAleatorioCSS(); para que muestre la dirección de nuestra imagen de fondo!

MODIFICANDO header.php

Yashfa Modificado

Dentro de éste archivo tenemos la etiqueta <div id=header></div>(estamos retocando la plantilla yasfha, ésta etiqueta puede tener otro ID si se modifica otra plantilla), llamaremos a la función fondoAleatorioCSS() dentro de <div> para que nos muestre la url de  la imagen de fondo.

<div id="header" style="<?php fondoAleatorioCSS();?>">

Llamado a fondoAleatorioCSS(); su contenido es impreso dentro de “style:”, esto genera un background-image con la url de la imagen aleatoria a mostrar!

MODIFICANDO style.css (Opcional)
Solo modificaremos la propiedad “background” de #header{} por background-position, background-repeat, etc. Esto es opcional y debería quedar así:

Propiedad original: background: #000 url(images/header.jpg) 0 0 no-repeat;
Cambiar por: background-repeat:no-repeat; background-position:center top;

IMPORTANTE
La modificación de la cabecera en el archivo header.php es EXCLUSIVA para ésta plantilla, otras plantillas pueden tener otro ID para la etiqueta que guarda la imagen de fondo, es necesario leer el código fuente (generado) y el archivo style.css para conocer el ID de la etiqueta que tiene imagen de fondo.

NOTAS EXTRAS
Luego de éstas modificaciones solo hace falta colocar imágenes de 950*170 píxeles en la carpeta images/splash dentro de la carpeta de nuestra plantilla (yashfa).
Los usuarios de windows deberán tener mucho cuidado al subir imágenes al host, ya que también se suele cargar el archivo thumb.db siendo este “no visible”

Los archivos modificados los encuentras aquí están compresos en formato.rar y libre de virus