Как подключить слайдер Bootstrap на отдельной странице WordPress

5 (100%) 8 vote[s]

В вордпресс есть бесплатные темы, заточенные под Bootstrap. Но если вы пользуетесь стандартным шаблоном, рано или поздно вы начинаете понимать, что инструментов вам недостаточно, а пользоваться плагинами не хочется. Поэтому закатываем рукава и прикручиваем нужные функции к своему сайту вручную.

Скачиваем исходные файлы и подключаем Bootstrap

На главной странице Бутстрап выбираем версию для скачивания. Мы рассмотрим пример с версией  3.3.7. Выпадающее меню выбора находится в правом верхнем углу.

Появляется окно, в нем нажимаем «Download»(«Скачать»). Появится окно с выбором варианта загрузки. Выбираем «начальная загрузка», включающая минимальный пакет с CSS, JavaScript и шрифтами.

Структура архива бутстрап выглядит так:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

После скачивания архива (с готовыми к применению CSS и JavaScript файлами), его необходимо распаковать в каталог вашего сайта. Загружаете архив в корень папки темы, распаковываете, затем архив .zip удаляете.

Далее прокручиваем в низ страницы и находим базовый html код страницы. Его нужно скопировать и вставить в любой редактор кода (например, Notepad++).

Затем на странице «Формы» находим пункт «карусель» и выбираем вариант «С подписями». Копируем шаблон кода и вставляем его между тегами <body>…</body> вместо заголовка <h1>…</h1> в скачанный ранее шаблон страницы.

Затем в каталоге темы сайта создаем папку (назовем ее carousel), в которую помещаем скачанные папки из bootstrap (js, css, fonts). В папке css создаем пустой файл style.css, в котором мы потом пропишем свои настройки стиля и анимации.

Очищаем все ненужное в шаблоне html, прописываем в нем пути к bootstrap.css и style.css, добавляем нужное количество слайдов, переносим подключение jQuery и Bootstrap js в самый низ страницы (для быстрой загрузки основного содержимого страницы) и в итоге получим такой файл (в нашем примере — для 6 слайдов):

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>

	
  <!-- Подключаем Bootstrap CSS -->
	<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
  <!-- Подключаем собственный CSS -->
	<link rel="stylesheet" href="css/style.css" type="text/css">

  </head>
<body>

    <div id="dws-slider" class="carousel slide" data-ride="carousel">
        <!--Показатели-->
        <ol class="carousel-indicators">
            <li data-target="#dws-slider" data-slide-to="0" class="active"></li>
            <li data-target="#dws-slider" data-slide-to="1"></li>
            <li data-target="#dws-slider" data-slide-to="2"></li>
			<li data-target="#dws-slider" data-slide-to="3"></li>
            <li data-target="#dws-slider" data-slide-to="4"></li>
			<li data-target="#dws-slider" data-slide-to="5"></li>
            
        </ol>

        <!--Обертка для слайдов-->
        <div class="carousel-inner" role="listbox">
            <div class="item active"><img src="img/a.jpg" alt="Картинка 1">
                <div class="carousel-caption">
                     <h5 class="text-uppercase">Заголовок1</h5>
                    <p>Текст1</p>
                </div>
            </div>
            <div class="item"><img src="img/b.jpg" alt="Картинка 2">
                <div class="carousel-caption">
                    <h5 class="text-uppercase">Заголовок2</h5>
                    <p ><a href="index22.html">Текст2</a></p>
                </div>
            </div>
            <div class="item"><img src="img/c.jpg" alt="Картинка 3">
                <div class="carousel-caption">
                    <h5 class="text-uppercase">Заголовок3</h5>
                    <p>Текст3</p>
                </div>
            </div>
			<div class="item"><img src="img/d.jpg" alt="Картинка 1">
                <div class="carousel-caption">
                    <h5 class="text-uppercase">Заголовок4</h5>
                    <p>Текст4</p>
                </div>
            </div>
            <div class="item"><img src="img/e.jpg" alt="Картинка 2">
                <div class="carousel-caption">
                    <h5 class="text-uppercase">Заголовок5</h5>
                    <p>Текст5</p>
                </div>
            </div>
            <div class="item"><img src="img/f.jpg" alt="Картинка 3">
                <div class="carousel-caption">
                    <h5 class="text-uppercase">Заголовок6</h5>
                    <p>Текст6</p>
                </div>
            </div>
        </div>
   <!-- Подключаем jQuery js -->  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <!-- Подключаем Bootstrap js -->     
<script src="js/bootstrap.js"></script>
 
    <!-- Включите все скомпилированные плагины (ниже) или включите отдельные файлы при необходимости -->
   
</body>
</html>

Важно! Подключить jquery js необходимо перед добавлением начальной загрузки js, потому что для начальной загрузки требуется файл Jquery. Иначе получите ошибку:

Uncaught Error: JavaScript Bootstrap требует jQuery с requirejs

Теперь разберем подробнее наш .html файл:

<meta name=»viewport» content=»width=device-width, initial-scale=1″> — для корректного отображения нашей карусели на любых устройствах.

В каталоге распакованных и подключаемых нами файлов bootstrap css помещены стили фреймворка Bootstrap, а в js — плагины для обеспечения работы компонентов. Плагины работают с использованием функций библиотеки jQuery. Поэтому перед Bootstrap JS необходимо подключить библиотеку jQuery:

  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  • <script src="js/bootstrap.js"></script>
  • <link rel="stylesheet" href="css/bootstrap.css">
  • <link rel="stylesheet" href="css/style.css">

Пока мы работаем локально, ссылки остаются в таком виде. После переноса готового слайдера на сайт, ссылки меняем на те, где у нас находятся распакованные файлы бутстрап на сайте.

Подключение Бутстрап через CDN

Подключить Bootstrap можно также с помощью CDN (при этом скачивать Bootstrap в проект не нужно):

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Что у нас есть еще:

<!--каркас слайдера -->
<div id="dws-slider" class="carousel slide" data-ride="carousel">
   
</div>

<!--показатели прокрутки, первый должен быть class="active-->
<ol class="carousel-indicators">
   <li data-target="#dws-slider" data-slide-to="0" class="active"></li>
   <li data-target="#dws-slider" data-slide-to="1"></li>
   <li data-target="#dws-slider" data-slide-to="2"></li>
   <li data-target="#dws-slider" data-slide-to="3"></li>
   <li data-target="#dws-slider" data-slide-to="4"></li>
   <li data-target="#dws-slider" data-slide-to="5"></li>
</ol>  

<!-- Обертка для слайдов. Первый class="item active", остальные class="item " (сколько вам нужно)-->
<div class="carousel-inner" role="listbox">
    <div class="item active"><img src="img/a.jpg" alt="Картинка 1">
           <div class="carousel-caption">
              <h5 class="text-uppercase">Заголовок1</h5>
              <p>Текст1</p>
           </div>
     </div>
</div>

Теперь нам нужно еще добавить в body под слайдами элементы управления выплывающему тексту:

<!--Элементы управления-->
        <a class="left carousel-control" href="#dws-slider" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#dws-slider" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

И в самом конце перед закрытием тега body добавляем автолистинг с таймером 6000:

<script>
   function carousel(){
        interval (6000)
    }
</script>

Структура нашего проекта будет выглядеть так:

Осталось прописать стиль для нашей страницы с каруселью:

body {
 margin: 0;
 padding: 0;
 font-family: Vollcorn, sans-serif;

}
 h1 { 
    font-size: 130%; 
    font-family: Vollcorn, sans-serif; 
    color: #000000;
   }
p { 
    font-size: 140%; 
    font-family: Vollcorn, normal 400; 
    color: #000000;
   }
.carousel-inner h5 {
 background-color: rgba(20, 49, 68, 0.6);
 padding: 20px;
 animation: anime-H3 1.3s ease-out;
}
.carousel-inner h6 {
 font-size: 14px;
 background-color: rgba(20, 49, 68, 0.6);
 padding: 10px;
 animation: anime-P 1.6s ease-out;
}
a.text:active, /* активная/посещенная ссылка */
a.text:hover,  /* при наведении */
a.text {
  text-decoration: none;
  color: (10, 10, 10, 0.8);
}
@keyframes anime-H3 {
 from {
  opacity: 0;
  transform: translateX(-2000px);
 }
 to {
  opacity: 1;
  transform: translateX(0);
 }
}
@keyframes anime-P {
 from {
  opacity: 0.5;
  transform: translateX(2000px);
 }
 to {
  opacity: 1;
  transform: translateX(0);
 }
}

Итак, стили прописали. Осталось поместить в папку img изображения.

Важно! Изображения должны быть одинакового размера и большого формата.

Делаем страницу с фреймворком Bootstrap

Для начала отметим, что вы можете столкнуться с проблемой форматирования, когда будете вставлять свой код на страницу. Вордпресс упорно будет добавлять свои теги разметки, и ничего работать не будет.

Как отключить автоформатирование
WordPress

Чтобы отключить автоформатирование WordPress на отдельной странице, нужно в файл function.php вставить такой код:

function my_formatter($content) {
$new_content = '';
$pattern_full = '{(\[raw\].*?\[/raw\])}is';
$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
foreach ($pieces as $piece) {
if (preg_match($pattern_contents, $piece, $matches)) {
$new_content .= $matches[1];
} else {
$new_content .= wptexturize(wpautop($piece));
}
}
return $new_content;
}
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');
add_filter('the_content', 'my_formatter', 99);

Это позволит пользоваться шорткодом , внутри которых форматирование будет отключено.

Подключение Bootstrap к отдельным страницам/записям

Если вы решите подключить Бутстрап через шаблон header, но не хотите, чтобы он работал на всех страницах, нужно задать выборочные параметры. Чтобы bootstrap работал только на нужных нам страницах, в файле function.php под function twentyfifteen_scripts() вставляем такой код:

function portfolio_scripts_styles() {
if ( is_single('4799, 2148') )
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . 
               '/bootstrap/css/bootstrap.css', array(), ' ' );
wp_enqueue_style( 'mytheme-style', get_template_directory_uri() . 
               '/bootstrap/css/style.css', array(), ' ' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . 
               '/bootstrap/js/bootstrap.js', array('jquery'), ' ' );
}
add_action( 'wp_enqueue_scripts', 'portfolio_scripts_styles' );

Во второй строке if ( is_single(‘ID1, ID2’) ) задаем ID тех страниц/записей, (для страниц меняем single на page) на которых нам нужен bootstrap .

Перед тем, как вставить наш код на страницу, убираем теги
<head>…</head> , а все заворачиваем в <body></dody>.

Файл style.css можно не загружать, а вставить прямо в страницу html под открывающим тегом <body> , завернув его в <style>… </style>.

Теперь наш lndex.html, готовый к вставке, будет таким:


<html>


<link rel="stylesheet" href="/wp-content/themes/ваша_тема/bootstrap/css/bootstrap.css">

<!--по желанию здесь ссылка <link rel="stylesheet"href="/wp-content/themes/ваша_тема/bootstrap/css/style.css">-->
<style>
 <!--или по желанию здесь наш style.css, или ссылка на файл в блоке выше-->
</style>
<body>
    <div id="dws-slider" class="carousel slide" data-ride="carousel">
        <!--Показатели-->
        <ol class="carousel-indicators">

            <li data-target="#dws-slider" data-slide-to="0" class="active"></li>
            <li data-target="#dws-slider" data-slide-to="1"></li>
            <li data-target="#dws-slider" data-slide-to="2"></li>
	        <li data-target="#dws-slider" data-slide-to="3"></li>
            <li data-target="#dws-slider" data-slide-to="4"></li>
	        <li data-target="#dws-slider" data-slide-to="5"></li>
            
        </ol>

        <!--Обертка для слайдов-->
        <div class="carousel-inner" role="listbox">
            
            <div class="item active"><a href="ссылка на страницу/рубрику"><img src="ссылка на картинку" alt="Картинка 2"></a>
                <div class="carousel-caption">
                    <h5 class="text-uppercase">Заголовок1</h5>
                    <h6>Текст1</h6>
                </div>
            </div>
			<!--все следующие class="item"-->
			<div class="item"><a href="ссылка на страницу/рубрику2"><img src="ссылка на картинку2" alt="Картинка 2"></a>
                <div class="carousel-caption">
                    <h5 class="text-uppercase">Заголовок2</h5>
                    <h6>Текст2</h6>
                </div>
            </div>
            <!--здесь далее все наши слайды-->
        </div>

        <!--Элементы управления-->
        <a class="left carousel-control" href="#dws-slider" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#dws-slider" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

<script>
   function carousel(){
        interval (6000)
    }
</script>
  <!-- Подключаем jQuery js -->  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Подключаем Bootstrap js -->     
<script src="js/bootstrap.js"></script>
  
</body>
</html>

При помощи обычного загрузчика загружаем на сайт наши изображения. Ссылки на изображения копируем в редакторе медиафайлов (заходим в библиотеку, кликаем по изображению, появится ссылка на него).

Осталось вставить на страницу нашу карусель. В редакторе блоков (если таким пользуетесь) выбираем классический редактор, переключаемся в режим «редактировать как html». Вставляем теги и между ними вставляем наш html-код.

В подключаемых модулях меняем ссылки:

<link rel="stylesheet" href="/wp-content/themes/ваша_тема/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/wp-content/themes/ваша_тема/bootstrap/js/bootstrap.js">

В блоках слайдов прописываем ссылки на картинки. Чтобы сделать картинки кликабельными, вставляем перед ними ссылки:

<a href ="ссылка на страницу/рубрику"><img  src="ссылка на картинку" alt="Картинка"></a>

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 946

Популярные записи