Cómo cambiar el CSS de una página concreta en WordPress

Con este artículo aprenderás a cómo cambiar el CSS de una págna o entrada en concreto, sin que afecte al resto.

Para ello, te mostraremos dos opciones, la primera, sin la necesidad de utilizar plugins a través del CSS y la segunda con plugins, que resulta mucho más sencillo.

Cambiar el CSS de una página o entrada concreta sin plugins

La primera opción amerita utilizar la ID de la página o entrada a la cual le quieras cambiar el CSS. Por lo que deberás dirigirte a entradas en la barra de color azul del lado izquierdo de la pantalla.

Te aparecerán todas las entradas disponibles. Coloca el cursor encima de la cual prefieras cambiar el CSS y debajo, sin pulsar, aparecerá un enlace con la ID. Pondrás el cursor (sin dar clic) en ver y verás que debajo cargará una URL con un número.

Ejemplo de personalizar CSS en una entrada concreta con StyleBot

Para continuar, debes agregar una extensión a tu navegador llamada StyleCSS. Esto te facilitará previsualizar el CSS y editarlo sin casi conocimientos. Al tenerla lista, la activas y das clic al icono del cursor que está en la esquina superior izquierda, para que te permita seleccionar elementos de la página.

Por ejemplo, seleccionas sel H1 de tu entrada, luego ir a la extensión y en la sección de decoración, dar en a la opción de tachado. Y verás como el H1 (título) de tu página, sale tachado.

Previsualización del CSS en WordPress

Así mismo, notarás que, al dirigirte al resto de las entradas de tu web, todos los H1 poseerán el mismo detalle de CSS que acabas de realizar (están tachados).

Aplicar el cambio solo a una página concreta

Para evitarlo, y hacer que este CSS solo aplique a una entrada en concreto, deberás modificar la primera línea de código y añadir al inicio “.postid-(ID)” , por ejemplo, si el ID del post es 49, sería: “.postid-49”, dejarías un espacio, y escribirías el código CSS a aplicar.

Aquí va un ejemplo, tachando el H1 en solo el post nº 49:

.postid-49 h1.entry-title {
  font-size: 18px;
}

Significará que el código predeterminado aplica solo a dicha ID, por lo que si entras a otras entradas no las seguirá afectando por igual.

Cambiar el CSS de una página concreta con el plugin SimpleCSS (más fácil)

Ahora te mostraremos una forma más sencilla. Ve a la barra de color azul del lado izquierdo de la pantalla, coloca el cursor en plugins y seguidamente presiona añadir nuevo.

De inmediato se desplegarán diferentes opciones que pueden serte de utilidad en determinada situación. Aunque, por ahora, solo debes ingresar en la caja de búsqueda Simple CSS, el cual aparecerá en pantalla e instalarás y luego lo activarás. El funcionamiento de este plugins es rápido, debido a que no pesa nada.

Cambio del CSS con plugins en WordPress

Se añadirá la opción de editar CSS individual en todas tus entradas y páginas

Una vez se haya activado, dirígete a entradas y dale clic a editar a la que desees cambiarle el CSS.

Al cargarse la página, al final de ella, habrá una sección específica para editar el CSS de la misma.

El CSS que pongas aquí solo aplicará a dicha entrada o página.

Luego, para terminar con este punto, dale a actualizar en la esquina superior derecha. Ve a la entrada y verifica la modificación realizada. Puedes también revisar otras entradas de tu web y ver que allí no se ha aplicado este cambio.

Video tutorial de cómo modificar el CSS de una página específica en WordPress

Ambas opciones descritas son útiles y muy sencillas de utilizar para darle un toque distinto a tus entradas. En el siguiente video tutorial, podrás también resolver tus dudas acerca de cómo cambiar el CSS de una entrada.

Te puede interesar...

7 Herramientas de Inteligencia Artificial GRATIS

Soy GabiFlorensa y este artículo, te enseñaré 7 herramientas de inteligencia artificial gratuitas que permiten usar funcionalidades muy interesantes. Generar dibujos con inteligencia artificial gratis (Craiyon.com) Es una herramienta que te permite generar dibujos usando una frase o un texto con inteligencia artificial. Para ello, en el buscador colocamos unas

Leer más »