Cómo especificar la fuente de una imagen en el editor de páginas de WordPress

15 ene 2017, 11:15:45
Vistas: 16K
Votos: 5

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?

0
Todas las respuestas a la pregunta 4
0

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().

15 ene 2017 13:08:59
1

No puedes usar PHP en el editor de contenido, solo escribe la ruta completa a tu imagen.

<img src="/css/_include/img/slider-images/1.jpg" alt="Imagen" data-fullwidthcentering="on">
18 ene 2017 20:27:56
Comentarios

WordPress comenta el código PHP escrito en el editor.

MacInnis MacInnis
28 ago 2021 19:41:58
0

Tendrás que copiar la ruta completa de la imagen de esta manera:
http://www.tu-sitio-web.extension/wp-content/themes/sitio/images/footLogo.png en tu <img src="">.

WordPress trabaja con URLs absolutas.

15 ene 2017 11:37:48
0

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">
15 ene 2017 11:59:01