Cómo especificar la fuente de una imagen en el editor de páginas de WordPress
Tengo un archivo de imagen almacenado dentro del directorio del tema llamado "site".
Ahora en mi página de inicio, usando el editor de páginas de WordPress, he puesto el siguiente código pero no muestra la imagen, parece que la ubicación es incorrecta.
<img src="site/images/footLogo.png" style="padding: 0px!important; color:white">
¿Me puedes decir cuál es el problema?

URLs absolutas
Como otros han mencionado, necesitas usar la URL completa para el atributo src
de tu imagen, de lo contrario el navegador no podrá encontrarla.
WordPress proporciona la función get_template_directory_uri()
que devuelve la URL completa a la ruta de tu tema.
Así que, haciendo:
<?php
$img_src = get_template_directory_uri() . '/site/images/footLogo.png';
?>
<img src="<?php echo $img_src ?>" style="padding: 0px!important; color:white">
tu imagen se mostrará, asumiendo que la ruta es correcta y el archivo está ahí.
Función helper
Si tienes más imágenes y deseas facilitar el proceso de mostrarlas en las plantillas, puedes crear una función personalizada que envuelva get_template_directory_uri()
.
Por ejemplo:
function theme_image( $image ) {
return get_template_directory_uri() . '/site/images/' . $image;
}
y luego en las plantillas hacer:
<img src="<?php echo theme_image('footLogo.png') ?>"
style="padding: 0px!important; color:white">
WordPress 4.7+ y "fallback de tema padre"
Si usas código de WP 4.7+, tendrás acceso a la nueva función get_theme_file_uri()
.
El beneficio de esta función sobre get_template_directory_uri()
es que carga automáticamente el archivo desde el tema hijo si está disponible.
Así que, por ejemplo, si cambias la función theme_image()
a:
function theme_image( $image ) {
return get_theme_file_uri( '/site/images/' . $image );
}
cuando hagas theme_image('footLogo.png')
la imagen 'footLogo.png'
se cargará desde el tema hijo si se está usando un tema hijo y el archivo está disponible allí, de lo contrario se cargará desde el tema padre.
Esta nueva característica proporciona un "fallback de tema padre" que se empareja con el "fallback de plantilla de tema padre" desde temas padres a temas hijos que ha estado disponible desde WP 3.0 a través de funciones como get_template_part()
.

Puedes definir una constante en el archivo de funciones del tema de la siguiente manera:
if( !defined(THEME_IMG_PATH)){
define( 'THEME_IMG_PATH', get_stylesheet_directory_uri() . '/site/images' );
}
y luego puedes usar la etiqueta img así:
<img src="<?php echo THEME_IMG_PATH; ?>/footLogo.png" style="padding: 0px!important; color:white">
