Categoría: WordPress

Es posible cambiar el color de cualquier elemento de tu tema de WordPress (fondo, menú, texto,…) de  modo bastante sencillo, aunque el propio tema no te lo permita en sus opciones. Todo ello sin apenas conocimientos de CSS ni de HTML.

El primer paso es instalar un plugin que te permita modificar el CSS de tu tema, como por ejemplo WP Add Custom CSS, del que ya hablamos en otra entrada de este blog. El plugin añade una nueva opción de menú, llamada “Añadir CSS personalizado”, donde poder introducir el código CSS que sobreescribirá al del tema.

Ahora debemos averiguar el estilo que debemos sobreescribir, para lo cual utilizaremos el inspector de código del navegador. Podemos abrirlo haciendo clic con el botón derecho sobre el elemento cuyo color queremos modificar y eligiendo la opción “Inspeccionar”

Una vez pulsado nos aparecerá en la parte inferior de la pantalla el código HTML y el CSS del elemento. No te asustes, verás que sencillos es cambiarlo.

Hemos resaltado en la imagen el título, que es el que vamos a cambiar de color, y el estilo correspondiente. Podemos ver también que el título es el que está seleccionado en la parte del código.

Podemos probar diferentes colores directamente en la pantalla de nuestro navegador, haciendo clic sobre el color y eligiendo uno nuevo de la paleta o introduciendo su código hexadecimal.

Lo cambiaremos hasta que quede como deseamos y, después, seleccionaremos el código CSS donde está el color.

Ahora simplemente debemos acceder a la opción de menú “Añadir CSS personalizada” y pegar nuestro código CSS en el campo “Reglas CSS”.

Pulsamos el botón “Guardar” y ya tenemos cambiado el color de todos los títulos de las entradas de nuestro tema. Podríamos haber hilado más fino borrando los otros estilos que no aplicaban en nuestro ejemplo (font-size y magirn-bottom).

Esto es aplicable a todos los elementos de la pantalla, aunque debemos tener precaución e ir navegando por nuestra web tras los cambios para ver que todo se sigue viendo como esperábamos.

Si tienes cualquier duda o comentario, escríbeme.

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.

En esta entrada explicaremos como podemos aplicar estilos CSS personalizados a ciertas entradas de nuestro blog o a páginas concretas de WordPress. Estas entradas o páginas podrán tener una apariencia diferente a la del resto de nuestra web. Esto puede resultarnos muy útil, por ejemplo, para añadir banners (imagen superior) diferentes a las distintas páginas de nuestra web o para destacar algunas entradas aplicando estilos CSS. Para ello debemos instalar el plugin WP Add Custom CSS.

Al añadir este plugin, aparecerá un nuevo campo en la parte inferior de las pantallas de edición de las entradas y páginas llamado “CSS personalizado”.

Los estilos CSS que se escriban en esta sección sobreescribirán a los de la página o entrada que estamos añadiendo o editando. Esto es aplicable también a los tipos de entrada personalizados.

Este plugin nos permitirá, además, sobreescribir los estilos CSS de nuestro tema. Para ello tenemos que acceder a la nueva opción de menú llamada “Añadir CSS personalziado”.

Espero que te haya servido de ayuda. Si tienes cualquier duda o comentario, escríbeme.

 

El editor de texto de WordPress añade automáticamente párrafos cada vez que pulsamos “INTRO”. Estos párrafos no aparecen en el código fuente HTML de la página, es decir, si pulsamos para ver el código HTML que estamos escribiendo, no veremos las etiquetas “<p>” de los diferentes párrafos.

Sin embargo, al visualizar la página en nuestros navegadores, WordPress automáticamente le añadirá estas etiquetas.

Este comportamiento, que nos facilita la vida al escribir, puede resultar muy problemático en aquellos casos en los que deseamos introducir nuestro propio código HTML o código javascript dentro del contenido. Las etiquetas que añade automáticamente WordPress romperán la visualización que esperábamos.

Afortunadamente existe un plugin que evita la introducción de párrafos automáticos de un modo muy sencillo. Además, se activa para que actúe sólo en ciertas páginas o entradas, de modo que el resto sigan teniendo el mismo comportamiento y no se rompa el estilo de visualización. Dicho plugin es Don’t Muck My Markup.

Una vez instalado, cuando deseemos que el autoformateo no actúe en alguna página o entrada, simplemente tendremos que marcar la casilla “Disable auto-formatting for this page”.

Sencillo ¿verdad?. A mi me resultó muy útil. Deja tu comentario si te ha gustado.