Mostrar una imagen del tema o de uploads en WordPress
Dos fragmentos PHP para imprimir una imagen de forma segura según esté guardada dentro del tema o en la biblioteca de uploads.
- Revisado
- Compatibilidad
- WordPress 4.7+; PHP 7.4+
- Lectura
- 2 min
- Autor
- Gabriel — infinit8
Un fragmento para una tarea muy común: construir la URL de una imagen y escapar el resultado antes de imprimir el atributo src. La función correcta depende de dónde esté realmente el archivo.
Si la imagen está dentro del tema
Guarda el archivo, por ejemplo, en assets/images/gabii_rese_web_v3.png. get_theme_file_uri() construye su URL y tiene en cuenta un tema hijo cuando el archivo existe allí.
<img
src="<?php echo esc_url(
get_theme_file_uri('assets/images/gabii_rese_web_v3.png')
); ?>"
alt="Gabriel Rese"
>Si la imagen está en wp-content/uploads
La URL base de uploads puede cambiar por configuración, multisitio o migraciones. Obtenerla desde WordPress evita escribir /wp-content/uploads/ a mano.
<?php $uploads = wp_get_upload_dir(); ?>
<img
src="<?php echo esc_url(
$uploads['baseurl'] . '/2026/05/gabii_rese_web_v3.png'
); ?>"
alt="Gabriel Rese"
>No mezclar la URL del tema con uploads
get_template_directory_uri() devuelve la URL del tema activo. Añadir después /wp-content/uploads/... suele producir una ruta dentro del tema que no existe. Si prefieres esa función para un archivo del tema, el patrón sería:
<img
src="<?php echo esc_url(
get_template_directory_uri() . '/assets/images/gabii_rese_web_v3.png'
); ?>"
alt="Gabriel Rese"
>En un tema hijo, get_template_directory_uri() apunta al tema padre. Para un archivo que pueda estar en el hijo, get_theme_file_uri() suele expresar mejor la intención.
Preguntas frecuentes
¿Por qué usar esc_url()?
Porque el valor se imprime dentro de un atributo URL. WordPress limpia el protocolo y escapa los caracteres necesarios para mostrarlo de forma segura.
¿Puedo escribir directamente /wp-content/uploads/?
Puede funcionar en una instalación concreta, pero deja de ser portable cuando cambia la ruta de uploads, el subdirectorio, el dominio o la configuración multisitio.
Referencias y revisión
Contenido contrastado con documentación oficial. Comprueba siempre el comportamiento en un entorno de pruebas antes de desplegar cambios.