WordPress es el favorito de muchos tanto como plataforma de blogs como como sistema de gestión de contenido (CMS). Esto se debe a que la plataforma es fácil de aprender, usar y personalizar. Quiero decir, puede convertir su sitio web de la forma que desee sin esforzarse demasiado. Incluso puede agregar diferentes fondos a sus publicaciones y páginas de WordPress, que es el tema de esta guía.
Si está buscando agregar algo de color y estilo a sus publicaciones y páginas de WordPress, esta guía profundiza en el tema con un enfoque doble. Primero, agregaremos diferentes fondos a las publicaciones o páginas de WordPress usando CSS y una función simple de PHP, pero si esto no es lo tuyo (digamos que eres el principiante perfecto y el código te asusta), lo haremos ofrecen un par de complementos de fondo de WordPress para ayudar con el proceso.
De cualquier manera, deberías pasar un buen rato ya que este es un proyecto relativamente fácil. Además, siempre es divertido aprender algo nuevo. Disfruta hasta el final y comparte tus sugerencias, comentarios o preguntas en el área de comentarios. ¿Listo? Vamos a dar el paso en 3, 2, 1 …
Cómo agregar fondos a WordPress con código
Esta sección será de gran beneficio si conoce PHP, HTML y CSS. Sin embargo, no se preocupe, siempre puede copiar y pegar los fragmentos de código proporcionados aquí. Solo necesita saber dónde se encuentran los diferentes archivos en su instalación de WordPress. Con ese preámbulo, comencemos a editar.
Agregue diferentes fondos a las publicaciones y páginas de WordPress usando CSS
Gran parte del estilo que se utiliza en las publicaciones y páginas de WordPress (y en todo su sitio) está controlado por un archivo conocido como hoja de estilo. El archivo de hoja de estilo en WordPress generalmente se etiqueta style.css. Puede acceder a style.css navegando a Apariencia> Editor en su administrador de WordPress:
Estamos agregando fondos (y otros estilos) a sus publicaciones / páginas de WordPress en style.css, por lo que es importante cargarlo en una pestaña separada.
Cuando navegue a Apariencia -> Editor, también verá una lista de todas las plantillas de temas a la derecha de la pantalla. Si está utilizando un tema secundario, debe usar uno por cierto, deberá cargar los archivos de plantilla de su tema principal.
Debe concentrarse en el archivo header.php. ¿Por qué header.php? Porque este archivo se agrega a todas las demás plantillas, es decir, páginas y publicaciones cuando WordPress está reuniendo los archivos que componen su sitio web. En otras palabras, el código dentro de header.php aparece en cada página o publicación que cree.
Busque este fragmento de código:
<body <?php body_class(); ?>>
Esta función tiene un propósito. Divide las clases de CSS que puede usar para cambiar el estilo de sus publicaciones y páginas. Todo lo que tiene que hacer es apuntar a una clase de CSS específica para la página o publicación que desea personalizar, agregar su fondo y estilos, guardar sus cambios y regocijarse.
Si, por ejemplo, vio el código fuente de su página de inicio, la función anterior generará algo como:
<body class="home blog logged-in admin-bar no-customize-support hfeed">
Y eso es porque parte del fragmento de código proporciona todas las clases, por ejemplo, .home, .blog, .logged-in, etc., que puede usar en su CSS para diseñar varios elementos de su página de inicio.
Aparte: Ver el código fuente de cualquier publicación o página es fácil. Si está utilizando Chrome, simplemente haga clic con el botón derecho en una página / publicación y seleccione «Ver código fuente de la página». En Mozilla, haga clic con el botón derecho en la publicación / página y seleccione «Ver código fuente de la página». Si está utilizando Microsoft Edge (Internet Explorer), haga clic con el botón derecho en su página / publicación y seleccione «Ver fuente».
Si ve el código fuente de una página de WordPress, esta misma función dará como resultado:
<body class="page page-id-2 page-template-default logged-in admin-bar no-customize-support">
Si vio el código fuente de una sola publicación, nuestra función body_class genera algo parecido a:
<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support">
Como puede ver, obtiene un par de clases de CSS a las que puede dirigirse fácilmente:
- .page para todas las páginas
- .page-id-2 que le permite apuntar a una página específica, es decir, una página con número de identificación. 2
- .single para todas las publicaciones individuales, lo que significa que todos los estilos CSS que aplique a esta clase se aplicarán a todas las publicaciones
- .postid-1 para la publicación con id = 1, lo que significa que todos los estilos CSS que aplique afectarán solo a esa publicación
- .single-format-standard: esto le permite aplicar estilos CSS a todas las publicaciones con el formato de publicación estándar
- .logged-in: los estilos que aplique con esta clase CSS solo se aplicarán a los usuarios que hayan iniciado sesión
Todos los elementos contenidos en class = ”” te ofrecen enlaces CSS que puedes usar para apuntar a cualquier publicación o página. Pero, ¿por qué agregamos el punto (.) Antes de cada clase? Es la sintaxis CSS convencional, que indica dicta que debe llamar a todas las clases usando un punto (.) y todos los divs usando hash (#). Cuento para otro día.
Por ejemplo, para aplicar un fondo negro a todas las publicaciones, agregue el siguiente fragmento a style.css:
.single { background-color: #000; }
Agregar fondo a publicaciones y páginas de WordPress usando PHP (a través de un campo personalizado)
Si desea agregar un método manual integrado para alterar los fondos en su sitio a través de un campo personalizado, esto también es muy fácil de hacer. Simplemente pegue el siguiente código en el archivo functions.php de su tema (si está utilizando un tema de terceros, es mejor hacerlo a través de un tema hijo). Asegúrese de cambiar donde dice «myprefix» a su identificador único (esto es para evitar conflictos con temas y complementos) y una vez que esté todo listo, ahora puede usar el campo personalizado «myprefix_background_image» para ingresar una URL a una imagen para cualquier página o publicación en la que desee modificar el fondo.
<?php
// Add inline style to set body background via "myprefix_background_image" custom field
function myprefix_custom_field_background() {
if ( $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true ) ) { ?>
<style type="text/css">
body { background-image: url( "<?php echo esc_url( $background ); ?>" ); }
</style>
<?php }
add_action( 'wp_head', 'myprefix_custom_field_background' );
¿Observa cómo la función se engancha en la acción «wp_head»? Esto significa que cada vez que use el campo personalizado, el CSS en línea se agregará a la etiqueta de encabezado de su sitio con el código para modificar el fondo de acuerdo con el valor de su campo personalizado.
Agregar fondos a WordPress con complementos
Puede orientar publicaciones y páginas de WordPress y diseñar cada una de ellas al contenido de su corazón con PHP y CSS, como hemos mostrado. Pero si no tiene tiempo para el código, o las instrucciones anteriores no funcionan por una razón u otra, aquí hay un par de complementos de fondo de WordPress para arrancar.
Complemento gratuito de WordPress WP-Backgrounds Lite
¿Qué puedo decir? Este es uno de esos complementos de WordPress que satisface la necesidad. ¿Te apetece tener fondos vibrantes para tus publicaciones y páginas de WordPress? Seguro Por qué no. ¿Es este complemento fácil de instalar y usar? Me encantaría escuchar tu opinión.
Fondos WP Lite, people, es el complemento que te ayuda a tener fondos de WordPress de una vez por todas. ¡Incluso puede hacer que se pueda hacer clic en el fondo de sus publicaciones y páginas de WordPress! Y no ejecutará todas las páginas a menos que lo desee, además de que funciona bien con los principales navegadores.
Complemento de WordPress premium de fondos personalizados
Presentado por RightHere, un autor de élite en CodeCanyon, el complemento Fondos personalizados le ofrece un control total sobre sus fondos de WordPress. En cuestión de minutos, puede crear fondos excepcionales para publicaciones de WordPress, páginas, tipos de publicaciones personalizadas, taxonomías y archivos, entre otras plantillas, y mejorarlo todo con efectos de paralaje, temporizadores y lo mejor que jQuery tiene para ofrecer.
Incluso puede establecer fondos múltiples y en los que se puede hacer clic para sus publicaciones y páginas de WordPress sin sudar. El autor le permite probar el plugin antes de comprarlo, para que sepa exactamente qué esperar.
Fondos de video y Parallax para WPBakery Page Builder
El desplazamiento de Parallax parece estar en todas partes en estos días, y con una buena razón: es uno de los efectos visuales más geniales que existen y, cuando se ejecuta bien, es visualmente impresionante. Esto ha visto una gran cantidad de temas de WordPress de paralaje llegar al mercado; para aquellos de ustedes que no están familiarizados con el término paralaje, es cuando las imágenes de fondo se desplazan a una velocidad diferente al primer plano, lo que crea un efecto visual intrigante.
En términos generales, la mayoría de los usuarios de WordPress confían en su tema para el desplazamiento de paralaje. Sin embargo, si desea agregar un efecto de paralaje a un tema sin paralaje, debe consultar los Fondos de video y paralaje para WPBakery.
El complemento admite fondos de ancho completo y ancho normal, con el efecto de paralaje funcionando en las cuatro direcciones. Puede cargar sus propias imágenes para usarlas como fondo de imagen fija, o simplemente puede usar un fondo de bloque de color sólido. Puede optar por activar el desplazamiento suave para garantizar el máximo rendimiento y puede desactivar el paralaje para dispositivos móviles. La interfaz intuitiva facilita la configuración de todo, y puede especificar la dirección y la velocidad del efecto de desplazamiento de paralaje con solo hacer clic en un botón.
Además de un efecto de paralaje, el complemento también se puede usar para agregar un fondo de video, con videos de YouTube o Vimeo fácilmente incrustados; simplemente agregue la URL para incrustar. Esta es otra excelente manera de crear un sitio web llamativo que los visitantes encuentren memorables.
Ultimas palabras
Ya sea que profundice en el código o use complementos, agregar diferentes fondos a sus publicaciones o páginas de WordPress puede contribuir enormemente al conocimiento de la marca y al diseño visual de su sitio. ¿Cómo cambia el fondo de sus publicaciones o páginas de WordPress? Háganos saber sus preguntas, sugerencias y pensamientos a través de la sección de comentarios a continuación.