En esta entrada te mostraré como incluir imágenes personalizadas diferentes en cada página de tu web hecha con WordPress, sin necesidad de cambiar el código de tu tema ni de escribir ninguna línea de código.
En muchas ocasiones los temas de WordPress permiten incluir imágenes personalizadas en la cabecera de tus páginas. Sin embargo esa imagen suele ser la misma para todas las páginas. Si se cambia, cambia en todas las páginas. Esto fue lo que me ocurrió con el tema Transcend. Queríamos poner imágenes diferentes en las cabeceras de las páginas y el tema no lo permitía.
La solución fue instalar el plugin WP Add Custom CSS, que nos permite personalizar los estilos de una página o entrada concretas, como explicamos en una entrada anterior.
El siguiente paso fue ver el código fuente de una página con el inspector de código del navegador. Una forma de verlo es hacer clic con el botón derecho del ratón sobre la imagen de la cabecera y pulsar la opción “Inspeccionar elemento”.
Se nos abrirá una sección en el navegador donde ver el código HTML de la página, centrándose en la parte de la imagen donde hemos hecho clic. En caso de no ser así, también podemos navegar hasta la imagen o seleccionarla con la herramienta de selección (flecha).
En este caso la imagen de la cabecera se muestra como una imagen de fondo puesta con estilos CSS. Por lo tanto es muy simple cambiar dicha imagen, sobreescribiendo los estilos de cada página con la ayuda del plugin WP Add Custom CSS. Por ejemplo, en este caso tenemos que crear el siguiente estilo para la página:
#pagetitle {
background-image: url(http://www.midominio.es/wp-content/uploads/2016/12/cabecera_slider_boda.jpg) !important;
}
Un detalle a destacar, tuve que utilizar la palabra reservada “important” para que el estilo nuevo prevaleciera sobre el declarado directamente en el elemento, ya que no se estaba aplicando con una clase CSS, sino directamente en el elemento HTML.
Espero que esta entrada te haya servidor de ayuda. Si tiene cualquier duda o comentario, escríbeme.
