Как создать слайдер JQuery и как сделать слайдер на сайте

Привет читатели блога!

Вы видели красивые слайды на web-ресурсах? Хотите создать у себя на блоге такой же классный слайдер, который будет показывать картинки Ваших постов в автоматическом режиме? Если ответ да, то эта статья именно для Вас! Потому что ниже будет написано – «Как создать слайдер JQuery».

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

Уверен, что многие не знают, что означает слайдер JQuery, поэтому в начале поста объясню, что это, а ниже будет описание по созданию слайдера на JQuery.

ЧТО ТАКОЕ СЛАЙДЕР JQUERY

Если говорить в общем, то слайдер JQuery это картинки, которые меняются автоматически на другие, а внутри их ссылки на статьи. Например, Вы хотите улучшить поведенческие факторы на блоге. Для этого Вы создаете красивый слайдер JQuery, и тем самым увеличиваете переходы по сайту. Это типа Ваша реклама для того чтобы заинтересовать читателя.

Если Вы создадите слайдер JQuery по моей методике, то Ваш блог оживет и будет привлекать посетителей своей изюминкой.

Чтобы Вы понимали то, что мы будем делать, я нашел для Вас пример в интернете, увидеть его можно по этой ссылке.

КАК СОЗДАТЬ СЛАЙДЕР JQUERY

Перед созданием слайдера JQuery, нам необходим архив, который нужно [urlspan]скачать здесь[/urlspan]. Его мы будем сегодня использовать для создания слайдера (Вы знаете какого).

После того как скачали архив, распакуйте его там, где Вам удобно:

Sozdat-slajder-jquery

Из этого распакованного архива нам нужно три файла:

  1. images/bg_direction_nav.png
  2. CSS
  3. flexslider-min.js

Это файлы, которые помогут нам создать слайдер JQuery на WordPress блоге и дальше будут стимулировать его, то есть заставлять работать на Вас. Давайте перейдем к установке этих файлов.

ПЕРВЫЙ ШАГ – УСТАНОВКА ФАЙЛОВ ДЛЯ СОЗДАНИЯ СЛАЙДЕРА JQUERY

Мы установим эти файлы в Вашу тему блога, то есть в шаблоне WordPress. Пример я буду показывать не на своей теме, потому что она многим не подойдет и слайдер будет работать неправильно. Пример приведу на обычной, стандартной теме – «Twenty Eleven».

По умолчанию этот шаблон есть у всех блогов, если у Вас ее нет по каким-то причинам, то можете скачать ее здесь и закинуть в папку — «Themes», в корень своего блога.

Slajder-jquery

Теперь зайдите в скачанную тему — «Twenty Eleven» и создадим там новую папку. С начало зайдите в папку – «inc» и создайте внутри нее еще папку, которую мы назовем – «Slider», а внутри ее еще папку – «js».

Теперь найдите наши файлы, которые Вы скачали выше, теперь берите папку «images» и перетащите ее в папку «Slider», файл аJquery.flexslider-min.js в папку – «js», после этого откройте файл flexslider.CSS и скопируйте все его содержимое – «CTRL+A, CTRL+C».

Зайдите в файл – «css», который находится там же где и другие файлы Вашей темы. Откройте его, опуститесь в самый низ и вставьте туда скопированный код – «CTRL+V». После чего обязательно сохраните его. Теперь вернемся к папке – «Slider» и создайте там два файла – «slider.php и slider_post_type.php».

  • Файл – «slider.php» создаст шаблон и загрузит все файлы нашего слайдера JQuery для WordPress блога;
  • Файл – «slider_post_type.php» задаст тип сообщений, для слайдера.

У нас должно получится в папке – «Slider» вот так, как показано на изображении ниже:

Kak-sozdat-slajder-jquery_4

Теперь в шаблоне Вашей теме нужен файл – «functions.php», откройте его и добавьте в конец код.

Kak-sozdat-slajder-jquery_5

Этот код будет загружать 2 файла PHP, которые мы создали выше. Можно переходить смело к следующему шагу.

Второй шаг – пользовательские записи для JQuery слайдера

На этом этапе (2 шаге) мы создадим пользовательский тип записей для слайдера. Откройте созданный файл — «slider_post_type.php» и вставьте в него этот код:

Kak-sozdat-slajder-jquery_6

И еще один код добавьте в этот файл, код, который создает – «meta_box» для URL связи JQuery слайда со статей.

Kak-sozdat-slajder-jquery_7

Если Вы читали внимательно и повторяли за мной все действия, то в админ панели блога должен появиться новый раздел – «Slides». Нажмите на него и выбирайте – «Add New Slide».

Kak-sozdat-slajder-jquery_8

После нажатия откроется пользовательский тип записей. Идем дальше…

Третий шаг – загружаем файлы – «Slider» для слайдера JQuery

Вот теперь нам необходимо создать свой сценарий для взаимодействия слайдера с нашими стилями CSS. Открывайте файл – «slider.php» и добавьте туда такой код:

Kak-sozdat-slajder-jquery_9

Есть один важный момент о котором нельзя забыть. На слайдере должны быть стрелки навигации, для этого открываем файл – «style.css» и найдите там строчку:

background: url(images/bg_direction_nav.png)

Смотрите на скобки, место того, что там есть вставьте свой путь до картинки со стрелочками. Эта картинка находится в папке – «images», которую мы поместили в папку – «Slider».

Чтобы было проще, используйте блокнот – «Notepad ++», который используют все успешные блоггеры.

Четвертый шаг – инсценируем слайдер JQuery для WordPress блога

Для того, чтобы <head> слайдер JQuery распознавал, нужно добавить в файл — «slider.php» такой код:

Kak-sozdat-slajder-jquery_10

fadeна slide, horizontal на vertical. Меняя эти значения, слайдер будет прокручиваться туда-сюда, короче делайте по своему вкусу.

ПЯТЫЙ ШАГ – СОЗДАЕМ ШАБЛОН ДЛЯ – «СЛАЙДЕРА JQUERY»

Kak-sozdat-slajder-jquery_11

Все, шаблон мы создали!

Следующим этапом мы его применим, настроим и используем для нашего WordPtress блога.

ШЕСТОЙ ШАГ – УСТАНОВИМ И НАСТРОИМ СЛАЙДЕРА JQUERY

Для того чтобы слайдер был в том месте в котором Вы хотите его видеть, нужно вставить туда строку:

<?php echo wptuts_slider_template(); ?>

Куда вставлять этот код? Если Вы хотите вывести слайдер на главной странице, то откройте файл – «index.php» и сразу под строкой – «get_header (); ?>» вставьте сточку, приведенную выше. Вставить слайдер в записях можете открыть файл – «single.php» и вставить код туда, файл – «page.php» отвечает за вывод страниц блога.

Для размещения слайдера в какой-то статье, нужно воспользоваться – «Short Code».

Открывайте файл — «functions.php» и вставьте туда такой код:

Kak-sozdat-slajder-jquery_12

Теперь можно добавить jquery слайдер в статью, для этого можно использовать кротчайший номер — [slider].

Седьмой шаг – вставляем изображения в слайдер JQuery

Тут все просто! Зайдите в админ панель Вашего блога на вкладку =>Slider => Add New Slide. В пустой строке вставьте ссылку на ту страницу, куда Вы хотите направить своих читателей, при клике они будут туда перемещаться. Теперь в углу выберите – «Задать миниатюру».

Kak-sozdat-slajder-jquery_13

После этого делаем тоже самое, что и со статьями. Загрузите туда нужную картинку и выберете – «Использовать миниатюру»:

Kak-sozdat-slajder-jquery_14

Смотрите видео — плагин для создания слайдера JQuery

Нажимаете опубликовать и загруженная картинка в слайдере. Наконец все готово. Теперь Вы знаете как создать слайдер JQuery на WordPress блоге, у Вас получилось? Как Вам статья? Подписывайтесь на обновления блога.

С уважением, Алексей Кобзарев

2 комментария

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *