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.

panel de css adicional dentro del customizer de wordpress

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:

entrada en wordpress con imagen destacada visible
Photo by Vince Fleming on Unsplash

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

entrada en wordpress con imagen destacada oculta

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!

Comentarios (22)

  1. Hola Alfonso,

    Y si la imagen destacada que quiero quitar es la de una página (en lugar de un post), ¿cual sería el código CSS?

    ¡Gracias!

    1. Hola Luis!

      En el caso de las páginas, la situación es parecido, solo que en vez de usar la clase .single-post, usaremos la clase .page, o el identificador #page (que son los asignados a las páginas en WordPress). Y al igual que pasaba en las entradas, si queremos esconder la imagen de una página específica, hay que buscar su id. Por ejemplo, si quisiera ocultar la imagen destacada de una página, cuyo id es 33, el código sería:

      #page .post-33 .wp-post-image {
      display: none;
      }

  2. Hola, Alfonso.

    Me funciona muy bien para quitar la imagen destacada del principio del post, pero también desaparecen las imágenes destacadas de otras secciones de la entrada donde sí las necesito. Por ejemplo, la sección de post relacionados: se fueron las imágenes destacadas de todos los artículos de dicha sección. ¿Qué puedo hacer en este caso?

    1. Hola Cristina!

      En ese caso, lo recomendable es que mediante el inspector de tu navegador web veas el código CSS, y localices una clase HTML particular que tenga la imagen destacada. Por ejemplo, en los artículos de Silo, la imagen destacada esta dentro de un div con la clase entry-thumbnail. Solo tendríamos que añadir esta clase al código CSS que hemos visto en el artículo, quedando algo así:

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

      Solo tienes que buscar la clase HTML que tiene la imagen destacada en tu web, y añadirla en el código CSS. Así, solo se aplicará a ese elemento en concreto.

      Espero que te haya servido de ayuda. Un saludo!

  3. hola,
    no se como quitarla del porfolio,
    me sale la imagen destacada y como no se considera entrada no sé como quitarla.
    mi platillo es Elegant porfolio (por si acaso)
    muchas gracias

    1. Hola Andrea!

      Lo ideal es que, si sabes usar el inspector web de tu navegador, busques la clase CSS que tienen las entradas como portfolio de tu plantilla WordPress, así solo se ocultarán sus imágenes destacadas.

      Si no, lo mejor es que acudas al soporte de la plantilla, donde podrán ayudarte los creadores de la misma con más exactitud.

      Un saludo!

    1. Me alegro que te haya servido de ayuda, Javier!

      La verdad es que sabiendo algo de CSS podemos arreglar y mejorar bastantes partes de nuestra web de forma muy sencilla.

      Un saludo!

  4. Buenas tardes, magnífico post.

    Me pregunto, ¿y para publicar un post en el que aparece un link a una pista de Soundcloud es necesario subir una imagen destacada? Lo digo porque me gustaría que en la panalla de inicio tan sólo saliera la pista y no tuviera que subir una imagen destacada que rompa el post.

    Gracias de antemano y un saludo.

    1. En principio, nunca es obligatorio subir una imagen destacada a un post, por lo que puedes dejar ese apartado vacío cuando crees una nueva entrada.

      Un saludo!

  5. Hola, saludos.
    Yo uso el tema the7. hice lo que dijiste, pero no cambió nada, la imagen predefinida sigue en la entrada 🙁
    que puedo hacer?

    1. Hola Ana!

      He estado echando un vistazo al tema que comentas y he visto que usa Elementor, así que si lo estas utilizándolo para crear tus entradas, es posible que le este aplicando unas clases CSS diferentes a la imagen destacada de las que aplica WordPress. Por lo que el código que aparece en este artículo no te va a servir.

      Tienes dos opciones:

      – Escribir al soporte de tu tema, para que te faciliten el código CSS necesario.
      – Utilizar el inspector de tu navegador web, buscar la clase que tenga la imagen destacada de tus entradas, y cambiar las clases CSS del código del artículo por las de tu imagen destacada.

      Espero que te sirva de ayuda. Un saludo!

  6. Hola, gracias por este post, pero llevo rompiendome la cabeza tratando de encontrar el css del tema Assembler, en «Apariencia» solo me da la opción de «Tema» y «Editor». Recién estoy comenzando el blog y quiero quitar la imagen destacada al incio de las entradas. Gracias de antemano

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *