Як зробити гарний спойлер на сайті або wordpress блозі?

У сьогоднішній статті я хотів би розповісти вам про те, як можна зробити зручний і красивий спойлер на вашому сайті або ж wordpress блозі, без використання будь-яких плагінів, які навантажують базу даних і сам блог.

Спойлер красивий, зручний, плавно відкривається і закривається і найголовніше те, що його зовнішній вигляд можна добре налаштувати під свій сайт або wordpress блог. З усіх скриптів спойлерів, які я перепробував, той, про який піде мова в цій статті, мені сподобався найбільше.

Ось подивіться на приклад роботи спойлера:

Тут ваш заголовок спойлера (будь-який текст)
Добре, плавно і красиво відкривається, не навантажує базу даних блогу, кількість спойлерів, які ви можете вставляти в свої статті або сторінки сайту або блозі – необмежена! Одним словом – краса! Повторю, якщо вам не подобається зовнішній вигляд, який я показав вище, то ви легко зможете його налаштувати самі під дизайн вашого сайту або блогу.

Власне питання: А навіщо взагалі потрібен спойлер? Особисто у мене необхідність в ньому з’явилася після того, як я почав часто викладати живе відео та робити текстові версії цих відео.

Є відео, нижче мені потрібно розмістити текстову версію цього відео, але чесне слово, якось не хочеться, щоб цей текст був розміщений суцільний простирадлом, краще помістити цей текст під спойлер і якщо кому потрібно його почитати, той розгорне спойлер і вуаля. Почне читати! Прочитав, згорнув.

Так само спойлери знадобляться для інших моментів ведення сайту або блогу, в загальному я думаю ви знайдете йому застосування, штука хороша і корисна, для кого-то просто необхідна.

Отже! Давайте розповім про те, як ви зможете зробити ось такий же спойлер на своєму сайті або блозі. Ті, хто веде не блог, а сайт, я думаю розберуться куди який код вставляти, я ж зараз розберу створення спойлера для движка wordpress, так як основна аудиторія мого блогу – це блогери. Гут! Поїхали!

Як створити спойлер на wordpress?
Схема створення спойлера:

1. Підключити бібліотеку jQuery до блогу в файлі footer.php
2. Підключити скрипт спойлера в файлі footer.php
3. Додати css стилі для спойлера в файл style.css
4. Додати сам код спойлера до статті або сторінки блогу

Ну що ж, в першу чергу підключаємо бібліотеку jQuery. Додайте ось цей код в файл footer.php теми вашого блогу перед закривається тегом / body (wp-content / themes / ваша тема / footer.php):

<Script src = “http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”> </ script>

Можете додати в header.php без різниці, я просто все скрипти і коди суну в підвал блогу, щоб вони останніми завантажувалися. І вам раджу. До речі перед тим як додавати цей код, подивіться взагалі може бути у вас ця бібліотека вже підключена. У мене наприклад вже була підключена:

Перевірте файли header.php, footer.php, function.php, index.php вашого блогу, якщо jquery.min.js ніде не підключена, то додавайте код, якщо підключена, то не варто! Далі!

Додайте ось цей код в файл footer.php теми вашого блогу для того, щоб спойлер нормально працював (знову ж після закривається тега / body):

<Script> // <! [CDATA [
$ ( “. Closed”). ToggleClass ( “show”);

$ ( “. Title”). Click (function () {
$ (This) .parent (). ToggleClass ( “show”). Children ( “div.contents”). SlideToggle ( “medium”);
if ($ (this) .parent (). hasClass ( “show”))
$ (This) .children ( “. Title_h3”). Css ( “background”, “# bbbbbb”);
else $ (this) .children ( “. title_h3”). css ( “background”, “# dddddd”);
});
//]]> </ Script>

Ок! Тепер додайте в файл style.css теми вашого блогу ось цей код:

.spoiler {
overflow: hidden;
margin-bottom: 20px;
margin-top: 20px;
border: 1px solid #dfdfdf;
border-left: 2px solid # 3965a8;
box-shadow: 0 0 9px #dddddd inset;
}

.title_h3 {
cursor: pointer;
font-size: 14px;
background: #dddddd;
margin: 0 -10px 0 -10px;
padding: 10px;
padding-left: 30px;
-moz-box-shadow: 0 0 9px #dddddd inset;
box-shadow: 0 0 9px #dddddd inset;
}

.closed .contents {display: none; }
.closed h3 {background: #bbbbbb; }
.contents {padding: 10px; }

Це стилі. Тобто зовнішній вигляд вашого спойлера. Відразу скажу, що при додаванні такого коду, спойлер буде виглядати як у мене, якщо ж ви хочете змінити вид, то будь ласка, якщо не знаєте як це робити, то зверніться до фрілансера, він вам зробить за 100 рублів.

Так, ну і останнє, власне додаємо сам спойлер до статті або сторінки нашого блогу. Для цього потрібно в потрібному місці на сторінці вставити ось цей код:

<Div class = “spoiler closed”>
<Div class = “title”>
<Div class = “title_h3”> <strong> Тут ваш заголовок спойлера </ strong> (будь-який текст) </ div>
</ Div>
<Div class = “contents”> А ось тут буде текст під спойлером </ div>
</ Div>

Якщо ви хочете, щоб на сторінці відображалося 2, 3, 5, а то і 10 спойлерів, то просто знову ж в потрібному місці знову вставляєте цей самий код. Все просто!

У висновку трохи про візуал спойлера для тих, хто не хоче звертатися до фрілансерам, щоб вони їм налаштували зовнішній вигляд. Ось дивіться. У файл style.css ми додали стилі для спойлера. Наприклад рядок border: 1px solid #dfdfdf; в стилі .spoiler: укладає весь контент в спойлері в тоненьку рамку сірого кольору.

Рядок border-left: 2px solid # 3965a8; каже, що зліва повинна бути вертикальна смужка синього кольору, а строчка font-size: 14px; в стилі .title_h3 робить текст в заголовку спойлера розміром в 14 px. Коротше налаштувати можна як вашій душі завгодно, можна змінити колір фону, можна закруглити краю спойлера, шрифт збільшити і т.д.

Загалом користуйтеся! Штука хороша і корисна.