Всем привет, Дорогие друзья! Сегодня мне хотелось бы поделиться с Вами тем, как сделать спойлер на WordPress. Конечно существуют различные плагины для реализации спойлера, но мы будем использовать очень простой код, который выводит красивый спойлер без особых усилий.
Но перед этим давай поговорим что это вообще такое, а так же разберем для чего нужен такой спойлер.
Спойлер — это специальный блок, состоящий из двух частей: заголовок и скрытый текст. И при нажатии на заголовок происходит раскрытие блока, где находится дополнительная информация, то есть тот текст, который был скрыт ранее. Ну вообщем как то так 🙂 Но для того, чтобы понять давайте взглянем на пример:
Красиво? Удобно? Лично для меня да! А использовать данный спойлер можно на самом деле практически везде! В сайдбаре, на страницах, в статьях и т.д.
Но лично я стал использовать данный спойлер по причине того, что мне необходимо на страницах «Услуги» и «Реклама» писать много информации, которую необходимо структурировать для легкого восприятия. Вот как раз данный спойлер мне в этом и поможет!
Как раз сейчас, перед написанием статьи, я видоизменял странички, но еще их не выложил. Но после написания статьи все до конца сделаю, и выложу страницы, и Вы сами все увидите!
И самое интересное данного кода, что его можно использовать не только на движке WordPress, но и на любом другом, даже самописном (если конечно знаете что куда вставлять 🙂 ). Но сегодня мы с Вами будет разбирать на примере нашей любимой CMS WordPress. Вы готовы? Тогда приступим!
Перед началом хотелось бы предупредить, что Вам придется заходить в файлы, который отвечают за отображение статей. Поэтому перед тем, как что-то где-то менять — обязательно сделайте резервную копию!
Ну а теперь можно приступать, ничего сложного тут на самом деле нету!
1. Необходимо добавить код, который отвечает за подключение библиотеки jQuery. В некоторых темах данный код уже имеется, и вставлять его повторно нет смысла. Поэтому, первым делом Ваша задача убедиться в том, имеется ли подключение к jQuery.
Для этого поочередно открывайте файлы index.php, function.php, header.php, footer.php и смотрите есть ли где нибудь упоминание об файле jquery.min.js. Если такого нет, то можете смело добавлять следующий код в файл footer.php перед тегом </body>:
1 | <script type="text/javascript" src="//http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> |
А если подключение уже имеется, то данный шаг можно пропустить!
2. Опять же обращаемся к файлу footer.php и так же перед закрывающимся тегом </body> вставляем следующие:
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> $(".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","rgb(253, 253, 253)"); else $(this).children(".title_h3").css("background","rgb(240, 238, 238)"); }); </script> |
Данный код отвечает за работоспособность нашего спойлера!
3. Теперь наша задача сделать, чтобы спойлер был красивый. Для этого необходимо перейти в файл style.css и прописать следующие стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .spoiler { overflow: hidden; margin-bottom: 20px; margin-top: 20px; border: 1px solid #dfdfdf; border-left: 2px solid #09ADAD; box-shadow: 0 0 9px #dddddd inset; } .title_h3 { cursor:pointer; font-size: 14px; background: rgb(240, 238, 238); 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; } |
И теперь наш спойлер обретает красивый вид, который Вы сможете видоизменять самостоятельно! Для этого Вам нужно будет просто менять значение строчек. Но это уже тема другой статьи, которую я кстати собираюсь очень скоро написать.
В статье я расскажу о том, как абсолютно любому блоггеру и веб-мастеру, в том числе и новичку, можно с легкостью менять оформление в файле style.css. Для того, чтобы не пропустить данную статью, советую подписаться на обновления блога.
4. Все! Спойлер готов, и уже сейчас Вы можете использовать его! Для этого открываете нужный файл, или статью и в нужном месте вписываете следующий код:
1 2 3 | <div class="spoiler closed"> <div class="title"><div class="title_h3"><strong>Сюда пишите свой заголовок</strong></div></div> <div class="contents">Сюда пишите свой текст, который будет под спойлером</div></div> |
Ну как Вам?
На этом у меня все. Спасибо Вам огромное за внимание.
Желаю Вам удачи и до скорых встреч.
С уважением, Белан Константин!
автор блога https://seokos.ru
С уважением, Константин Белан.
Рубрика: Настройка блога
Обалденная штука, только осталось придумать, куда ее всунуть у себя 😀
C JS интересно смотрится. Нужно себе будет сделать и раскладной и что бы статический был. Статический у меня есть, а вот как сделать выдвижной не знал, спасибо 😉
Не за что 🙂 Дерзай!
Отличный пост. Очень познавательно ))
Кость, всё хотел спросить... Знаю, что ты сам всё делаешь на блоге, в плане вёрстки и дизайна, так вот интересно узнать, как ты учился? 🙂 Я как-то уже давно помню просмотрел два бесплатных курса Попова по Html и CSS, ну и так немного попрактиковался, ну то что в голове отлегло, то сейчас мне и пригодилось, но всё же я особо не углублялся и с нуля написать страницу не получится. Так вот подумываю, может подтянуть знания чуток. Это уж точно лишним не будет 😎
Круто, осталось собрать набор всяких дизайнов и примочек 🙂
Спойлер порой просто необходим на блоге, спасибо за советы.
Привет Костя!
Давненько не был у тебя на блоге, заметил что много чего изменилось в плане дизайна, молодец не стоишь на месте)
Кстати, в футере слева, невидно И из ИП, съехала запись влево на одну букву.
Да, статья, что надо, у себя тоже организую спойлер как-нибудь.
А есть же наверное спец плагины для этих дел?
О, норм так то... чуть подшаманю под себя и пригодится обязательно! Пасиб)))
Олег, напишешь потом статью о том что подшаманил и зачем. Я слежу за тобой 🙂
Не вопрос! Может даже полноценную статью напишу с примочками.
Спасибо, Костян! Как раз хотел сделать страницы «О блоге», «Об Авторе» и т. п. Не мог ничего придумать чтобы сделать страницы удобочитаемые. Теперь попробую поэксперементировать.
Не за что, Андрей! Рад что тебе это пригодилось 🙂
Еще как пригодилось. Спойлер отлично работает.
Костя, а как ты реализуешь закладки со спойлером?
Денис, не совсем понял вопрос...
Спасибо, Костя, очень ценная информация, давно хотела найти такой код. У тебя поменялся дизайн, очень красиво! Ты на заказ делал, или самостоятельно?
Я никогда не был сторонником плагинов. С момента когда я начал худо-бедно разбираться в кодах, тогда отказался почти от всех плагинов, что были на сайте. Поставлю твою статью в закладки, когда придумаю, что можно видоизменить с помощью спойлера, вернусь к прочтению. Спасибо за информацию!
В одной статье мне нужно было вставить такой спойлер, изучал твою статью и статью А.Борисова и делал все так как написано, но так и не смог получить такой красивый спойлер ...
Приветствую Константин. Все сделал, как в вашей статье, но почему-то спойлер оказался неактивным. То есть при нажатии ничего не происходит... Подскажите, как исправить.
Заранее, спасибо!
Привет. Видимо не подключился js, нужно пробовать! Хотя я не вижу смысла тебе ставить данный спойлер, так как у тебя они уже реализованы не менее красивее.
У меня такая же проблема, как решить не пойму? Руки не кривые 🙂
Интересное название «Спойлер». На всех блогах он просто необходим и улучшает вид статьи при его вставке
Константин, привет!
А если мне не нужен спойлер и скрытый текст, какой код тогда нужно вставлять.
Например, я хочу написать текст, чтобы он привлек внимание и слева была такая полоска и всё, цвет полоски я подстрою в CSS.
Пока у меня за это плагин отвечает (выделение фрагментов текста), я бы хотел его Delete 🙂
Привет, Николай.
Посмотри, может пригодится — http://seokos.ru/vedenie-bloga/moj-pervyj-plagin-wp-boxes-css-proshu-lyubit-i-zhalovat.html
Интересный подход к решению вопроса установки спойлера! Мне очень он понравился.
Пора уже облагородить некорорые страницы в своих блогах.
Сейчас надо подробненько разобрать всё по полочкам, чтобы не «наломать дров» с перепугу 😉
Займусья лучше этим ответственным делом завтра с утра.
привет спасибо класс коды работают я тоже ваш подписчик — скажите пжлст а во например у меня киноблог и как понимаете все серии записями делать на вордпресе это жесть, код путевого плейлиста не нашел пока ... вопроса два :
1 — как отнесутся поисковики если я например создам запись с плеером, кодом видео с вк и описанием, а под ним спойлер ваш, в котором еще 5 допустим плееров с коротким описанием ...
2 — можно ли ставить несколько спойлеров на страничке и опять же как на это смотрят поисковики .
у вас спер блог — как у вас сделано три вкладки под поиском подскажите плиз ... и иконки перед рубриками тож круто ............ пжлст ответьте на все вопросы если знаете про вкладки с иконками не забудьте . в долгу не останусь$
Спасибо, все просто и понятно. Сделал у себя на блоге все за пять минут.
привет подскажите пжлст как ширину уменьшить спойлера
Спасибо! Всё получилось, скоро планирую начать вставлять в статьи!
Привет, подскажи пожалуйста, — установил все по инструкции, но спойлер не открывается. Тоесть, отображается только заголовок спойлера, при наведении на него курсора он меняется (как будто идет наведение на ссылку), но если нажать на заголовок, то не происходит его раскрытие.
Куда можно крутить, где что подправить?
У меня была такая же проблема, посмотри на блоге у Борисова. Там подключение к кьюверти другое.
Виталий, что теперь у тебя уже нет этой проблемы?
Уже нет.
Виталий, я наверное что то провтыкал, за сентябрь Константин подведение итогов конкурса делал?
Не сделал 🙁 Скорее всего у него мало времени на всякие там конкурсы...
У же заканчивается за октябрь, а за сентябрь еще подведение итогов я не встречал Виталий
Спасибо за урок, давно уже искал реализацию спойлера без плагина.
Добавил статью в закладки: интересное решение. До этого, поскольку одноклассник просил найти про спойлер, нашёл со ссылкой, но не знаю, насколько он работоспособен: теперь, если что, можно будет скинуть этот вариант. Да и мне он будет полезен для вывода некоторых страниц.
Благодарю.
Использую Advanced Spoiler, в целом устраивает, но есть некоторое... затруднение. Словом, нужно, чтобы медиа под спойлером прогружалось только лишь тогда, когда спойлер разворачивается, никогда иначе. Сейчас трудностей не создает, но в будущем вполне может. Отсюда вопрос: способ здесь представленный поможет справиться с этой проблемой или нет? А если нет, то как можно справиться?
Справится, в доказательство смотрите раздел «Об авторе»
Добрый день! У меня спойлер на сайте появляется открытым. Как сделать чтобы он был закрытым, а раскрывался при нажатии?
Константин здравствуйте! Спасибо вам за ваш труд и помощь окружающим. Скажите пожалуйста как сделать чтобы по умолчанию спойлер был закрытым.
Спасибо!
Привет подскажите пжлст почему отображается спойлер но при нажатии не открывается, библиотеку подключал в футере но толку нет ... на другом моем блоге все работает а на этом не хочет — видимо шаблон что то
Иван, добрый день.
После выполнения всех указаний спойлер появился но в раскрытом виде.
То-есть при нажатии на заголовок он закрывает текст, а не наоборот.
Как решить этот момент?
Здравствуйте. Реализовал у себя спойлер. Спасибо. Очень нравится. Но на Google Chrome скрытая под спойлером информация по умолчанию открыта и внешний вид совсем не тот. На остальных браузерах и мобильной версии Chrome порядок. На мобильной версии Opera (Android) та же беда... Не подскажите можно ли как-нибудь подправить?? Заранее благодарен.
Отличный код спойлдера приведён. Взял его для своих проектов 🙂