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

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

Спойлер на ВордПресс

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

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

Метод подойдёт тем, кто не любит устанавливать огромное количество плагинов под каждую фичу. Ниже я подробно расскажу как сделать спойлер на WordPress и затем его вывести на странице с помощью шорткода.

Shortcode — это простой набор функций WordPress, который использует собственное API и позволяет создавать код, используемый на страницах записей и даже в виджетах.

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

Подключение скриптов и стилей

Для начала отредактируем functions.php, добавляя новую функцию, которая будет отвечать за вывод спойлера, а также регистрацию шорткода spoiler. Итак, вставляем в файл functions.php следующий код:

function simple_spoiler_shortcode($atts, $content) {
	if ( ! isset($atts['title']) ) {
		$sp_name = 'Спойлер';
	} else {
		$sp_name = $atts['title'];
	}
	return '<div class="spoiler-wrap">
			<div class="spoiler-head folded">'.$sp_name.'</div>
			<div class="spoiler-body">'.$content.'</div>
		</div>';
}
add_shortcode( 'spoiler', 'simple_spoiler_shortcode' );

При нажатии на плюс спойлер раскроется, а при нажатии на минус свернётся обратно — для этого требуется наличие jQuery. Проверьте, подключена ли у вас эта библиотека. Если да, то можете пропустить следующий шаг, а если не подключена, тогда в файл functions.php добавьте код:

function my_jquery() {
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery' );

Теперь jQuery подключён и можно переходить к следующему шагу. Создаём текстовый файл с расширением .js и вставляем в него следующее содержимое:

jQuery(document).ready(function() {
	jQuery('.spoiler-body').hide();
	jQuery('.spoiler-head').click(function() {
		jQuery(this).toggleClass('folded').toggleClass('unfolded').next().toggle();
	});
});

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

Давайте подключим скрипт spoiler.js на нашем блоге, разместив в секции <head> файла header.php, добавив строку:

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

Обратите внимание, в этой строке вам нужно изменить путь к файлу spoiler.js на свой, в зависимости от того, куда его загрузили на своём сервере!

Теперь остается лишь настроить внешний вид нашего спойлера. Для этого в файл style.css текущей темы WordPress требуется добавить следующие строки:

.spoiler-wrap {
	border: 1px solid #3b6d3d;
	background: #e9ffd0;
}
.spoiler-head {
	padding: 10px;
	line-height: 1.5;
	cursor: pointer;
}
.folded:before {
	content: "+";
	margin-right: 5px;
}
.unfolded:before {
	content: "–";
	margin-right: 5px;
}
.spoiler-body {
	padding: 10px;
	border-top: 1px solid #3b6d3d;
	background: #f4fef3;
}

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

Посмотреть демо
Скачать архив

Вывод спойлера на странице

Как я уже говорил, выводить спойлер на странице будем с помощью шорткода spoiler. Есть два варианта его использования, приведу наглядные примеры:

В первом варианте спойлер будет иметь заголовок, назначенный по умолчанию — Спойлер, который задаётся при регистрации функции simple_spoiler_shortcode в переменной $sp_name:

[spoiler] Скрытое содержимое [/spoiler]

Во втором варианте спойлеру можно задать любой заголовок с помощью атрибута title, если он должен отличаться от заданного по умолчанию:

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

Таким вот образом можно вставить спойлер без использования плагинов на WordPress. Удачи!

Друзья, если инструкция показалась вам слишком сложной в реализации на практике, то попробуйте установить мой плагин Simple Spoiler для WordPress.

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(9 голосов, в среднем: 5 из 5)
  1. Арина
    в 20:58

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

    Ответить

  2. Ahawks
    в 23:18

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

    Ответить

  3. Webliberty
    в 08:02

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

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

    Ответить

  4. BloggerMen
    в 20:04

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

    Ответить

  5. Webliberty
    в 20:10

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

    Ответить

  6. Евгений
    в 23:00

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

    Ответить

  7. Виктор
    в 23:24

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

    Ответить

  8. Webliberty
    в 06:56

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

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

    Ответить

  9. Кэп
    в 02:13

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

    Ответить

  10. Webliberty
    в 10:55

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

    Ответить

  11. Серж
    в 23:22

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

    Ответить

  12. Webliberty
    в 07:15

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

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

    Ответить

  13. Nachtvolk
    в 16:16

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

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

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

    Ответить

  14. Webliberty
    в 10:27

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

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

    Ответить

  15. DS
    в 10:32

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

    Ответить

  16. Webliberty
    в 08:13

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

    Ответить

  17. DS
    в 12:44

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

    Ответить

  18. Сергей
    в 20:20

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

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

    Ответить

  19. Анна
    в 10:06

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

    Ответить

  20. Тарас
    в 01:24

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

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

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

    Ответить

  21. Тарас
    в 01:27

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

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

    Ответить

  22. Петр
    в 02:10

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

    Ответить

  23. Alfring
    в 11:13

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

    Ответить

  24. Webliberty
    в 15:07

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

    Ответить

  25. Юрий
    в 00:26

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

    Ответить

  26. Webliberty
    в 13:30

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

    Ответить

  27. Anri
    в 17:41

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

    Ответить

  28. юрий
    в 02:21

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

    Ответить

  29. Andrey
    в 19:44

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

    Ответить

  30. Игорь
    в 22:54

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

    Ответить

  31. Webliberty
    в 19:50

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

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

    Ответить

  32. Владимир
    в 03:15

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

    Ответить

  33. Ktonablog
    в 12:48

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

    Ответить

  34. Webliberty
    в 19:12

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

    Ответить

  35. Владимир
    в 20:25

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

    Ответить

  36. Webliberty
    в 20:34

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

    Ответить

  37. Константин
    в 08:29

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

    Ответить

  38. Дмитрий
    в 04:00

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

    Ответить

  39. artem
    в 22:19

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

    Ответить

  40. Webliberty
    в 15:41

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

    Ответить

  41. Сергей
    в 23:06

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

    Ответить

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

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

    Ответить

  43. Алексей
    в 12:16

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

    Ответить

  44. Елена
    в 11:26

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

    Ответить

  45. Игорь
    в 23:05

    Скажите пожалуйста, у меня не выводятся значки плюсика и минуса, вместо них — слово «спойлер» (но все работает). Проверял ссылки к файлам значков — все нормально. Что я сделал не так?

    Ответить

  46. Webliberty
    в 11:05

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

    Ответить

  47. Валерия
    в 17:11

    Обязательно использую такой код у себя на сайте. Вещь очень полезная и повышает удобство для пользователей. Спасибо!

    Ответить

  48. Евгений
    в 07:51

    Большое спасибо! Всё получилось с первого раза 🙂

    Ответить

  49. Кирилл
    в 19:06

    Вставил код и всё заработало. Спасибо за классный код спойлера 😀

    Ответить

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

Отправляя комментарий, вы соглашаетесь с политикой конфиденциальности.