ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Спойлер для сайта, jQuery скрипт спойлера

.

Здравствуйте, сегодня мы будем устанавливать спойлер для сайта без использования плагинов. В «обязанности» спойлера входит скрытие большого объема информации на страницах сайта. Например аннотаций, каких-то пояснений, ну или-же как в моем случае, спойлер скрывает большой объем html, CSS, и других кодов, которые не очень гармонично вливаются в дизайн страницы, но просто необходимы.

Вкратце : Спойлер — информация о сюжете книги, фильма или компьютерной игры, которая, будучи преждевременно раскрытой, лишает некоторых читателей части удовольствия от сюжета. Википедия

Данный скрипт спойлера использует технологии jQuery, он довольно-таки динамичный, легкий имеет гибкие настройки. И в этой публикации будет рассмотрена установка этого спойлера для сайта на популярный движок WordPress.

Что-бы спойлер для сайта заработал, для начала необходимо немного подредактировать файл functions.php и создать шорткод. Для этого в файл functions.php перед закрывающим тегом ?>нужно добавить ниже опубликованный код : (шаблон кода можно скачать ниже, здесь некорректно отображается).

Cпойлер для сайта

Следующим шагом создайте файл с расширением js, к примеру spoiler.js, скопируйте код самого скрипта jQuery спойлера и поместите в созданный файл.

Скрипт спойлера jQuery

Далее разместите файл в папке вашего сайта на сервере, или на хостинге, это одно и то-же, только названия разные и запомните или запишите путь к этому файлу. Кто не знает как прописать путь к папке или файлу советую ознакомиться.

Добавляем код вывода спойлера в файл functions.php

Подключаем скрипт спойлера jQuery в (footer) сайта. поместить нижеприведенный код можно перед закрывающим тегом </footer>.

Подключаем скрипт спойлера jQuery

следующее:

Ну и на последок добавим в самое окончание файла (style CSS — таблица стилей)

Подключаем стили спойлера для сайта

В этом коде обратите внимание на комментарии, в них написаны основные настройки, где, что можно изменить. Так-же есть возможность использовать свои фоновые картинки, либо совмещать их с текстовым названием. Для этого нужно просто указать путь к картинкам. В файле эти места закомментированы.

Я настроил их под свой сайт, но вы сможете с легкостью поменять цвет, размер, да и вообще весь внешний вид спойлера, настроить его под свой сайт и сделать не похожим на другие «открывашки».

А вот и сам шорткод : только при вставке заключайте его в квадратные скобки!

 

Теперь при написании статьи, обернув текст в шорткод, вы получите неплохой спойлер, кстати, в отличии от бесплатных плагинов, как вы успели заметить, этот шорткод имеет возможность полной настройки внешнего вида.
На этом на сегодня все. Если что пишите, обращайтесь, как говорится — чем можем, тем поможем !

БЕРЕГИТЕ СЕБЯ!



лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

Добавить комментарий

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