Cómo solucionar el problema de que la imagen destacada no se muestre en WordPress

Que una imagen destacada no se muestre en WordPress puede ser un gran dolor de cabeza.

Estas imágenes son importantes para captar la atención de tus visitantes y aumentar tus tasas de clics. Cuando no aparecen, puede ser frustrante e impactar el rendimiento de tu sitio.

Hemos enfrentado este problema en nuestro blog de vez en cuando, así que sabemos lo molesto que puede ser. La buena noticia es que sabemos cómo solucionarlo.

En esta guía, te mostraremos algunos pasos sencillos para solucionar el problema de que las imágenes destacadas no se muestren en WordPress.

¿Qué son las imágenes destacadas y por qué no se muestran en WordPress?

Las imágenes destacadas aparecen en la página de lista de tus entradas de blog y a veces en el encabezado de la entrada. Similar a las miniaturas de YouTube, el objetivo de la imagen destacada es aumentar las visitas a la página y la participación del usuario.

Además, las imágenes destacadas también se utilizan para representar artículos individuales en las páginas de entradas recientes, archivos y resultados de búsqueda.

Más allá de eso, el estilo de tus imágenes destacadas marca el tono para el resto de tu entrada de blog.

Casi todos los temas de WordPress te permiten subir imágenes destacadas y te dan la capacidad de mostrarlas en diferentes áreas de tu sitio, como el menú de la barra lateral o el área de contenido principal.

Si estás solucionando este problema, quizás quieras consultar nuestro tutorial sobre cómo agregar imágenes destacadas o miniaturas de publicaciones en WordPress. Es importante que sepas cómo subir imágenes destacadas primero.

Puede ser fácil subir por error una imagen de portada en lugar de una imagen destacada, o incluso podrías tener un tema que automáticamente hace que la primera imagen de una publicación aparezca como una miniatura de publicación.

Con esto en mente, te mostraremos cómo solucionar problemas potenciales que puedan surgir. Siéntete libre de usar nuestros enlaces para saltar al problema que estás enfrentando actualmente:

1. Solucionar el error HTTP al subir una imagen destacada
2. Solucionar plugins o temas
3. Desactivar carga diferida (Lazy Loading)
4. Permitir imágenes destacadas para visualización
5. Solucionar que la imagen destacada no se muestre en la página de galería de publicaciones del blog
6. Agregar código personalizado para solucionar problemas de imagen destacada

Di adiós a los dolores de cabeza de las imágenes destacadas que faltan – ¡vamos a sumergirnos y resolver este problema juntos!

1. Solucionar el error HTTP al subir una imagen destacada

Si intentas subir una imagen destacada con un tamaño de archivo grande, es posible que recibas el vago mensaje de 'error HTTP'. A menudo, esto significa que el archivo de imagen es demasiado grande o que necesitas aumentar el límite de memoria de tu sitio para permitir cargas más grandes a tu sitio de WordPress.

Hay dos maneras principales de solucionar este problema. Pero primero, asegúrate de cerrar sesión en WordPress y volver a iniciarla. Muchas veces, eso te permitirá subir imágenes normalmente una vez más.

Si no, intente uno de los dos métodos siguientes:

1. Disminuya el tamaño del archivo de imagen.
2. Aumente el límite de memoria de WordPress.

Primero, comencemos con el método más sencillo, disminuir el tamaño de su archivo de imagen. Si el tamaño es un problema, puede que desee cambiar al formato de imagen WebP, JPEG o PNG. JPEG es un formato de archivo comprimido que reduce ligeramente la calidad de la imagen para reducirla significativamente a un tamaño de archivo menor, y los archivos WebP son muy pequeños desde el principio.

A continuación, querrá comprimir el tamaño del archivo utilizando una herramienta de compresión de imágenes como TinyPNG o JPGmini.

Todo lo que tiene que hacer es subir la imagen a la herramienta, y luego podrá descargar la versión comprimida del archivo.

Para más información, consulta nuestra guía sobre cómo optimizar imágenes para el rendimiento web sin perder calidad.

Si ya comprimiste el tamaño de la imagen y sigues teniendo el error HTTP, es posible que quieras aumentar el límite de memoria de tu WordPress. Simplemente puedes contactar a tu proveedor de alojamiento web actual y solicitar que expandan tu límite de PHP o que actualices tu plan de alojamiento.

Sin embargo, también puedes cambiar el límite de memoria de PHP, lo que requiere que modifiques los archivos wp-config.php o .htaccess. En ambos casos, necesitarás un cliente FTP o un Administrador de Archivos.

Para este método, es una buena idea usar un plugin como WPCode, que te permite agregar personalizaciones sin romper tu sitio web. WPCode es el mejor plugin de fragmentos de código del mercado, con más de 2,000,000 millones de sitios web que lo usan para proteger sus personalizaciones con fragmentos de código.

Si quieres editar el archivo .htacess, deberás dirigirte a la carpeta raíz del sitio web de WordPress. Luego, antes de la línea que dice '#END WORDPRESS', puedes pegar el siguiente código:

define( 'WP_MEMORY_LIMIT', '256M' );

Para más detalles sobre cómo aumentar tu límite de memoria, consulta nuestro tutorial sobre cómo solucionar errores de memoria agotada de WordPress para aumentar la memoria PHP.

2. Soluciona los plugins o temas

Algunos temas y plugins de WordPress podrían estar impidiendo que la imagen aparezca.

Si bien la mayoría de los temas de WordPress muestran automáticamente tus imágenes destacadas, algunos requieren una configuración manual por parte del administrador. En ese caso, es posible que debas revisar la configuración de tu tema de WordPress o ponerte en contacto con el soporte de tu tema para obtener ayuda.

Para más información, consulta nuestra guía definitiva sobre cómo usar el personalizador de temas de WordPress.

Si el tema no está causando el problema, también puedes verificar si tus plugins son los principales culpables.

Puedes empezar por actualizar todos tus plugins. Si eso no soluciona el problema, procede a desactivar todos tus plugins y luego reactívalos uno por uno.

Después de cada instalación, puedes verificar si las imágenes destacadas se muestran correctamente. Si la imagen destacada falla, entonces sabrás qué plugin está causando el problema.

También puedes usar el plugin Health Check & Troubleshooting. Este plugin gratuito realiza una serie de comprobaciones para detectar errores de configuración y conocidos en tus plugins y temas.

Si necesitas ayuda con la instalación, lee nuestra guía sobre cómo instalar un plugin de WordPress.

Al activar, dirígete a Herramientas » Salud del sitio. Desde aquí, obtendrás una lista de recomendaciones para ayudarte a mejorar la seguridad y el rendimiento de tu WordPress.

Aquí puedes ver que hay una serie de plugins y temas instalados, obsoletos e inactivos, que necesitan ser atendidos. Simplemente haz clic en los enlaces proporcionados para administrar o actualizar tus plugins.

3. Desactivar carga diferida

La carga diferida es una función que ayuda a mejorar la velocidad de tu página y el rendimiento de WordPress agregando rápidamente el contenido y el área visible primero.

Un sitio web más rápido mejora las clasificaciones del sitio web, ya que los motores de búsqueda como Google consideran la velocidad como un factor de clasificación importante.

Básicamente, la carga diferida detiene la carga de imágenes en una página hasta que esta aparece en la pantalla. Por ejemplo, la última imagen de una publicación de blog larga no tendrá que cargarse hasta que el usuario realmente se desplace hacia abajo y llegue a esa imagen.

Dicho esto, la carga diferida puede causar problemas con las imágenes destacadas, ya que algunos complementos de carga diferida podrían tratar las imágenes destacadas como fotos normales. Esto podría hacer que la imagen destacada se cargue lentamente o impedir que aparezca por completo en la lista de publicaciones recientes.

Además, algunos complementos de optimización de imágenes tendrán la funcionalidad de carga diferida como un complemento adicional. Por lo tanto, querrá verificar cada complemento instalado para ver si esta función está habilitada.

Es posible que desee desactivar la función de carga diferida en sus complementos y limpiar la caché para ver si resuelve el problema de la imagen destacada.

Algunos complementos le permiten excluir ciertas fotos de la carga diferida. Si ese es el caso, puede deshabilitar esta función solo para la primera imagen de sus publicaciones de blog para que aún pueda beneficiarse de la carga diferida sin afectar sus imágenes destacadas.

Puede deshabilitar fácilmente el código personalizando el fragmento de código con WPCode. Primero, deberá dirigirse a la página Fragmentos de código » + Agregar fragmento desde el panel de WordPress.

Luego, todo lo que tendría que hacer es copiar y pegar este código PHP en el cuadro 'Vista previa del código':

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Así es como debería verse al pegarlo.

Asegúrese de seleccionar también 'Fragmento de PHP' como el 'Tipo de código'.

Por último, activará el complemento para que esté activo y hará clic en el botón 'Guardar fragmento'.

Para más detalles, consulta nuestro tutorial paso a paso sobre cómo deshabilitar correctamente la carga diferida en WordPress.

4. Cambiar los permisos del rol de usuario para permitir la carga de imágenes destacadas

WordPress ofrece seis roles de usuario predeterminados para administrar el acceso y las acciones de todos los usuarios en un sitio.

Si no eres el propietario del sitio web, es probable que no tengas el rol de usuario requerido para cargar o ver imágenes destacadas.

Todo lo que tienes que hacer es asegurarte de que tus roles y permisos de usuario estén configurados correctamente.

Una forma fácil de solucionar este problema es usar un plugin como User Role Editor para que puedas cambiar roles y capacidades en un solo lugar.

Simplemente dirígete a Usuarios » Editor de roles de usuario en tu panel de WordPress.

Desde aquí, seleccionarás el rol que deseas cambiar en 'Seleccionar rol' y cambiarás sus capacidades. En este caso, elegiremos 'Autor'.

Luego, usando la opción 'Filtro rápido', querrás buscar 'upload_files'.

Finalmente, simplemente haz clic en el botón 'Actualizar' para realizar esos cambios.

Este plugin también te permite crear nuevos roles personalizados y darles acceso a los permisos que elijas.

5. Solucionar que la imagen destacada no se muestre en la página de galería de publicaciones del blog

Una de las mejores maneras de usar imágenes destacadas es mostrando tus publicaciones de blog en la página de inicio de tu sitio web.

¿Pero qué pasa si las imágenes destacadas no aparecen en la página del blog?

Para solucionar este problema, puedes ir a editar tu página de inicio o cualquier página en la que desees que aparezcan las imágenes destacadas.

Luego, haz clic en el ícono ‘+’ y agrega el bloque ‘Últimas publicaciones’ a la publicación en la página. A partir de aquí, verás enlaces a tus publicaciones recientes.

Simplemente haz clic en el bloque y habilita la opción ‘Mostrar imagen destacada’.

Luego, podrás ajustar la otra configuración, como la alineación y el tamaño de la imagen destacada, para que se ajuste a tu página.

A partir de aquí, tus imágenes destacadas deberían aparecer en la galería de tus publicaciones de blog.

Así es como se verá una vez que aparezcan las imágenes destacadas.

6. Agrega código personalizado para solucionar problemas de imágenes destacadas

A veces, las miniaturas de las publicaciones no son clicables debido a tu tema actual de WordPress, que podría no admitir esa funcionalidad específica.

Quizás quieras agregar tus imágenes destacadas a los feeds RSS o mostrar la imagen destacada en la lista de publicaciones en el área de administración.

Todas estas cosas se pueden hacer con WPCode.

Al activarlo, dirígete a Fragmentos de código » + Agregar fragmento. Serás enviado a una biblioteca de opciones de código personalizado prefabricadas.

Escribe 'imagen destacada' en la barra de búsqueda para ver todas las opciones de código personalizado disponibles para agregar imágenes destacadas a tu sitio web.

Desde aquí, simplemente selecciona la opción deseada.

Por ejemplo, digamos que queremos agregar columnas de imágenes destacadas a nuestro panel de administración de WordPress. Simplemente pasa el cursor sobre la opción y selecciona 'Usar fragmento'.

Luego serás llevado a una página donde puedes editar el fragmento. Afortunadamente, el código ya está preconfigurado, por lo que no tienes que manipular el código o la configuración.

Pero si necesitas ingresar el código manualmente, puedes copiar y pegar desde abajo:

add_filter( 'manage_posts_columns', function ( $columns ) {
	// You can change this to any other position by changing 'title' to the name of the column you want to put it after.
	$move_after     = 'title';
	$move_after_key = array_search( $move_after, array_keys( $columns ), true );

	$first_columns = array_slice( $columns, 0, $move_after_key + 1 );
	$last_columns  = array_slice( $columns, $move_after_key + 1 );

	return array_merge(
		$first_columns,
		array(
			'featured_image' => __( 'Featured Image' ),
		),
		$last_columns
	);
} );

add_action( 'manage_posts_custom_column', function ( $column ) {
	if ( 'featured_image' === $column ) {
		the_post_thumbnail( array( 300, 80 ) );
	}
} );

Luego, simplemente activa el interruptor para encender el fragmento de código personalizado y presiona 'Actualizar'.

Esto debería guardar todos los cambios que acabas de realizar.

Luego, puedes dirigirte a la página Publicaciones » Todas las publicaciones en tu administrador.

En esta página, puedes ver que las miniaturas de las publicaciones aparecen en una columna dedicada.

A continuación, también puedes leer nuestra publicación sobre cómo vincular automáticamente las imágenes destacadas a las publicaciones en WordPress o nuestro tutorial sobre cómo agregar miniaturas de publicaciones a tus feeds RSS de WordPress.

Solucionar el problema de que la imagen destacada de WordPress no se muestre en el tamaño correcto

A veces, es posible que la imagen destacada de tu WordPress no se muestre en el tamaño correcto. Lo mejor es comprender las mejores prácticas para las imágenes destacadas para que puedas evitar problemas desde el principio.

Elegir los gráficos adecuados para las imágenes destacadas

El tamaño óptimo de imagen destacada para imágenes destacadas rectangulares es de 1200 x 687 píxeles. Sin embargo, para los temas que utilizan imágenes destacadas cuadradas, el mejor tamaño es de 600 x 600 píxeles.

Para más detalles, lee nuestra guía sobre cómo hacer edición básica de imágenes en WordPress.

Cambiar los tamaños de imagen predeterminados en WordPress

Si las miniaturas en tu blog aparecen demasiado pequeñas o grandes, puedes editar manualmente los tamaños de imagen predeterminados.

WordPress creará automáticamente copias de tus imágenes destacadas para agregarlas a diferentes áreas de tu sitio web, como la página del blog, las páginas de archivo y la página de inicio.

Los temas de WordPress vienen con sus propias dimensiones de imagen, pero a veces, aún querrás ajustar el tamaño de tu imagen destacada.

Para hacer esto, puedes ir a Ajustes » Medios desde tu área de administración de WordPress. Luego, en los campos de tamaño de 'Miniatura', ingresa las nuevas dimensiones para tu imagen destacada.

Para obtener instrucciones más detalladas, puedes consultar nuestra guía para principiantes sobre tamaños de imagen de WordPress.

Las imágenes destacadas no aparecen en Facebook

Las imágenes destacadas se extraen de WordPress y son populares en las plataformas de redes sociales a través de Open Graph, una tecnología que permite a los sitios de redes sociales como Facebook comprender y mostrar contenido de un sitio web.

Las etiquetas meta de Open Graph se pueden agregar a publicaciones y páginas individuales para controlar cómo aparecen cuando se comparten. Estas etiquetas incluyen información como el título, la descripción y la imagen destacada del contenido.

La forma más fácil de asegurar que todas las imágenes destacadas aparezcan en Facebook es usar All in One SEO. Es el mejor plugin de SEO para WordPress para mejorar y optimizar tu sitio web para obtener mejores posiciones en los motores de búsqueda.

Una vez activado, puedes dirigirte a All in One SEO » Redes Sociales. Luego, en la pestaña ‘Facebook’, asegúrate de habilitar la opción ‘Habilitar marcado Open Graph’.

Esto muestra automáticamente una vista previa de tus publicaciones de blog con una imagen destacada y un breve extracto de texto.

Para más detalles, consulta nuestra guía sobre cómo agregar metadatos de Facebook Open Graph en temas de WordPress.

Esperamos que este artículo te haya ayudado a solucionar el problema de que la imagen destacada no se muestre en WordPress. También puedes consultar nuestra lista de los errores más comunes de WordPress y cómo solucionarlos, junto con nuestra guía sobre cómo recuperar y restaurar páginas eliminadas.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.