От темплейт към тема

След като в предишните две статии добавихме стиловете и скриптовете от нашия темплейт можем да презаредим, страницата и ако всичко сме направили правилно би трябвало да видим страницата на темплейта с всички негови елементи, но без съдържащите се в него снимки. Това е така защото все още не сме копирали директорията с изображенията в директорията на темата. Сега е моментът да го направим, но дори и след това изображенията няма да се виждат. Причината е, че темплейта съдържа относителния път от основната му директория към директорията с изображенията. Пренесен вече като тема индексния файл няма как да намери снимките, защото той се извиква от основната директория на сайта, а не на темата, т.е. индексния файл ще потърси снимките относително спрямо основната директория на сайта, а снимките са в поддиректория /images на директорията на темата. Принципно всички изображения би трябвало да могат да се дефинират динамично - от администрацията на темата, но ако все пак не ни харесва да виждаме празни правоъгълници по страницата можем да променим нещата още сега. На практика единствения проблем е, че индексния файл се опитва да достъпи папка /images относително спрямо себе си, пък тя е в директорията на темата. Т.е. ако към дефинираните вече пътища в самия индексен файл добавим пътя до темата към която той принадлежи би трябвало да видим и изображенията. В WordPress има специална функция, която връща пътя до текущата тема. Името на тази функция е get_template_directory_uri, а за да ни свърши работа в конкретната ситуация я извикваме така:

<?php echo esc_url(get_template_directory_uri() . '/images/some_image.svg') ?>

Виждаме, че на практика преди пътя до директория /images просто конкатенираме пътя, който get_template_directory_uri ни връща.Функцията esc_url() просто обработва адреса така, че да се получи коректен URL адрес на снимката. На практика ако добавим абсолютния път до директорията на темата изображенията би трябвало да се появят. Нека опитаме. Коригираме файла index.php по следния начин:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8" />
	<title>Deep theme Themplate</title>
  <?php wp_head(); ?>
</head>
<body>
  <header>
    <div class="logo">
      <a href="#"><img src="<?php echo esc_url(get_template_directory_uri() . '/images/deep_theme_logo.png') ?>" alt="" /></a>
    </div>
    <nav>
      <ul class="menu lavaLamp">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section id="top-section">
    </section>
    <section id="services">
      <div class="service left-service">
        <div class="service-image">
          <img class="picture" src="<?php echo esc_url(get_template_directory_uri() . '/images/manicure-870857_1280.jpg') ?>" alt="" />
        </div>
        <h2><a href="#">Nail Care</a></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div class="service middle-service">
        <div class="service-image">
          <img class="picture" src="<?php echo esc_url(get_template_directory_uri() . '/images/cosmetics-2130540_1280.jpg') ?>" alt="" />
        </div>
        <h2><a href="#">Skin Care</a></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div class="service right-service">
        <div class="service-image">
          <img class="picture" src="<?php echo esc_url(get_template_directory_uri() . '/images/fashion-3308387_1280.jpg') ?>" alt="" />
        </div>
        <h2><a href="#">Hair Care</a></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </section>
    <section id="paralax">
      <h2>Don't be shy,</h2>
      <h3>Contact Us!</h3>
    </section>
    <section id="slogan">
    
    </section>
  </main>
  
  <footer>
    <div class="top-footer">
      <div class="logo-footer">
        <img src="<?php echo esc_url(get_template_directory_uri() . '/images/deep_theme_logo_white.png') ?>" alt=""/>
      </div>
    </div>
    <div class="middle-footer">
      <div class="middle-footer-left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel arcu est. Vestibulum vestibulum scelerisque iaculis. Donec ac gravida est, a finibus neque.</p>
      </div>
      <div class="middle-footer-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel arcu est. Vestibulum vestibulum scelerisque iaculis. Donec ac gravida est, a finibus neque.</p>
      </div>
      <div class="middle-footer-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel arcu est. Vestibulum vestibulum scelerisque iaculis. Donec ac gravida est, a finibus neque.</p>
      </div>
    </div>
    <div class="bottom-footer">
      <div class="social-icons">
        <ul>
          <li><a href="#"><img src='<?php echo esc_url(get_template_directory_uri() . '/images/facebook-icon.svg') ?>'/></a></li>
          <li><a href="#"><img src='<?php echo esc_url(get_template_directory_uri() . '/images/tweeter-icon.svg') ?>'/></a></li>
          <li><a href="#"><img src='<?php echo esc_url(get_template_directory_uri() . '/images/messenger-icon.sv') ?>g'/></a></li>
          <li><a href="#"><img src='<?php echo esc_url(get_template_directory_uri() . '/images/skype-icon.svg') ?>'/></a></li>
        </ul>
      </div>
    </div>    
  </footer>
	<div class="copyright">
    <span><a href="#">&copy; CodeMyArt</a></span>
  </div>
  <?php wp_footer(); ?>
</body>
</html>

Ако всичко сме направили правилно би трябвало при презареждане на основната страница на сайта да видим всички изображения, които бяха изчезнали:

Wordpress theme with images