Oculta la imagen destacada de tus entradas en WordPress

Las imágenes destacadas son una excelente forma de presentar tus artículos en WordPress de manera visual, y de llamar la atención de tus visitantes. Un feed de artículos es mucho más agradable de navegar si cada entrada tiene su propia imagen destacada que la diferencie del resto. Pero a veces es posible que no quieras que este tipo de imágenes se muestren dentro del propio artículo. Y hoy veremos como puedes conseguirlo.

Lo haremos sin necesidad de instalar ningún tipo de plugin, para no dar una carga extra a nuestra web. Simplemente tendremos que usar un poco de CSS y añadirlo a nuestra web. Pero que no os eche atrás esto, ya que el proceso es muy sencillo y no necesitarás conocimientos previos de este lenguaje. Eso si, si estás interesado y quieres ir un poco más allá, te recomendamos que veas nuestra guía de iniciación al CSS.

Veremos dos formas de ocultar nuestras imágenes destacadas dentro de una entrada. En la primera, lo ocultaremos para todas las entradas existentes en nuestra web. Y en la segunda, veremos como podemos ocultarla en una o varias entradas específicas.

Ocultar imagen destacada en todas las entradas

Para añadir cualquier código CSS en nuestro WordPress, la forma más sencilla es mediante el menú Personalizar. Para ir hasta ahí, desde el panel de administración de WordPress nos iremos a Apariencia > Personalizar. Una vez dentro, en el panel izquierdo clicaremos en la última opción de la lista CSS adicional.

El panel izquierdo cambiará, y veremos un pequeño texto que explica que podemos añadir código CSS. Y tras él, un área de texto donde podemos escribir nuestro CSS. Aquí insertaremos el siguiente código CSS:

.single-post .wp-post-image {
display: none;
}

Pulsamos en el botón superior azul Publicar para guardar los cambios, y ya con esto lo tendríamos todo listo. Si vas a cualquiera de tus entradas, verás como ya no aparece la imagen destacada. Dependiendo del tema que estés usando, la imagen destacada tendrá una posición u otra dentro del artículo. Por ejemplo, en los artículos de SiloCreativo, la imagen destacada aparece en la parte superior del sidebar derecho. Pero en otros temas de WordPress, puedes aparecer como una hero image ocupando todo el ancho, justo debajo del título del artículo, como primera imagen… En mis pruebas, estoy usando el tema Twenty Twenty, y así se vería una entrada con la imagen destacada:

Y así al añadir el código CSS anterior, ocultando la imagen destacada:

Ocultar imagen destacada en entradas específicas

Si no queremos que la imagen destacada se oculte en todos los artículos de nuestro blog, sino en uno o varios específicos, el proceso es el mismo. Simplemente, el código CSS cambiará un poco. Pero no hay que preocuparse, ya que es muy sencillo de realizar.

Lo primero que hay que saber es la ID de la entrada en la que queremos que no se muestre la imagen destacada. La ID no es más que un número único que tiene cada entrada y que permite diferenciarla de las demás. Si no sabes como hacerlo, escribimos un artículo sobre como encontrar la ID de una entrada en WordPress que puede servirte de ayuda.

Una vez sepas cual es la ID, veamos cual es el código CSS que necesitamos añadir en nuestro CSS adicional. En mi caso, la ID de mi entrada es 18780, por lo que el CSS quedará así:

.post-18780 .single-post .wp-post-image {
display: none;
}

Solo hemos añadido al principio de nuestro código el selector .post-8681. Como he comentado antes, al ser la ID de mi entrada 18780, el selector que he puesto es .post-8681. Según sea la ID de tu entrada, deberás modificar la cifra de este selector. En el caso de que queramos ocultar la imagen destacada en más de una entrada, y sabiendo las IDs de cada una de ellas, solo deberemos de colocar los selectores, separados por una coma. Por ejemplo:

.post-18780 .single-post .wp-post-image,
.post-8681 .single-post .wp-post-image {
display: none;
}

En esta ocasión lo estoy ocultando en dos entradas específicas, pero puede ser en tantas como quieras. Solo hay que añadir una nueva línea de selectores con la ID específica. Y muy importante, que estén siempre separadas por una coma. Si no, no se aplicará de forma correcta el CSS.

Y con esto acaba esta pequeña guía sobre como ocultar una imagen destacada dentro de una entrada en WordPress. Como hemos podido comprobar, es un proceso muy simple, en el que no hace falta instalar ningún plugin extra ni tener conocimientos sobre como escribir código. Algo que agradecerá nuestra web al estar menos cargada.

Esperamos que os haya servido de ayuda. Y como siempre, tenéis abiertos los comentarios para cualquier duda o sugerencia que queráis hacernos llegar!