Всім привіт! Про слайдер для wordpress я обмовився в статті про проміжні підсумки роботи над блогом. Там я обіцяв розповісти як легко і швидко встановити так званий слайдер (або по-іншому карусель) до себе на блог. Так ось розповідаю. Як завжди детально і покроково.
8 нескладних кроків, які організовують карусель на вашому блозі:
1) Завантажуємо сам плагін;
2) Заливаємо його на сервер в папку wp-content / plugins / і активуємо;
3) Створюємо папку big в кореневому каталозі блогу (де папки wp-content, wp-admin і інші). Можна і іншу, але за замовчуванням плагін перевіряє наявність саме цієї. Дана директорія буде потрібна для заливки картинок, які будуть відображатися в слайдері.
4) Тепер найцікавіше. Як прив'язати картинку до певного посту на блозі? Для цього в плагіні існує кілька методів. Вони залежать від того яка у вас стоїть «система постійних посилань». Якщо у вас:
А зараз конкретний приклад мого слайдера. Урли постів:
- readers-without-ads.jpg
- konkurs-na-luchshuyu-fotografiyu-blogera.jpg
- foto-bloggerov.jpg
5) Після того як стало зрозуміло, як прив'язувати картинки до постів, йдемо в адмінку. Вказуємо їх розміри (саме їх доведеться використовувати), метод прив'язки і вибираємо, що показувати в слайдері. Можна показувати:
- останні 3 додані картинки (+ відмічені);
- випадкові;
- відмічені.
6) Заливаємо картинки в папку big (чим менше буде вона важити, тим швидше буде завантажуватися слайдер) і в необхідному місці шаблону wordpress вставляємо код:
show (); ? Gt;
Я вставив цей код в index.php і в single.php - в інших файлах думаю сенсу немає. Дивимося, що вийшло. Якщо відображення подобається, то вітаю вас - плагін встановлений. Якщо ж оформлення не подобається, то переходимо до пункту 7.
7) Змінюємо оформлення слайдера. Пункт «додати до CSS». Є 3 позиції:
- #information a: hover - це колір тексту (замість 000000 поставити свій);
- #information - колір фону (замість D9F0FF свій);
- - розмір рамки і її колір (1px - це один піксель).
Змінюємо тут «до смаку».
8) Можна редагувати розмір тексту, який виводиться в слайдері. За замовчуванням це 200 знаків. Якщо треба, то редагуємо файл rc-tiny.class.php. Знаходимо там 74 страочку і змінюємо число на необхідне.
Тепер точно все, плагін встановлений і налаштований. Він досить легкий і не сильно вантажить движок. Як вам?
Андрій Аронскій запропонував мануал по тому, як організувати карусель на сайті без використання плагіна, за що йому велике спасибі. Отже, читати.
Карусель на вордпресс без плагіна
В якості альтернативи пропоную вам спосіб, як додати карусель на ваш блог без плагіна.
Отже, для початку нагадаю, що кожен плагін для WordPress гальмує його роботу, збільшує глючность і заважає знаходженню причини несправностей. Я не сперечаюся, але бувають плагіни, без яких неможливо обійтися: на написання коду у вас піде не один тиждень, а якщо ви не маєте ні часом, ні знанням мови програмування - то тут і мови не може йти про заміну плагіна власними скриптами.
Інша справа, коли мова йде про плагінах, інтегруючих в WordPress скрипти інших розробників. Як приклад можна відразу згадати мільйон реалізацій плагінів, що додають Light Box ефект до ваших зображень. Всі вони роблять одне і те ж: підключають JS - бібліотеку і використовують її функції.
Іноді, заглянувши в один з таких плагінів, просто жахаєшся: стає страшно за майбутнє нашого програмного забезпечення. Пройшли ті часи, коли все лаяли кривої код індійських програмістів: немає, вони пишуть також, просто лаяти вже нікому.
Відженемо песимістичні думки: все в наших руках, і повернемося до нашої каруселі.
1. Насамперед вирішимо, куди ми будемо вставляти нашу карусель. Я думаю, невеликий досвід у написанні та редагуванні тим для WordPress у вас є. По крайней мере, кому, як не вам знати, як називаються у вас шаблони, які відповідають за вигляд головної сторінки, сторінки з постом, сторінки з архівами. Нагадаю, що в стандартній темі вони носять назви: index.php, single.php, arhive.php відповідно. Також ви можете користуватися функціями вродe is_home (), is_single і т.д, і / або розмістити код в footer.php.
3. Розпаковуємо його куди-небудь, я б порадив в папку з темою, в яку ви його вставляєте. Нам треба 2 файли і 1 папку: compressed.js, script.js, IMAGES.
4. Підключаємо бібліотеку:
У разі, якщо ви записали файли в папку carusel в директорію з вашою темою для WordPress.
Я не буду зараз розповідати про те, що таке CSS, ви повинні про це знати і так. Як бачите, тут описані всі наші id і class'и. Ви можете залишити так, як є, а можете редагувати як вашій душі завгодно.
Пропоную вам спробувати піти від стандартної компоновки і розташувати компоненти каруселі як душа забажає. Наприклад, всі кнопки можуть бути окремо, ви можете не робити велике зображення, а просто збільшити зображення з слайдера. Ви можете зробити так, щоб все крутилося і змінювалося з величезною швидкістю, а можете зробити, щоб посилання з каруселі вели в різні місця однієї статті. Ви зовсім не обмежені кількістю зображень в каруселі і їх розміром.
В якості альтернативи пропоную вам спосіб, як додати карусель на ваш блог без плагіна.
Отже, для початку нагадаю, що кожен плагін для WordPress гальмує його роботу, збільшує глючность і заважає знаходженню причини несправностей. Я не сперечаюся, але бувають плагіни, без яких неможливо обійтися: на написання коду у вас піде не один тиждень, а якщо ви не маєте ні часом, ні знанням мови програмування - то тут і мови не може йти про заміну плагіна власними скриптами.
Інша справа, коли мова йде про плагінах, інтегруючих в WordPress скрипти інших розробників. Як приклад можна відразу згадати мільйон реалізацій плагінів, що додають Light Box ефект до ваших зображень. Всі вони роблять одне і те ж: підключають JS - бібліотеку і використовують її функції.
Іноді, заглянувши в один з таких плагінів, просто жахаєшся: стає страшно за майбутнє нашого програмного забезпечення. Пройшли ті часи, коли все лаяли кривої код індійських програмістів: немає, вони пишуть також, просто лаяти вже нікому.
Відженемо песимістичні думки: все в наших руках, і повернемося до нашої каруселі.
1. Насамперед вирішимо, куди ми будемо вставляти нашу карусель. Я думаю, невеликий досвід у написанні та редагуванні тим для WordPress у вас є. По крайней мере, кому, як не вам знати, як називаються у вас шаблони, які відповідають за вигляд головної сторінки, сторінки з постом, сторінки з архівами. Нагадаю, що в стандартній темі вони носять назви: index.php, single.php, arhive.php відповідно. Також ви можете користуватися функціями вродe is_home (), is_single і т.д, і / або розмістити код в footer.php.
2. Завантажуємо скрипт.
3. Розпаковуємо його куди-небудь, я б порадив в папку з темою, в яку ви його вставляєте. Нам треба 2 файли і 1 папку: compressed.js, script.js, IMAGES.
4. Підключаємо бібліотеку:
У разі, якщо ви записали файли в папку carusel в директорію з вашою темою для WordPress.
var slideshow = new TINY.slideshow ( «slideshow»);
6. Додаємо код з картинками.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.
Останнім тегом пропишемо посилання, яка відкриється після натискання на зображення. Якщо в якості якоря посилання поставити зображення (як видно в прикладі), то воно буде відображатися внизу каруселі у вигляді слайд шоу. Зображення треба буде зберегти в папку THUMBNAILS, природно зменшений варіант. До речі, в плагін немає слайд-шоу.
Все правильно! А виглядати наш код буде приблизно ось так:
Великий div «wrapper» містить в собі два div'а поменше: «fullsize» і «thumbnails», що є повним розміром і слайд шоу у вигляді превьюшек відповідно.
Нехай вас не дивує їх оманлива порожнеча: вони наповнені тільки тим, що потрібно, щоб описати це в каскадної таблиці стилів і надати скрипту для наповнення красою.
var slideshow = new TINY.slideshow ( «slideshow»);
А ось те, що всередині, нам вже цікаво. Розглянемо те, що на прикладі:
slideshow.auto = true; - прокручується чи карусель автоматично. За замовчуванням - false.
slideshow.speed = 5; - швидкість прокрутки. За замовчуванням - 10.
slideshow.link = »linkhover»; - це назва класу відображення посилання. Повернемося до нього, коли будемо розглядати каскадні таблиці стилів.
slideshow.info = »information»; - інформація. Вказує id div'а, що міститься в «fullsize».
slideshow.thumbs = »slider»; - id div'а, в якому буде відображатися слайд шоу. Якщо видалити рядок - його не буде.
slideshow.left = »slideleft»; slideshow.right = »slideright»; - id div'ов, що відповідають за прокрутку слайд шоу. Як можна помітити, всі 3 div'а знаходяться в «thumbnails». Як ви їх розташуєте, значення не має.
slideshow.scrollSpeed = 4; - швидкість, з якою буде крутитися слайдер. Чим більше число - тим вище швидкість.
slideshow.spacing = 5; - відстань між прев'юшки.
slideshow.active = "# fff»; - колір межа активної прев'юшки.
slideshow.init ( «slideshow», »image», »imgprev», »imgnext», »imglink»); - то, без чого це все взагалі працювати не буде. «Slideshow» - це id списку, про який я писав в пункті 6. «image», »imgprev», »imgnext», »imglink» - це div'и зображення, кнопки «вперед», «назад» і посилання відповідно. Все це міститься в «fullsize».
9. Наведемо це все за допомогою CSS. Тут зауважу, що подргузка зайвого CSS займає багато часу, а при реалізації каруселі за допомогою плагіна без завантаження зайвої каскадної таблиці стилів обійтися не можна було.
Я дуже мучився і перекручували, коли створював свій плагін G_Buzz_Button, намагаючись обійтися без додаткової CSS. Мені це коштувало великих нервів і часу, але я все зробив і отримав дуже акуратний і легкий код на виході.
Реалізовуючи карусель моїм методом, ми зможемо додати все необхідне для таблиці стилів в CSS нашої теми. Додамо такий код:
Я не буду зараз розповідати про те, що таке CSS, ви повинні про це знати і так. Як бачите, тут описані всі наші id і class'и. Ви можете залишити так, як є, а можете редагувати як вашій душі завгодно.
Пропоную вам спробувати піти від стандартної компоновки і розташувати компоненти каруселі як душа забажає. Наприклад, всі кнопки можуть бути окремо, ви можете не робити велике зображення, а просто збільшити зображення з слайдера. Ви можете зробити так, щоб все крутилося і змінювалося з величезною швидкістю, а можете зробити, щоб посилання з каруселі вели в різні місця однієї статті. Ви зовсім не обмежені кількістю зображень та їх розміром.
Спасибі, Андрію за докладну інструкцію.
А зараз про приємне. Планка в 400 передплатників подолана - сьогодні feedburner показав цифру 404 (прям як однойменна сторінка про помилку), що несказанно радує. А ще вчора на столі я виявив наступний конверт.
Забавно виходить: починаєш писати пост днем в одному місті, а закінчуєш ввечері в іншому.
постовий:
Коли потрібні актуальні програми на замовлення, починаєш замислюватися, що розробка програмного забезпечення буде кращим рішенням.
У плагіна від Роланда проблеми з настройками, він їх не оновлює як треба. Можна помітити, якщо спробувати замінити картинку на іншу з таким-же ім'ям, або спробувати додати 4 картинки по вибору.
У мережі є ще одна реалізація плагіна вордпресс на базі скрипта Leigeber'а, тільки я забув, хто його написав. Там менше налаштувань, але стабільніше робота.
Взагалі, ці всі скрипти простіше прикручувати до WP не у вигляді плагінів, а як до звичайного сайту. Зменшується вага коду => збільшується швидкість роботи.
Healthy, додав
yana, я не знайшов, швидше за все не можна.
Aronsky, а мене все влаштовує Напишіть як без плагіна це організувати - цікаво. Серж Shine, а ви як раз прочитаєте теж.
Aronsky, так я зараз тільки згадав, що Роланд на його основі і зробив цей плагін.
Хто хоче організовувати карусель без плагіна, то тоді за посиланням вище.
Я був би дуже вдячний, якби те, що перебувати за посиланням переробили на вордпресс і перевели на російську. А то я не сильний в англійському та й інші читачі будуть вдячні)))
Так я знаю, просто не хочеться більше вордпресс додатковими плагінами завантажувати. Хочу вбудувати в саму тему
Загалом, наробив я плутанини з цим скриптом. Я постараюся сьогодні написати невеликий мануал російською як зручно вбудувати скрипт прямо в тему вордпресс і, якщо Сергій погодиться - прямо на цьому блозі і опублікуємо, на додаток до цього посту.
Sosnovskij, наприклад, є шаблони в яких для слайдера можна призначити висновок обраної рубрики, анонси якої потрібно показати, з адмінки WP, вказавши номер ID; також кількість статей. Але щоб з адмінки - це складно, в сенсі написати такий код.
Чи можливо, використавши пару рядків коду, вказати в самому шаблоні (наприклад, в index.php) яку саме рубрику повинен відображати слайдер? І кількість статей з цієї рубрики?
vinaction, створювати і заливати на хостинг треба ручками (4,6 пункти).
Sosnovskij, ну це не цікаво ... якщо у мене на сайті вже 200постов я для кожного повинен зробити тумбу і злити їх все в одну папку. І все це ручками!
Начебто двадцять першого століття же.
vinaction, в моєму уявленні в слайдері повинні бути картинки-посилання на найцікавіші сторінки. Тому 3-5 картинок мені за очі. Та й гнучкість пропадає в разі автоматичних вставок.
Хлопці не знаю писав тут на цю тему хто небудь чи ні але у мене така проблемка плагін залив почав ставити посилання і він не знаходить папку пише що папка не існує в загальному як тільки не обзивав папку куди я її тільки не пхав, в яких тільки позах не вказував урл ні чого не виходить підкажіть плиз терміново треба
Наталя-емансипе, на жаль, з плагіном Featured Content Slider ніколи не зустрічався.
Євген, не міг би ти підказати або дати посилання, як реалізувати на wordpress слайдер, як на цьому сайті (верхній слайдер) gidonlinekino.com причому, я сам хочу вручну вибирати які посади будуть публікуватися.
Без образ, але ..
Як же задовбали на всіх сайтах однакові пости про плагін Роланда Чанішвілі для слайдера постів. Я адже забиваю в пошуковику карусель картинок а не посад. Шкода. Піду далі шукати.