WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

Cómo cambiar el color de fondo de WordPress aleatoriamente

Jorge López by Jorge López
12 junio 2019
in Tutoriales
Reading Time: 4 mins read
0

Hace cosa de poco recibimos un mensaje a través de Facebook de un usuario que nos preguntaba sobre si había alguna posibilidad de cambiar el color de fondo de WordPress de manera aleatoria. Los colores juegan un rol importante en cómo los usuarios interpretan tu web, y sobre todo en cómo interactúan con ella. En este artículo, te mostraremos cómo cambiar el color de fondo de WordPress aleatoriamente.

Cómo añadir un color de fondo aleatorio en WordPress mediante código

Este método requiere que añadas código en tus archivos de WordPress. Si no lo has hecho nunca, o no tienes conocimientos sobre desarrollo web, te recomendamos que le eches un vistazo al artículo en el que hablamos sobre cómo editar ficheros de WordPress mediante un cliente FTP.

Lo primero que tienes que hacer es añadir este código al fichero functions.php de tu theme, o bien el plugin específico de tu theme para ello, si es que lo tiene.

Artículos relacionados

Cómo añadir la opción de suscribirte a comentarios en WordPress

5 octubre 2017

Cómo descargar toda la biblioteca multimedia de WordPress

21 diciembre 2017

Cómo esconder parcialmente la barra de administración de WordPress

3 marzo 2018

Cómo permitir que los usuarios puedan guardar sus posts favoritos

30 noviembre 2017
function wp_bg() { 
$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 simplemente genera un valor hexadecimal aleatoriamente y lo muestra, es decir, hace un echo del mismo.

Ahora debes editar el fichero header.php de tu plantilla. Localiza el la línea donde se incluye el tag <body>, que debería aparecer tal que así:

<body <?php body_class(); ?>>

Reemplázala con esta línea:

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

Guarda los cambios y sube el fichero que acabas de editar. Ahora visita la parte pública de tu web para ver cómo cambia el color de fondo cada vez que recargas la web.

color de fondo

Cómo utilizar un color de fondo a rayas como fondo de la web mediante un plugin

Este método es más sencillo y el recomendado a aquellos administradores que no han editado un fichero de WordPress en su vida.

Lo primero que tienes que hacer es instalar y activar el plugin Fabulous Background Colors. Para ello, ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.

Teclea el nombre del plugin (que como te hemos indicado es «Fabulous Background Colors») y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como el primer resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.

Este plugin funciona out of the box, por lo que no tendrás que configurarlo.

Ahora visita la parte pública de tu web, y verás unas rayas muy coloridas como color de fondo de tu web. Estas rayas cambiarán de color de forma muy elegante cada 5 segundos.

color de fondo

Cómo cambiar el color de fondo de la web con CSS

Casi todos los themes de WordPress compatibles con el estándar utilizan la función body_class(). Este tag para plantillas agrega una serie de clases CSS a la etiqueta body de tu theme. Estas clases CSS generadas por WordPress por defecto, se pueden utilizar para personalizar posts individuales, categorías, etiquetas…

Por ejemplo, si tu blog cuenta con una categoría llamada Fotografía, solo tienes que localizar la clase CSS en el tag body del código fuente de tu web cuando visites la página de archivos de dicha categoría.

Puedes cambiar el color de fondo de esta categoría en particular añadiendo este CSS al theme de WordPress que estés utilizando en estos momentos, o bien utilizando un plugin para insertar CSS.

body.category-fotografia { 
background-color:#faebd7;
}
color de fondo

De forma similar a esto, también puedes personalizar el diseño de un post en particular modificando la clase del body.

body.postid-65 { 
background-color:#faebd7;
}

Y hasta aquí nuestro artículo sobre cómo desactivar los feeds RSS en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!

Tags: backgroundbackground-colorcolor de fondo
ShareTweetSendSharePin
Jorge López

Jorge López

Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

Te puede interesar...

Tutoriales

WordPress: Cambia tu URL directamente desde la base de datos

18 diciembre 2024

La gestión eficaz de un sitio web en WordPress a menudo requiere adaptaciones técnicas,...

General

Protección avanzada de tu WordPress: Cómo blindar /wp-admin sin bloquear funciones necesarias

18 diciembre 2024

En el ámbito de la gestión de sitios web basados en WordPress, la seguridad...

Tutoriales

Cómo crear una tabla de contenidos en tus publicaciones con Rank Math

11 enero 2023

En muchas ocasiones, leer un artículo demasiado largo puede provocar que te aburras de...

Tutoriales

Cómo instalar Perl en un servidor desplegado en Clouding

20 julio 2021

Un buen desarrollador necesita contar con las herramientas, servicios y tecnologías adecuadas a sus...

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

No Result
View All Result
Plugin Imagify, optimizar imágenes
wordpress hosting NVME
Elegant Themes WordPress
elementor editor plugin




Últimos artículos

Redirigir tu feed RSS a Feedburner

4 agosto 2015

Cómo añadir el snapcódigo en WordPress

9 abril 2019

Cómo instalar WordPress mediante línea de comandos

20 septiembre 2019

Protege tu WordPress con el modo «I’m Under Attack» de Cloudflare y restricciones geográficas

12 febrero 2025

¿Sabes cómo conseguir una web económica para tu negocio?

28 agosto 2019
WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.