Лайки, посетители и подписчики на сайт!Подробнее

Спойлер на WordPress без плагинов

Всем здравствуйте! На днях произошло еще одно обновление 😉 на Блоге Свободного Вебмастера. Оно касается организации навигации по блогу. В частности была добавлена новая страница Содержание, перейти к которой можно из верхнего горизонтального меню. Содержание выполнено в виде раскрывающихся списков.

Спойлер на блоге вордпресс

Выполнена данная функция с помощью спойлеров. Наверняка у Вас возникло желание посоветовать мне воспользоваться плагином Dagon Design Sitemap Generator для организации карты блога. Сразу же говорю: данный вариант мной рассматривался, но от него пришлось отказаться по ряду технических причин. Пришлось искать другие варианты. И решил организовать данную функцию с помощью спойлеров. К тому же им можно найти и другое применение на блоге, вариантов масса. Итак, перехожу к технической части вопроса, о том как вставить спойлер на блог.

Как вставить спойлер на блог

На картинке сверху приведен скриншот спойлера, приведенного в качестве примера. Чтобы не быть голословным привожу рабочий пример спойлера на блоге вордпресс, который выполнен без использования плагинов:

Спойлер на WordPress

При нажатии на плюс значок плюс спойлер раскроется, а при нажатии на минус Значок минус свернется обратно. Что потребуется чтобы добавить такую возможность? На самом деле все очень просто. Чтобы было понятней опишу весь процесс по порядку.

Редактируем файл functions.php

С помощью файла functions.php добавляем новую функцию, которая будет отвечать за вывод спойлера, а также создаем shortcode.

Shortcode — это особый код WordPress, который построен на API, позволяющий использовать макросы в содержании поста. Одним словом, задается функция, реализация которой будет осуществляться небольшим кодом (тегом). Дословно shortcode можно перевести как короткий код.

Итак, вставляем в functions.php следующий код (автор скрипта):

1
2
3
4
5
6
7
8
9
function hyper_spoiler($atts, $content) {
	if (!isset($atts[name])) {$sp_name = 'Спойлер';}
	else {$sp_name = $atts[name];}
	return '<div class="spoiler-wrap">
		<div class="spoiler-head folded">'.$sp_name.'</div>
		<div class="spoiler-body">'.$content.'</div>
	</div>';
}
add_shortcode('spoiler', 'hyper_spoiler');

Подключаем javascript

Далее необходимо подключить скрипты. Всего их два. Один из них уже встроен в вордпресс, осталось его только задействовать. Скрипт подключает jQuery (библиотеку javascript). Для этого в заголовок нужно вставить код:

1
<script src="/wp-includes/js/jquery/jquery.js"></script>

Второй скрипт потребуется непосредственно для спойлера. Для этого нужно создать текстовый файл с расширением .js и вставить в него следующее содержимое:

1
2
3
4
5
6
jQuery(document).ready(function() {
jQuery('.spoiler-body').hide()
jQuery('.spoiler-head').click(function(){
jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle()
})
})

Сохранить файл, например с именем spoiler.js, и сохранить его на сервере. Подключать данный скрипт нужно также в заголовке, добавив следующий код:

1
<script src="/SCRIPT/spoiler.js"></script>

При этом измените путь к файлу на свой.

Настраиваем внешний вид спойлера

Теперь остается лишь настроить внешний вид спойлера. В файл стилей CSS добавить следующие строки (для примера я использовал свои параметры, которые можете изменить на свое усмотрение, подогнав под дизайн своего блога):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.spoiler-wrap {
	border: 1px solid #3b6d3d;
	background: #e9ffd0;
}
.spoiler-head {
	margin-left: 5px;
	padding: 5px 15px;
	font-size: 12px;
	line-height: 25px;
	cursor: pointer;
}
.folded {
	display: block;
	padding-left: 15px;
	background: url(images/plus.gif) no-repeat left center;
}
.unfolded {
	display: block;
	padding-left: 15px;
	background: url(images/minus.gif) no-repeat left center;
}
.spoiler-body {
	padding: 5px;
	border-top: 1px solid #3b6d3d;
	background: #f4fef3;
}

Ах да, чуть не забыл! В папку images своей темы необходимо загрузить файлы картинок (плюс и минус). Все исходники (код для файла functions.php, настройки CSS, javascript для подключения спойлера, а также картинки) можно скачать здесь в виде архива.

Код для вставки спойлера

Дело остается за малым — вставить спойлер. Воспользуемся коротким кодом (shortcode). Приведу два примера:

1
[spoiler] Скрытое содержимое [/spoiler]
1
[spoiler name="Название спойлера"] Скрытое содержимое [/spoiler]

В первом случае название спойлера вставляется по умолчанию. Название по умолчанию задается в функции, которую вставляли в файл functions.php и носит имя «Спойлер», которое можно заменить при желании.

Во втором случае к открывающему шорткоду (shortcode) добавляется тег name, который отвечает за название спойлера, если оно должно отличаться от принятого по умолчанию.

Вот таким образом можно вставить спойлер на WordPress, причем без использования плагинов. Я надеюсь кому нибудь пригодится 🙂 Я уже нашел применение, а Вы как думаете, найдется применение спойлерам на блоге?

Рубрика: Кодекс
  1. Арина

    И всё-таки, какой ты умный!!! Если разберусь, обязательно применю. Мне понравилось 😎 А ссылки на свои страницы ты потом сам прописываешь или он делает это автоматически?

    Ответить

  2. ahawks

    Полезный метод)) Я правда особо применения для спойлеров не вижу, в карте сайта конечно полезно, а вот где еще можно? На аниме блоге если в статье пару роликов, тогда ролики закрываю спойлером…

    Ответить

  3. Webliberty

    Арина, Вы меня вгоняете в краску 😳 Нет, ссылки прописываю сам, но это не сложно.

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

    Ответить

  4. BloggerMen

    А почему все-таки не воспользоваться стандартной картой сайта? Пользователю будет удобнее с ней работать, чем со спойлерами. Особенно, когда на количество страниц перевалит за несколько сотен.

    Ответить

  5. Webliberty

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

    Ответить

  6. Виктор

    А у меня такой вопрос. Содержимое спойлера индексируется поисковыми системами или нет?

    Ответить

  7. Евгений

    Карту сайта может другую попробовал бы? Так что то все выглядит громоздко и долго в исполнении. То что карта редиректит не туда, бывает. Перекачай плагин, переустанови. Попробуй на другом шаблоне. должно сработать. Хотя альтернативу ты уже нашел.

    Ответить

  8. Webliberty

    Евгений, спасибо попробую другую поискать. Переустанавливать пробовал — не помогает, а другой шаблон не рассматривается как вариант)

    Виктор, содержимое спойлера индексируется поисковыми системами.

    Ответить

  9. Кэп

    Жжешь, уж лучше плагин поставить, чем столько парится с кодом. Для новичка точно лучше плагином…

    Ответить

  10. Webliberty

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

    Ответить

  11. Серж

    Сделал всё, как вы описали, работает отлично, НО возникла проблема, спойлер открывается только в Opera, а в IE и Mozilla Firefox содержимое спойлера не открывается!!! Подскажите, как решить данную проблему.

    Ответить

  12. Webliberty

    Серж, проверял данный скрипт на всех браузерах, сейчас еще раз перепроверил, все работает. Проверьте еще раз порядок вставки спойлера, правильно ли прописали shortcode и все ли скрипты подключили. Кстати, спойлер который приведен у меня в качестве примера тоже не работает в IE?

    Посмотрел исходный код Вашей страницы. Скрипты нужно подключать в заголовке в файле header.php перед закрывающим тегом </head> у Вас же они вставлены ниже. Попробуйте изменить и отпишитесь о результатах.

    Ответить

  13. Nachtvolk

    Webliberty, плагины спойлеров не создают той нагрузки на сервер, о которой Вы говорите. Даже если логически подумать, зачем для показа/скрытия текста лезть в базу?? Незачем. Я сам смотрел код плагина wpSpoiler — в нём всего две(!) функции и 18(!) строк кода.

    Чистый код таких плагинов едва превышает 1кб. В Вашем же варианте необходимо подключать jQuery весом более 400кб!

    Вывод: есть смысл (но не рекомендация) использовать ваш спойлер jQuery только там, где и так используется jQuery. Это позволит использовать остальной функционал jQuery (а к ним, пожалуй, можно отнести только эффекты; тонкие настройки можно реализовать и отредактировав файл плагина). Обычный wpSpoiler и проще, и легче.

    Ответить

  14. Webliberty

    Nachtvolk, я просто не люблю плагины, а люблю изучать исходный код, а если удается что-то сделать и получается, например, тот же спойлер, то испытываю чувство удовлетворения)

    К тому же не обязательно подключать jQuery на всех страницах, можно только на тех, где требуется разместить спойлер на блоге. У меня на блоге в данный момент он используется только на этой странице, для наглядной демонстрации возможностей. И конечно же не ставлю перед собой целью навязать это решение, каждый выбирает свой вариант, я предложил один из альтернативных, например, на тот случай если плагин не будет работать (бывают такие случаи).

    Ответить

  15. DS

    Спасибо за статью. Подскажите, а как встроить спойлер в саму тему, например поместить форму комментариев и сами комментарии под спойлер?

    Ответить

  16. Webliberty

    DS, все возможно, заключите в теги спойлера участок кода в файле comments.php, отвечающий за вывод списка комментариев — должно сработать. Вот только зачем это нужно? Тогда вероятность оставления комментария заметно снизится — кто-то, быть может, не найдет где оставить сообщение…

    Ответить

  17. DS

    Webliberty, Спасибо, попробую так сделать. Чаще это действительно не нужно, но бывают исключения, например — в фотоблоге лишний текст на странице сильно отвлекает внимание от картинки. Хочу сделать блок инфо и комментарии в спойлере на уровне шаблона (как это реализовано на Pixelpost).

    Ответить

  18. Сергей

    Здравствуйте! Спасибо Вам Огромное за этот Весьма и Весьма Полезный пост! Поставил себе на сайт спойлеры по этому методу — все работает замечательно! С первого раза, без всяких трудностей. Слегка подправил стили, — и… Давно, в общем, мечтал о таком решении)

    Добрый совет Всем: Делайте по шагам, как описано в этом материале, — и будет Вам счастье! Автору сайта — еще раз спасибо, выручил в очередной раз))

    Ответить

  19. Анна

    Мне такое не по силам (пока) будет сделать, вот вывод похожих записей я сделал по вашей статье без плагинов, а тут очень мудрено, боюсь запутаюсь 😎

    Ответить

  20. Тарас

    Как ограничить максимальную ширину картинки ПОД спойлером? Ставил

    1
    
    .spoiler-body img {max-width:500px;}

    но не помогает, картинка без изменений все так же вылезает за край.

    Ответить

  21. Тарас

    Ура! сам сделал 🙂 Думаю это и в статье можно дописать. В CSS прописываем:

    1
    2
    3
    
    .spoiler-wrap .spoiler-body img {
    max-width:640px; /* максимально-допустимая ширина картинки */
    }

    Ответить

  22. Петр

    Спасибо огромное за полезную статью, но есть вопрос. А реально ли использовать спойлер в php коде. К примеру спрятать туда comments_template()? если да как прописать? Зарание благодарен.

    Ответить

  23. Alfring

    Спасибо за совет. Перепробовал три разных способа, описанных в Инете, ни один, даже плагин, нормально работать не хотел. А тут все сделал по инструкции (хотя вообще сам полный чайник в программировании) и получилось. Просто здорово!
    С уважением, Alfring

    Ответить

  24. Webliberty

    Петр, попытка — не пытка, конечно попробуйте, вместо текста спойлера вставьте кусок кода, отвечающего за вывод комментариев. Но учтите, что скрытие формы комментариев значительно снизит активность пользователей, а часть из них вообще ее не заметит!

    Ответить

  25. Юрий

    Странно, но я никаких спойлеров не вижу, EI, Opera, Firefox, Google Chrome самых последних версий вероятно их не поддерживают? На телефоне в опере стоят, а здесь как обычное, только вместо точек квадратики.

    Ответить

  26. Webliberty

    Юрий, все версии поддерживают, все работает 😉 У меня и дома и на работе установлены последние версии браузеров)

    Ответить

  27. Anri

    Спасибо. Штука нужная, работающая, после небольших изменений css красивая, и не тормозящая wp как плагины. И да, во всех браузерах траблов не обнаружено.

    Ответить

  28. юрий

    А в чем тогда дело? Не понимаю, я нигде в инете спойлеров не вижу, как с телефона перешел на ноут 3 месяца назад, забыл про их существование. У меня нетбук 10дюймов, может браузеры решают что на маленьком экране не увидишь квадратик с крестиком и раскрывают спойлеры? Другого объяснения я придумать не могу.

    Ответить

  29. Andrey

    На wordpress 3.4.2 не работает… 🙁 там правда jQuery новая версия, может дело в этом?

    Ответить

  30. Игорь

    Спасибо, давно искал подобное! Возникла небольшая проблемка, быть может сможете что-то посоветовать! При вставке картинок в спойлер они отображаются, а рядом отображаются кусочки кода этой картинки! Странно как-то.

    Ответить

  31. Webliberty

    Andrey, я всегда обновляю WP до новых версий и сейчас как раз 3.4.2 стоит — все работает, пример спойлера можете видеть сами на этой странице.

    Игорь, так быть может они лишние? Проверьте правильность вставки изображения.

    Ответить

  32. Владимир

    Спасибо за статью, очень помогла! Скажите, а как сделать, что бы спойлер, загружался открый? Первый, например, а остальные свернутые.

    Ответить

  33. Ktonablog

    А использование спойлера как-то отрицательно влияет в глазах поисковых систем?

    Ответить

  34. Webliberty

    Ktonablog, нет, наличие спойлера никак не влияет на ранжирование и отношение ПС к сайту.

    Ответить

  35. Владимир

    Webliberty, смотрел курсы по сео, от учебного центра «Специалист». Так они говорят что страницы со спойлерами и прочим скрытым материалом поисковики не очень любят. Но я все-равно использую спойлеры

    Ответить

  36. Webliberty

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

    Ответить

  37. Константин

    Отличной способ, спасибо автору! 😎

    Ответить

  38. Дмитрий

    Долго искал решение как сделать спойлеры, сначала использовал ваш метод, спасибо за него, потом наткнулся на идеальный для этого плагин, серьезно редко пишу комментарии но не могу не поделиться. Называется Shortcodes Ultimate. Там куча всего полезного и спойлеры и оформление блоков и т.д. бесплатного функционала вполне хватает для создания красивых статей, рад если кому-нить помог.

    Ответить

  39. artem

    А можно ли в такой спойлер прятать php-код? Или спойлер такой служит для того чтобы скрыть обычный текст?

    Ответить

  40. Webliberty

    Спрятать можно все что угодно — текст, видео, изображения. Код тоже наверняка можно скрыть, но для этого потребуется плагин WP-Syntax (или SyntaxHighlighter и аналоги), т.к. весь php-код, вставленный без подсветки, будет вырезан.

    Ответить

  41. Сергей

    Спасибо большое за столь полезную статью! Все просто и понятно, правда возник косячок небольшой, стили не отображались, но разобраться удалось 🙂

    Ответить

  42. Руслан Акбашев

    Очень понятно и красочно всё расписано. Тоже понадобился спойлер на блог, чтобы можно было спрятать скриншоты, в итоге нарвался на ваш блог. Также хочу теперь поставить смайлики. Спасибо

    Ответить

  43. Алексей

    Супер! Со знаниями css и html, этот скрипт превращается в бомбезную вещь!)))

    Ответить

  44. Елена

    Спасибо большое за код, наверное воспользуюсь! Давно искала такое подробное описание!

    Ответить

Ваш комментарий:

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea: