Modifica el fondo de tu tema de WordPress

por | Feb 25, 2021 | Temas WordPress

Modifica el fondo de tu tema de WordPress

Tienes un sitio web con un tema de WordPress que cumple la mayoría de tus expectativas, sin embargo te gustaría dar personalizaciones adicionales, por ejemplo destacar sutilmente el fondo, podría ser un color sólido, o podría ser una imagen.

Has evaluado y decides que será una imagen, usada como patrón, es decir que se repita para cubrir todo el fondo, además quedaría bien sólo en algunas páginas o entradas del sitio, ahora te preguntas, ¿cómo implementar esto?

Podrías tomar dos caminos o bien usar un plugin o bien usar código.

 

Plugins para cambiar imagen de fondo en WordPress

Esta es la alternativa más simple, actualmente la mayoría de plugins que tienen la funcionalidad de colocar una imagen de fondo lo hacen en el contexto de Gutenberg (que actualmente es el editor por defecto de WordPress), usando un bloque para colocar una imagen de fondo.

Pero no queremos esto, necesitamos una imagen a nivel de la etiqueta HTML body y que pueda ser usada en determinadas entradas y páginas.

El plugin que usaremos será XO Post Background

Plugin para cambiar fondo WordPress

Cuando instalas y activas el plugin, verás que en cada página y entrada aparecerá una nueva sección desde donde puedes agregar una imagen de fondo, tal como se muestra en la siguiente imagen.

Sección agregar imagen de fondo

Una vez agregada la imagen tienes la opción de previsualizarla y también de eliminarla.

Imagen de fondo agregada

Lo ideal sería que uses una imagen como patrón ya que por defecto se repetirá y no tienes opción a cambiar esto desde el plugin.

En este sitio web puedes encontrar algunos patrones que podrías usar.

 

Imagen de fondo en WordPress a través de código

La otra opción para agregar la imagen de fondo es usar directamente código CSS.

Lo primero sería que ya tengas la imagen de fondo que vas a a usar subida a tu WordPress, simplemente tienes que tener la url absoluta de la imagen.

Puedes ubicar la url de la imagen desde la opción de medios de WordPress al ver el detalle de una imagen verás que tienes la ruta absoluta, tal como se muestra en la siguiente imagen:

Detalle url absoluta imagen

Una vez tengas la url de la imagen que quieres usar, entonces puedes construir tu código CSS, el código CSS base sería:

body{
	background-image:url(xxxx);
}

 

Tendrías que reemplazar xxxx por la url absoluta de la imagen

Sin embargo el código anterior aplicaría para todo el sitio, por lo que si quieres en algunas páginas o entradas específicas tendrías que ayudarte de las clases que se generan en la etiqueta HTML body, por ejemplo para una página con un determinado ID sería

body.page-id-XX{
	background-image:url(xxxx);
}

 

En donde XX es el id de la página y xxxx es la ruta absoluta de la imagen.

Si deseas usar una entrada en lugar de una página tendrías que reemplazar page-id por postid

En el este artículo puedes ver alguna de las clases CSS más importantes que se crean a nivel del body.

Para agregar código CSS puedes revisar el artículo ¿Cómo agregar código CSS en WordPress?

 

Conclusión

Como has podido comprobar puedes ajustar un poco el diseño de tu sitio estableciendo una imagen de fondo para páginas y entradas y de esta forma darle un aspecto diferente a determinadas partes de tu web. Además puedes hacer esto ya sea utilizando un plugin o directamente a través de código.

Si te ha quedado dudas, en el siguiente video se detallan los puntos anteriores.