Подключение скриптов к WordPress на примере слайдера Fotorama

Подключаем внешний плагин для сайта - слайдер fotorama

Хочется показать, как можно подключить скрипт к WordPress сайту на примере слайдера Фоторама. Для начала нужно скачать файлы скрипта Fotorama. Далее закачиваем скрипт на WordPress сайт в папку /wp-content/plugins/fotorama/. Как это сделать вы можете прочитать в моей статье про ftp клиенты и закачивание файлов на хостинг.

Теперь, в файл header.php необходимо вставить несколько строк кода, которые подключат внешние библиотеки jquery, необходимые для работы скрипта, и файлы самого плагина, в том числе его стили. Весь код ставим между тегами

<head>

Здесь необходимо вставить код

</head>

Для начала, подключите библиотеку jquery. Для этого скопируйте код ниже и вставьте его в файл вашей темы header.php:

<script src="https://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

Затем необходимо подключить файлы стилей и сам скрипт, делается это следующим образом:

<link href="/wp-content/plugins/fotorama/fotorama.css" type="text/css" rel="stylesheet">
    <script src="/wp-content/plugins/fotorama/fotorama.js" type="text/javascript"></script>

Я обычно указываю полный путь до файлов, потому что иначе бывает что плагины отказываются работать.  И еще, в header.php я добавляю скрипт настройки скрипта Фоторама

 <script type="text/javascript">
      $(function() {
        $('#fotorama').fotorama({
  width: 700,
  height: 490
});
      });
    </script>

Вот. Плагин подключили. Теперь для отображения Фоторамы на сайте нужно заключить ваши изображения в ID = fotorama. Вот так:

<div id="fotorama">
<img src="/gallery/1_preview.jpg">
<img src="/gallery/2_preview.jpg">
<img src="/gallery/3_preview.jpg">
</div>

Более подробную информацию о настройке слайдера Fotorama можно почитать на официальном сайте.