Як створити jquery слайдер для сайту на wordpress
Для початку давайте розберемося, що таке jquery слайдер і навіщо він потрібен Вашому ресурсу.
Гарно оформлений слайдер, пожвавить Ваш сайт і додасть якусь родзинку, яка зробить його більш привабливим для відвідувачів.
З наочним прикладом того, що ми збираємося зробити, можна ознайомитися, клікнувши на посилання.
Потім, їх потрібно розпакувати в зручне для Вас місце.
З даного архіву, нам буде потрібно тільки три файли:
- images / bg_direction_nav.png
- flexslider.CSS
- Jquery.flexslider-min.js
Це основні файли, з яких і буде складатися наш jquery слайдер для WordPress.
Крок 1 Установка файлів.
Першим кроком буде установка файлів слайдера, в активну тему оформлення Вашого ресурсу. Щоб не заплутатися у великій різноманітності існуючих шаблонів, я буду використовувати стандартну тему - Twenty Eleven. Дана тема, за замовчуванням встановлена на всіх двигунах WordPress (як встановити шаблон на WordPress).
В папці inc. ми створюємо нову папку і називаємо її - Slider. Усередині Slider. нам необхідно створити ще одну з назвою - js.
Тепер, повертаємося до наших скачаним файлів. Беремо папку images і закидаємо в Slider. а Jquery.flexslider-min.js в папку - js. Потім, відкриваємо файл flexslider.CSS і копіюємо його вміст. Далі, у Вашій темі оформлення знаходимо файл style.css. відкриваємо і в самому низу вставляємо раніше скопійовані дані. Не забуваємо зберігатися.
Повертаємося в папку Slider і створюємо всередині неї два нових файлу:
У підсумку, вміст папки Slider має бути наступним:
Перед тим, як перейти до наступного кроку, знайдіть у своїй темі оформлення файл functions.php і додайте в кінці наступні рядки:
Вони будуть завантажувати два нових PHP. які ми створили.
Крок 2 Типи користувальницьких записів для JQuery слайдера.
У цьому кроці ми будемо створювати тип користувальницької записи, для нашого jquery слайдера.
Відкрийте файл slider_post_type.php і вставте наступний код:
Слідом, додаємо ще один. Він створить meta_box для URL зв'язку слайда і статті:
Якщо, Ви все зробили правильно, то в адмінці WordPress з'явитися новий розділ - «Slides». Клацніть по ньому і виберете - «Add New Slide»:
Вашому погляду відкриється створений призначений для користувача тип запису:
Крок 3 Завантаження файлів Slider.
Тепер, ми повинні створити сценарій для взаємодії слайдера зі стилями CSS.
Відкрийте файл slider.php і додайте наступний код:
Тут, є ще один момент, який потрібно врахувати. Щоб на Вашому слайдері відображалися стрілки навігації, потрібно відкрити файл style.css і в раніше скопійованих туди стилях відшукати рядок:
У дужках вкажіть шлях до картинки, яка знаходиться в папці images.
для розпізнавання
jquery слайдера нижче в slider.php. додаємо ще один код:У цьому коді можна трохи поекспериментувати, замінивши fade на slide. а horizontal на vertical. Ваш слайдер буде прокручуватися від низу до верху.
Крок 5 Створення шаблону jquery слайдера.
Нарешті, настав час створення самого шаблону слайдера для WordPress.
Все в тому ж slider.php. дописуємо останній шматок коду:
На цьому створення файлів слайдера і сценаріїв взаємодії з темою закінчено.
Наступним кроком буде його реальне застосування, настройка і використання.
Крок 6 Установка і настройка слайдера для WordPress.
Для відображення слайдера в потрібному місці Вашого ресурсу, ми будемо використовувати рядок:
Наприклад, якщо Ви захочете вивести слайдер під заголовком на головній сторінці, то потрібно відкрити файл index.php і під get_header (); ?> Вставити зазначену вище рядок.
Якщо Вам потрібно розмістити слайдер безпосередньо в одній зі статей, то тут на допомогу прийде Short Code.
Відкрийте файл functions.php Вашої теми оформлення і в самому низу додайте нову функцію:
Тепер, щоб додати jquery слайдер в статті, досить використовувати короткий номер - [slider].
Крок 7 Вставка зображень з слайдер.
Тут, все простіше простого. Заходьте в адмінку => Slider => Add New Slide ». У порожній рядку, вписуєте посилання на той матеріал, куди будуть потрапляти відвідувачі при кліці по слайду.
У правому нижньому кутку, Вибираєте - Задати мініатюру:
На сьогодні це все.
До нових статей ...
З повагою, Денис Черніков!
Цікаве по темі:
Відключаємо запити на оновлення плагінів і WordPress!
3 Правильних способу захисту контенту від копіювання!
Як скласти семантичне ядро?
8 MySQL запитів для безстрашних Веб-Майстрів!
Нещодавно я знайомився з бібліотекою jQuery, але на практиці поки що не застосовував. В майбутньому спробую Ваш метод для створення слайдера на своєму сайті. Дякую за статтю Денис!
Так, Олександр, Ви маєте рацію! Коли Джон був в юному віці, тато подарував йому підручник по HTML, тим самим заклавши в ньому фундамент завдяки якому з'явилася улюблена нами JQuery.
Якщо шаблон не підтримує слайди, а хочеться. то цікаво. треба буде протести. з якої версії wp працює?
Це повинно працювати у всіх шаблонах, Ви ж з нуля все робите!
У мене є один старий блог на будівельну тематику там wp 2.9 (не доходять руки оновитися) та й шаблон там старенький. Слайдер оживив би блог. Треба зайнятися.
Чи не вийти, слайдер працює з 3.0 і далі!
Але якщо взяти тільки jQuery-плагін і проявити кмітливість, то вийти. Я вже flexslider без цього коду ставив в тему.
Десять разів все перевірив. Додавання мініатюри теж виходить з помилкою.
Я коли робив просто зберігав. Ви на локалке мабуть робите?
Так на локалке. Умовно начебто слайд працює, але з конфліктних помилок зручність роботи відразу різко зменшується. Тобто припустимо я створив слайд, натиснув зберегти, тут же вилітає білий екран і помилка, доводиться в браузері повертатися на крок назад, оновлювати сторінку. Дивишся-ніби все гуд. Але знову ж мініатюри не вставляти в своєму результатом розмірі, через що вся картинка розмазується по всьому слайду.
Зараз точно не згадаю, але там були заморочки з розміром картинок. Я їх під один розмір все підганяв. Я робив все на своєму сайті, причому відразу в онлайні.
Вітаю! як я зрозумів у другому кроці і перший і другий код треба вставляти в slider_post_type.php
/ Create Slider Post Type require (get_template_directory (). '/inc/slider/slider_post_type.php'); // Create Slider require (get_template_directory (). '/inc/slider/slider.php');
Так, Ви все вірно зрозуміли! По-перше Ви спочатку пройдіть через всі кроки, а по-друге можливо ВИ не правильно написали slider_post_type.php
Все правильно написав, як у вас показано! Мені немає сенсу проходити урок до кінця, адже розділу «Slides» в панелі адміністратора немає і пише - / Create Slider Post Type require (get_template_directory (). '/inc/slider/slider_post_type.php'); // Create Slider require (get_template_directory (). '/inc/slider/slider.php');
Владислав, я Вам вірю і прекрасно Вас розумію, але у мене цей слайдер 4 місяці стояв і нормально функціонував. Все було зроблено саме так, як я описав в пості. Я не бачу, як і що Ви робите, але всі описані кроки чіткі і написані без помилково, перевірені і відстріл. Дивіться уважніше! Може кодування не поміняли, може скопіювали криво, а може якісь змінні конфліктують. Я коли перший раз робив, тупив нереально, а потім сам сміявся над собою! Те млинець кому забудеш влип, то лапки пропустиш!))) Судячи помилково мабуть щось з directory, як ніби, що то не там прописали або не туди вставили. Експериментуйте!