Clicky

Cambiar el fondo del tema de Wordpress

Cambiar el fondo del tema de WordPress

Cambiar el fondo usando CSS o la función incorporada en el tema

El fondo (background) de un sitio web es importante ya que actuará como marco para el contenido del sitio, y muchos temas modernos proporcionan un uso creativo del fondo, tales como la utilización de scroll parallax, o la superposición de diapositivas sobre la imagen de fondo.

El cambio del fondo en nuestro sitio no es una empresa muy difícil, pero si no está familiarizado con la forma en que WordPress y el tema encajan entre sí, puede parecer mucho más desalentador de lo que es. Hoy vamos a ver cómo se hace (el segundo método detallado en este artículo, que utiliza CSS, se puede usar incluso en Joomla o en otros sitios web también.

Cambiar el fondo - Dos opciones

Generalmente nuestros temas tendrán dos opciones para cambiar el fondo, dependiendo del tema y el tipo específico de fondo que utiliza el tema. El primer método es una característica incorporada de fondo que es muy fácil de modificar, mientras que el segundo método es un poco más complejo y utiliza código CSS para hacer los cambios.

Construido en función del fondo

WordPress tiene una característica incorporada para permitir a los usuarios cambiar el fondo en tan sólo unos pocos clics, y muchos temas ofrecen esta opción. Sin embargo, esta opción no está disponible para todos los temas, ya que algunos de ellos se basan en el uso del fondo como parte de la estética general del tema, por lo que no es viable el intercambio entre las diferentes opciones de fondo. Si el tema elegido es compatible con esta característica, entonces todo lo que tenemos que hacer es iniciar sesión en el panel de WordPress, hacer clic en Apariencia → Fondo en el menú de la izquierda. Se puede especificar el color de fondo en esta área:

cambiar el color del background

Es muy simple; seleccionar un color, guardar los cambios y previsualizar los cambios. Si no es de nuestro agrado, cambiarlo de nuevo o hacer clic en el botón "Default" para restaurar el color original.

En la misma zona por encima de la opción de color de fondo también se puede especificar una imagen de fondo:

cambiar imagen de fondo

Es posible que queramos subir una nueva imagen o utilizar una que ya se ha subido a la biblioteca de medios; simplemente hacer clic en el botón "Elegir imagen" para abrir el cuadro de diálogo. Una vez que una imagen ha sido cargada y seleccionada seremos capaces de ver una vista previa de cómo se mostrará la imagen de fondo, y algunas nuevas opciones que nos permiten especificar la posición de la imagen (izquierda, derecha o centro), decidir si la imagen debe repetirse (sí, no, sólo en vertical u horizontal), y se puede elegir la propiedad de fijación de la imagen de fondo; es decir, si la imagen se desplazará hacia abajo en la página con el usuario, o si se fija en un lugar.

Cambiar el fondo usando CSS

El uso de CSS para cambiar el fondo puede ser más difícil que la función de fondo incorporada, pero utilizarlo abrirá un gran abanico de posibilidades con CSS para hacer nuestro fondo único.

Como ejemplo vamos a utilizar el tema MO de WordPress como base. Vamos a necesitar contar con herramientas que nos permiten inspeccionar los elementos de nuestra página web, como Firebug o Google Web Developer Tools. Si ya tenemos estas herramientas, podemos establecer el cursor en nuestro fondo, y elegir el elemento a inspeccionar.

En la parte inferior de nuestro navegador debería aparecer un nuevo conjunto de ventanas con el código HTML en la columna de la izquierda y el código CSS en la derecha:

background HTML

Por lo general el fondo está conectado al elemento de HTML, por lo que podemos resaltar este elemento en la columna de la izquierda, y en la columna de la derecha podemos ver el código CSS conectado a él. Como se puede ver, el elemento tiene varias reglas CSS, pero nos interesa específicamente la regla de "background", que define el color de fondo. Ahora podemos o bien copiar y pegar este fragmento, o escribir manualmente en nuestro archivo css/override.css (primero tenemos que activar la opción de override en las opciones de la plantilla -> pestaña avanzado) :

body {
    background: #00000;
}

O si queremos usar una imagen de fondo, tendremos que especificar la dirección URL de la imagen utilizando este código:

body {
    background: transparent url('../images/bg.png') no-repeat center top;
}

Lo que crea un fondo transparente con la imagen llamada bg.png de nuestro directorio nombre_tema/images. También podemos utilizar que la imagen no se repita, repita, repita-x, repita-y (no-repeat,repeat,repeat-x,repeat-y), incluyendo sólo horizontal o verticalmente.

Si te sientes atrevido también puedes utilizar una buena función del moderno CSS3 llamada fondo múltiple (recordar que Internet Explorer 8 y por debajo no son compatibles con esta característica!):

body {
    background-image: url('../images/bg1.png'), url('../images/bg2.png');
    background-position: center top, right top;
}

En este caso la primera imagen bg1.png estará centrada en la parte superior del sitio web y al mismo tiempo la imagen bg2.png será visible en la esquina superior derecha, al lado de ella. (también se pueden usar más imágenes y posiciones separadas por una coma). Esto nos da un mayor control sobre el aspecto del fondo.

El uso de CSS también puede cambiar el fondo de otros elementos, por ejemplo, la cabecera (header); sólo tenemos que revisar que este elemento, a continuación, reemplace el código CSS de antes, pero esta vez usando el selector de la cabecera; En este caso #gk-header. Experimenta con la aplicación de diferentes reglas CSS para diferentes selectores y pronto dominarás la habilidad.

Jesus_Caceres