WelcomePartners

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

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

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
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 добавьте код:

1
2
3
4
function my_jquery() {
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery' );

Теперь jQuery подключен и можно переходить к следующему шагу. Создаем текстовый файл с расширением .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, и загрузите его на свой сервер. Скрипт взаимодействует с jQuery и добавляет возможность раскрытия и скрытия спойлера.

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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:

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

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

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

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

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

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

  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. Елена

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

    Ответить

  45. Игорь

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

    Ответить

  46. Webliberty

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

    Ответить

  47. Валерия

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

    Ответить

  48. Евгений К.

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

    Ответить

  49. Кирилл

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

    Ответить

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

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