Cambiar el background de WordPress

Posted by On agosto 10, 2016 4 Comments

Puede ser interesante, aunque más como ejercicio que cómo aplicación real el querer cambiar el background de WordPress.

Vamos a ver un par de ejemplos para lograrlo, teniendo en cuenta que nos puede servir para otras partes de la web, como por ejemplo los asides o el footer.

Cambiando el color del fondo de forma aleatoria

En la siguiente función vamos a generar un color aleatorio en hexadecimal y lo vamos a devolver para que el estilo de la caja lo tome.

function wpbackground() {
    $rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
    $color ='#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].
        $rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
    echo $color;
}

Esta función debemos de introducirla en nuestro archivo functions.php o en el plugin específico del tema (donde es recomendable).

Si la analizamos vemos que tan solo crea un array con todos los elementos de los valores hexadecimales y luego crea una variable color que coloca 6 elementos aleatorios del array en la cadena después del elemento # imprimiendolo en pantalla.

Pero para que esta función haga algo útil tenemos que llamarla y para esto nos vamos a nuestra plantilla y en la etiqueta body ponemos los siguiente:

<body <?php body_class(); ?> style="background-color:<?php wpbackground();?>">

De esta forma podemos cambiar el color de fondo de forma aleatoria de nuestra web.

Pero no solo el fondo, ya que estamos, podemos cambiar el color de la fuente, o de cualquier otro elemento que queramos.

Cambiar el background de wordpress de forma específica

La solución anterior es curiosa y nos puede servir para lograr algunos efectos curiosos, pero en realidad es poco práctica, pero si puede resultar más interesante el querer cambiar el color de fondo, o de la letra para según que página, categoría, entrada….

Para ello la función body_class() nos proporciona todas las clases que recibe el body y para leerlas tan solo hace falta abrir la sección que queramos y presionar f12 para que se nos abra el depurador:

f12

En la imagen vemos cómo aparecen todas las clases del body y la específica para esta página, por lo que ahora podemos trabajar con ella directamente y cambiar estilos tranquilamente desde el css:

body.page-id-2{
	background-color: green;
}

Por lo que podemos cambiar los estilos dependiendo de la categoría la página… tan solo con este simple truco.

Espero que os haya servido y si tenéis alguna duda, o idea comentéis y que compartáis el artículo.