Добавяне на javascript и css файлове.

В чистия HTML има прости правила за добавяне на css и javascript файлове. Първите се добавят в head-частта на зарежданата страница. В примерния темплейт стиловете са добавени по следния начин:

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8" />
	<title>Deep theme Themplate</title>  

        <link type="text/css" rel = "stylesheet" type = "text/css" href = "css/reset.css" />
        <link type="text/css" href="css/jquery.lavalamp.css" rel="stylesheet" media="screen" />
        <link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>

Javascript скриптовете пък се задават точно преди затварянето на body тага, за да е сигурно, че няма да се заредят преди да се е заредил и последния елемент от страницата:

    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script> 
    <script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

Виждаме, че става бързо и лесно и ако всички пътища са зададени правилно, то при зареждането на страницата те ще бъдат взети под внимание от браузъра.

В WordPress както и в Drupal добавянето на файловете със стилове и скриптове следва правила съвсем различни от описаните.

Нека сега разгледаме по-подробно как става това в WordPress

Понеже ще изхождаме от реален пример от нашия темплейт, то трябва да съчетаем примерите от показаните по-горе откъси от head частта и частта преди затварящия /body таг. Изключваме jQuery, което както идва с ядрото на WordPress и ни остава да го включим като зависимост. Така, че остава да включим:

  • reset.css - файл, който нулира всички маргини и падинги, така, че после всичко да изглежда еднакво на различните браузъри
  • jquery.lavalamp.css - необходим за работата на lavalamp ефекта в менюто
  • jquery.lavalamp.min.js - самия скрипт на lavalamp
  • styles.css - нашите стилове за темата.
  • script.js - създаваните от нас скриптове.

Аз лично постъпвам по следния начин:

Създавам папка vendor в основната папка на темата, където ще се съхраняват всички стилове и скриптове на външни производители и там създавам папки за всеки производител по отделно. В нашия случай ще създам и папка lavalamp във vendor и пътя става deep_theme/vendor/lavalamp. В нея копирам файловете jquery.lavalamp.css и jquery.lavalamp.min.js.

В основната директория на темата създавам папка css в която ще са всички стилове, създавани от мен и папка js в която пък ще бъдат всички скриптове, създавани от мен.

По отношение на css папката, понеже ползвам SASS (scss) ще създам и папка scss, която ще съдържа стиловете в scss формат. Самото компилиране от scss към scss става автоматично от NetBeans, който ползвам за среда за разработка. Оставям на Вас да прецените дали да ползвате SASS изобщо (което горещо препоръчвам). Ако Вашата среда за разработка не поддържа настройки за автоматично компилиране от SASS към css можете да инсталирате Koala - http://koala-app.com/ и тя ще се грижи за това.

След като съм създал съответните папки копирам файловете в тях:

reset.scc и styles.css копирам в папка css (респективно styles.scss в папка scss). Ако ползвате Koala обаче и styles.css и styles.scss трябва да са в една и съща папка.

scripts.js копирам в папка js.

jquery.lavalamp.min.js и jquery.lavalamp.css в папка vendor/lavalamp (ако не сте го направили още)

Deep Theme directories

Разбира се можем да добавим стиловете в нашия style.css файл, но ние ще го направим по правилния начин.

След като файловете са вече по съответните директории следва създаването на един файл, който стои в основата на функционалността на всяка една WordPress тема. С негова помощ ще укажем на системата, че трябва да включи посочените от нас (по определен начин) файлове в генерираният от системата html, който потребителят ще види в браузъра си. Името на този файл трябва да е functions.php. Създаваме го, но засега ще го оставим празен и ще продължим нататък.

Копираме html кода от предишната статия в index.php и ако активираме темата трябва да видим следното:

index

От кода обаче трябва да се премахнат всички css и javascript дефиниции, които както казахме ще добавим по определен от правилата на WordPress начин. Кода ще стане следният:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8" />
	<title>Deep theme Themplate</title>
</head>
<body>
  <header>
    <div class="logo">
      <a href="#"><img src="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="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="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="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="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='images/facebook-icon.svg'/></a></li>
          <li><a href="#"><img src='images/tweeter-icon.svg'/></a></li>
          <li><a href="#"><img src='images/messenger-icon.svg'/></a></li>
          <li><a href="#"><img src='images/skype-icon.svg'/></a></li>
        </ul>
      </div>
    </div>    
  </footer>
	<div class="copyright">
    <span><a href="#">&copy; CodeMyArt</a></span>
  </div>
</body>
</html>

След като сме изчистили кода можем да пристъпим към включването на стиловете. За целта отваряме файла functions.php и вмъкваме следният код:

/* 
 * Styles and scripts for Deep Theme theme
 */
function deep_theme_styles_and_scripts() {
  wp_enqueue_style('reset', get_template_directory_uri() . '/css/reset.css');  
  wp_enqueue_style('lavalamp', get_template_directory_uri() . '/vendor/lavalamp/jquery.lavalamp.css');
  wp_enqueue_style('deep_theme_styles', get_template_directory_uri() . '/css/styles.css');  
}

add_action('wp_enqueue_scripts', 'deep_theme_styles_and_scripts');

На практика правим следното:

  1. Създаваме потребителска функция deep_theme_styles_and_scripts. Името е произволно, но WordPress обществото е приело за добра практика да започва с името на създаваната тема.
  2. В тялото на функцията извикваме wordpress функцията wp_enqueue_style, като й подаваме два параметъра. Първият е произволно име с който скрипта ще се регистрира в системата на wordpress, а вторият е абсолютият път до скрипта, който искаме да добавим. За да го добавим използваме друга wordpress функция - get_template_directory_uri(), която връща пътя до оснвната папка на текущата тема и към него конкатенираме пътя до самия файл със стилове.
  3. С помощта на специалната функция add_action регистрираме нашата функция deep_theme_styles_and_scripts, като указваме изпълнението й да стане по време на събитието wp_enqueue_scripts.

Функцията add_action се използва за регистриране на потребителски хукове (hooks). Hook e функция, чието изпълнение се предизвиква от WordPress при настъпване на определено събитие. Това е често използвана практика, която трябва да се разбере. Повече на https://developer.wordpress.org/reference/functions/add_action/

За да добавим обаче скриптовете наистина трябва да направим още нещо. В head частта на index.php трябва да добави следния ред: <?php wp_head(); ?>. Трябва да се получи следното:

<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>

Така добавяме всички елементи, които ще дойдат от WordPress, включително файловете със стилове, които сме й указали да регистрира.

Как да разберем, че стиловете се зареждат?

Аз понеже ползвам браузър Firefox посочвам някъде в прозореца на документа и след натискане с десен бутон на мишката от изскочилото меню избирам Inspect Element и в таб-а Style Editor виждам, че моите два файла са се заредили в списъка със заредени стилове:

wordpress styles

Ако стиловете не са се появили проверете внимателно кода.

След като сме се уверили, че стиловете са заредени вече можем да се погрижим и за скриптовете. За целта в тялото на същата функция, която създадохме за целта deep_theme_styles_and_scripts добавяме следнят ред, който извиква функцията wp_enqueue_script:

wp_enqueue_script('lavalamp_script', get_template_directory_uri() . '/vendor/lavalamp/jquery.lavalamp.min.js', array('jquery'), false, true);

Параметрите които подавате са следните:

  1. Произволно име с което скрипта ще се регистрира в системата на WordPress.
  2. Абсолютен път до скрипта
  3. Зависимости от които нашия скрипт зависи, в нашия случай jQuery.
  4. Версия на скрипта (ако се подаде false системата ще го замени с текущата версия на wordpress.
  5. Дали скрипта да се добави преди затварящия body таг. По подразбиране е false, което би го добавило в head-частта на документа, затова трябва да подадем true.

За да може магията да стане обаче точно преди затварящия body таг трябва да добавим следния ред:

  <?php wp_footer(); ?>
</body>
</html>

Можем да се уверим, че скрипта ни се зарежда като използваме инспектора на елементи и таба Debugger:

wordpress_scripts

С това изложението ми как да добавим стилове и скриптове към WordPress приключва. Малко по-дълго се получи, но ако мислите, че е сложно можете да се запознаете свързаната статия за това как се прави добавянето в Drupal.

 

Свързана статия