Cum să specifici sursa unei imagini în editorul de pagini WordPress?

URL-uri absolute

După cum au menționat și alții, trebuie să utilizați URL-ul complet pentru atributul src al imaginii, altfel browserul nu va putea să o găsească.

WordPress oferă funcția get_template_directory_uri() care returnează URL-ul complet către calea temei.

Deci, făcând:

<?php
$img_src = get_template_directory_uri() . '/site/images/footLogo.png';
?>

<img src="<?php echo $img_src ?>" style="padding: 0px!important; color:white">

imaginea va fi afișată, presupunând că calea este corectă și fișierul există.

Funcție helper

Dacă aveți mai multe imagini și doriți să simplificați procesul de afișare a acestora în șabloane, puteți crea o funcție personalizată care încapsulează get_template_directory_uri().

De exemplu:

function theme_image( $image ) {
  return get_template_directory_uri() . '/site/images/' . $image;
}

și apoi în șabloane faceți:

<img src="<?php echo theme_image('footLogo.png') ?>" 
     style="padding: 0px!important; color:white">

WordPress 4.7+ și "fallback pentru tema părinte"

Dacă utilizați cod WordPress 4.7+, veți avea acces la noua funcție get_theme_file_uri().

Beneficiul acestei funcții față de get_template_directory_uri() este că încarcă automat fișierul din tema copil dacă este disponibil.

Deci, de exemplu, dacă modificați funcția theme_image() în:

function theme_image( $image ) {
  return get_theme_file_uri( '/site/images/' . $image );
}

când faceți theme_image('footLogo.png'), imaginea 'footLogo.png' va fi încărcată din tema copil, dacă tema copil este în uz și fișierul este disponibil acolo, altfel va fi încărcată din tema părinte.

Această nouă funcționalitate oferă un "fallback pentru tema părinte" care se asociază cu "template parent theme fallback" de la tema părinte la tema copil, care există încă din WordPress 3.0 prin funcții precum get_template_part().

Nu puteți folosi PHP în editorul de conținut, trebuie doar să scrieți calea completă către imaginea dumneavoastră.

<img src="/css/_include/img/slider-images/1.jpg" alt="Imagine" data-fullwidthcentering="on">

Va trebui să copiați calea completă către imagine, astfel:
http://www.numele-siteului-voastru.extensie/wp-content/themes/site/images/footLogo.png în <img src="">.

WordPress lucrează cu URL-uri absolute.