🖼 Cómo añadir diferentes fondos para entradas y páginas de WordPress
El tema estándar de WordPress tiene un aspecto limpio, pero tras un mes de uso uno empieza a desear un poco más de personalidad. Un fondo de color para una página clave o una imagen de fondo para entradas específicas es una forma sencilla de hacer que el contenido destaque visualmente sin rediseñar todo el sitio.
Puede lograrlo de tres maneras: un par de líneas de CSS, un pequeño fragmento de PHP o un plugin ya preparado. Ninguno de estos métodos requiere conocimientos profundos de desarrollo front-end; solo necesita saber dónde insertar el código.
A continuación examinamos los tres métodos con fragmentos de código concretos, ubicaciones de archivos y una mirada honesta a los posibles escollos.
💡 Resumen rápido:
- Abra header.php y localice la función
body_class(). Esta genera clases CSS únicas para cada página y entrada, lo que le permite apuntar fondos hasta el nivel de una sola entrada. - Añada una regla CSS con la clase apropiada en style.css. El fondo se aplicará solo a la página o entrada objetivo sin afectar al resto del sitio.
- Cree un campo personalizado y añada un fragmento PHP en functions.php. El fondo se establecerá mediante una URL de imagen directamente desde el administrador de WordPress, sin editar manualmente el CSS.
Cómo añadir un fondo mediante CSS y body_class
WordPress asigna automáticamente un conjunto de clases CSS a la etiqueta <body> a través de la función body_class(). Entre ellas se encuentran identificadores únicos para entradas o páginas específicas, lo que le permite apuntar fondos con precisión quirúrgica.
Asegúrese de que su tema llama a body_class(). Abra Apariencia → Editor de archivos del tema y localice el archivo header.php:
Dentro de header.php, busque la etiqueta de apertura <body>. Junto a ella debería estar la función:
1 <body <?php body_class(); ?>>
Si solo ve <body> sin la función, añádala. La mayoría de los temas modernos ya incluyen esta llamada, pero vale la pena comprobarlo.
Ahora abra cualquier página de su sitio y vea su código fuente (clic derecho → Ver código fuente de la página en Chrome). Para una entrada individual verá algo como esto:
1 <body class="single single-post postid-1 single-format-standard logged-in">
Para una página la salida será diferente:
1 <body class="page page-id-2 page-template-default logged-in">
Estas son las clases clave a las que puede apuntar con CSS:
.single, todas las entradas individuales. Cualquier estilo aplicado a esta clase afectará a cada artículo del blog..postid-N, una entrada específica con ID = N. Ideal para estilos puntuales..page, todas las páginas del sitio..page-id-N, una página específica con ID = N..single-format-standard, entradas con el formato estándar..logged-in, se aplica solo a usuarios que han iniciado sesión (útil para depuración).
Ahora añada CSS al archivo style.css de su tema. Por ejemplo, para establecer un fondo negro para todas las entradas:
1 .single { 2 background-color: #000; 3 }
Y para establecer una imagen de fondo para una página específica con ID 2:
1 .page-id-2 { 2 background-image: url('/wp-content/uploads/2026/01/my-background.jpg'); 3 background-size: cover; 4 background-position: center; 5 }
Puede encontrar el ID de la página o entrada en el administrador: abra la lista de páginas, pase el cursor sobre el título y verá post=2 o un número similar en la barra de estado del navegador. En el editor Gutenberg el ID aparece en la URL: post.php?post=2&action=edit.
La ventaja de este método es su simplicidad: no toca PHP, no instala plugins y sabe exactamente qué clase hace qué. La desventaja es que cuando cambie de tema todos los estilos de style.css se perderán a menos que esté usando un tema hijo.
Cómo establecer un fondo mediante un campo personalizado y PHP
Si necesita cambiar la imagen de fondo directamente desde el administrador sin tener que sumergirse en el CSS cada vez, el método del campo personalizado funciona bien. Usted crea un campo para la URL de la imagen y un pequeño fragmento PHP en functions.php la inserta en el atributo background-image.
Añada el siguiente código al functions.php de su tema activo. Si usa un tema de terceros, asegúrese de utilizar un tema hijo; de lo contrario, los cambios se perderán en las actualizaciones:
1 <?php 2 /** 3 * Adds an inline style for body background via a custom field. 4 * Replace 'myprefix' with your own unique prefix. 5 */ 6 function myprefix_custom_field_background() { 7 $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true ); 8 if ( $background ) { 9 ?> 10 <style type="text/css"> 11 body { 12 background-image: url( "<?php echo esc_url( $background ); ?>" ); 13 } 14 </style> 15 <?php 16 } 17 } 18 add_action( 'wp_head', 'myprefix_custom_field_background' );
La función se engancha en wp_head y el estilo en línea se inserta en el <head> de la página. esc_url() sanitiza la URL para eliminar caracteres potencialmente peligrosos, mientras que get_post_meta() recupera el valor del campo para la entrada actual.
Ahora abra cualquier entrada o página en el administrador, localice el bloque Campos personalizados y cree un campo llamado myprefix_background_image. Pegue la URL completa de la imagen de fondo como valor. Guarde y el fondo se aplicará solo a esta entrada.
Si el bloque de campos personalizados no está visible: abra el editor, haga clic en los tres puntos de la esquina superior derecha → Preferencias → Paneles y active "Campos personalizados".
Nota: la imagen ya debe estar subida a la Biblioteca de medios de WordPress; use el enlace directo al archivo, no la página del adjunto.
Plugins para fondos: cuando el código no es lo suyo
CSS y PHP cubren la mayoría de las tareas, pero si prefiere un enfoque visual, esto es lo que hay disponible en el mercado.
WP-Backgrounds Lite: historia y lecciones aprendidas
WP-Backgrounds Lite fue una solución gratuita popular para fondos hace varios años. El plugin le permitía establecer diferentes fondos para entradas, páginas y tipos de contenido personalizados, e incluía soporte para presentaciones de diapositivas y fondos de video. Sin embargo, desde junio de 2021 ha sido cerrado en el directorio de WordPress.org con un aviso de "Problema de seguridad", y varias reseñas independientes señalaron la inyección de enlaces ocultos en el código del sitio.
La principal lección: para tareas que se pueden resolver con un par de líneas de CSS, no vale la pena instalar un plugin no verificado. Pero si realmente necesita un plugin, compruebe la fecha de la última actualización y el número de instalaciones activas.
Custom Backgrounds: un enfoque comercial
El plugin Custom Backgrounds de RightHere en CodeCanyon ofrece un control total: fondos para entradas, páginas, taxonomías y archivos, efectos de paralaje, temporizadores y múltiples fondos por página. El plugin es de pago, con opción de vista previa antes de comprar.
La desventaja: el autor no ha actualizado el producto en varios años, por lo que la compatibilidad con las versiones actuales de WordPress es cuestionable. Para un proyecto puntual es una solución funcional; para un sitio a largo plazo es mejor buscar alternativas con mantenimiento activo.
Fondos de video y paralaje para WPBakery
Si utiliza WPBakery Page Builder (anteriormente Visual Composer), el addon Parallax & Video Background de MegaMain añade fondos de video completos y desplazamiento de paralaje directamente en la interfaz del constructor. Se admiten YouTube, Vimeo y archivos MP4/WebM subidos, junto con cuatro direcciones de paralaje y la capacidad de desactivar el efecto en dispositivos móviles.
El desplazamiento de paralaje se produce cuando la imagen de fondo se mueve a una velocidad diferente respecto al primer plano. Resulta impresionante, pero en dispositivos móviles a menudo se entrecorta, por lo que la capacidad de desactivar el efecto para teléfonos inteligentes es crítica aquí.
El addon funciona dentro de WPBakery: simplemente añade un fondo a una fila o columna a través de la interfaz habitual, sin un menú separado. El precio es una compra única en CodeCanyon y las actualizaciones se publican regularmente.
Un breve video sobre el tema: añadir una imagen de fondo a páginas y bloques individuales en WordPress. Funciona como complemento a los métodos descritos anteriormente, con todo el proceso mostrado en un sitio real.
⁉️🤔 Preguntas frecuentes
¿Puedo establecer diferentes fondos para diferentes categorías de entradas?
Sí, si su tema añade una clase de categoría mediante
post_class()en el bucle de salida. Esto suele verse como.category-newso.category-portfolio. Abra el código fuente de la página de archivo de la categoría y busque la clase en la etiqueta<article>. Luego es una regla CSS estándar en style.css. Alternativamente: la etiqueta condicionalhas_category()en un fragmento PHP.
¿Qué debo hacer si falta la función body_class() en header.php?
Añádala manualmente a la etiqueta de apertura
<body>: reemplace<body>por<body <?php body_class(); ?>>. Si header.php no está disponible para edición (el tema está bloqueado), cree un tema hijo, copie el header.php del tema padre y realice la edición en la copia.
El fondo no se muestra después de añadir CSS. ¿Cuál es la razón?
Tres causas comunes: (1) caché del navegador, abra la página en modo incógnito; (2) otro selector CSS está anulando su fondo, compruebe en las Herramientas de desarrollo (F12) si su regla aparece tachada; (3) la ruta de la imagen es incorrecta, use una URL absoluta desde la raíz del sitio con una barra diagonal inicial.
¿Es obligatorio usar un tema hijo para las ediciones en functions.php?
Altamente recomendado. Las ediciones directas en el
functions.phpdel tema padre se perderán en la primera actualización del tema. Un tema hijo aísla sus cambios: cree una carpeta, añada unstyle.csscon una cabecera y unfunctions.phpcon su código. Lleva cinco minutos y ahorra horas durante las actualizaciones.
¿Qué puede reemplazar a WP-Backgrounds Lite hoy?
Para fondos simples, el método CSS de este artículo cubre completamente la funcionalidad del plugin descontinuado. Si necesita una interfaz visual, use el bloque de Portada en Gutenberg: proporciona una imagen de fondo con superposición de texto para cualquier página o entrada. Para fondos de paralaje y video, use el addon de WPBakery de la reseña anterior.
Conclusiones: qué método elegir para su tarea
Elegir un método se reduce a dos preguntas: con qué frecuencia cambia los fondos y qué tan cómodo se siente editando código.
- Si necesita configurarlo una vez y olvidarse, use CSS mediante
body_class(). Dos líneas en style.css, cero plugins, funciona en cualquier tema. - Si el fondo cambia regularmente para diferentes entradas, use un fragmento PHP con un campo personalizado. Suba una imagen a la Biblioteca de medios, pegue la URL en el campo, listo.
- Si trabaja en WPBakery y necesita fondos de video, use el addon Parallax & Video Background.
- Si no quiere tocar código en absoluto, el bloque de Portada integrado en Gutenberg cubre la mayoría de las tareas de imagen de fondo sin un solo plugin.
Comience con CSS (lleva cinco minutos y no implica ningún riesgo). Y si utiliza una técnica no estándar con fondos que no hayamos cubierto, compártala en los comentarios.
Un equipo profesional de escritores y editores especializados en la creación de contenido de calidad.