Як зробити спойлер. Варіанти

Охочих створювати сайти зараз дуже багато. Більшість користувачів вчиться цьому самостійно, використовуючи різні джерела. І, звичайно, існують поняття, про які майбутні власники навіть і не чули. Але вже якщо взялися за справу, то вивчати його треба досконально. Тому в статті буде докладно розглянуто питання про те, як зробити спойлер на своєму ресурсі.

Почнемо, природно, з самого поняття, що це таке і для чого даний об`єкт буде потрібно. Отже, досить часто на сайтах присутня інформація різного роду, яку (з різних причин) треба спочатку заховати від відвідувачів. Тобто не те щоб її зовсім не показувати, а просто надавати тільки за бажанням. Ось спойлер в html якраз для цього і використовується. Він зберігає спочатку прихований контент для сайту. Але це ніяк не відбивається при ранжируванні ресурсу пошуковими системами, так як для них ця конструкція відкрита і негативного впливу не спостерігається. Будь прихована інформація розкривається при кліці на зазначену посилання.

Крім того, як зробити спойлер, дуже багатьом цікаво, а з якою метою він робиться? Найчастіше для зовнішньої краси ресурсу. Візьмемо, наприклад, сайт, дизайн головної сторінки якого не передбачає розміщення тексту великого розміру. А власнику треба, щоб пошуковики ресурс просували, тому контент повинен бути об`ємним (розмір статті може зіграти значну роль). Ось і приходить на допомогу створення спойлера. Ще його використання підійде для приховування допоміжної інформації, або того, що не завжди хочеться читати.

Далеко не всім хочеться їх читати, але від них нікуди не дітися. Існує спосіб, який допоможе вберегти відвідувачів від даного чтива. Це створення кнопки, яка приховує будь-якого виду спойлер на форумі, в статті і т.п. Створити її можна по-різному. Найпростіше за допомогою html-коду input class = "button". Спочатку треба тільки переконатися, що при додаванні інформації підтримується вставка коду, і якщо так, то кнопка почне працювати відразу після вставки в потрібне місце тексту.

Така версія підходить для сайту, створеного на Ucoz. Але навіть після установки кнопка може не працювати, тому що вимагає додаткових налаштувань. В першу чергу - це її зовнішній вигляд. Потім - ідентифікатор, який повинен бути унікальним. І, нарешті, в код сторінки, де повинен знаходитися матеріал, перед тегом додається скрипт, який відповідає за коректну роботу кнопки. Важливо правильно його помістити, а не просто знати, як зробити спойлер.

А тепер розберемо цю ж функцію, але тільки вже для сайту, зробленого для WordPress. Найпростіше тут використовувати плагін Advanced Spoiler, який легко завантажити з багатьох ресурсів. Його установка стандартна:

- розпакування архіву на своєму комп`ютері-

- підключення до сайту за допомогою фтп-клієнта (найпопулярніший - Total Commander) -

- закачування файлу на свій хостинг-

- в адмінці сайту, шукаємо розділ «Модулі - неактивні» і активуємо знову встановлений. Після виконаних дій він почне працювати. Тепер, додаючи матеріал в будь-якому редакторі, як у візуальному, так і в html, буде видна кнопка «Spoiler». Додаванням потрібною інформацією між тегами [spoiler] [/ spoiler] і створюється спойлер. Якщо власник непогано розбирається, плагін можна трохи переналаштувати.

І ще один спосіб, як зробити спойлер на сайті. В першу чергу треба підключити бібліотеку jQuery і так звану «приблуду» JS, яка потрібна для того, щоб спойлер сворачивался і розгортався більш-менш плавно. На потрібній сторінці сайту, в адміністративній панелі, між тегами розміщується необхідний код. Далі, щоб функція за замовчуванням була закрита, в CSS-файл додається строчка .splCont {display: none- padding: 3px 5px-}. Якщо немає такого документа, це не настільки страшно. Напис можна помістити в будь-якому місці прямо в самому тексті, головне - до розміщення самого спойлера. І, нарешті, між ... поміщається сам код приховування інформації.