doverennost uvolnenie harakteristika rezyume raznoe otzyv prikaz akt zayavlenie jaloba polojenie soglashenie isk pretenziya dokument postanovlenie pismo

Как сделать спойлер в wordpress

7 Декабрь 2011

Однажды мне понадобилось сделать вот такую вещь:

Другими словами вставить в пост текст, что бы при щелчке на него, открывался большой кусок спрятанного текста. В принципе можно прятать не только текст, но и фото или видео. Самое интересное, что я даже не знал как это называется ) Пошел допытывать поисковик. Теперь я не удивляюсь откуда в сети столько идиотских вопросов, элемент рано бывает ситуация когда толком не понимаешь как называется вещь которую нужно найти. Хоть бери в поисковую строку вбивай: хрень которая сворачивает и разворачивает текст wordpress. В общем после некоторых словесных манипуляций я выяснял, что большая часть адекватных пользователей называет это спойлер. Придется с ними согласиться.

Собственно переходим ко второй части вопроса, как сделать спойлер в wordpress. На самом деле, способов хоть одним местом кушай. Естественно самый простой способ это плагин. Речь идет о wpSpoiler. Думаю не нужно описывать, как искать и устанавливать плагины. Единственное, что нужно будет сделать это заглянуть в сам php файл плагина и подправить там несколько строчек.

function wpSpoiler($text) {</span>
<pre>
/* Config */
$showtext = ‘show’;
$hidetext = ‘hide’;

Т.е перевести слова show и hide на нужные нам, например – откройся и закройся. Для того что бы вставить в пост спойлер нужно добавить код [spoiler]тут текст который прячем[/spoiler]

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

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

Нашел два варианта.

1. Вариант.

<script><!–
function Sim_Sim_Otkroysya()
{
var obj=document.getElementById(‘Sim_Sim’);
if(obj.style.display==’none’)
obj.style.display=’block’;
else
obj.style.display=’none’;
}
–></script>
<DIV><A href=’javascript: Sim_Sim_Otkroysya()’>Текст для щелкания</A></DIV>
<DIV Name=Sim_Sim ID=Sim_Sim Style=’text-indent:15pt;Display:none’>Текст, который не виден</DIV>

2. Вариант.

<script language=”JavaScript”>
function hide(obj) {
if(document.getElementById(obj).style.display == ‘block’)
{document.getElementById(obj).style.display = ‘none’;
}
else
{document.getElementById(obj).style.display = ‘block’;
}
}
</script>

<a href=”#” onclick=”hide(‘sub1′)”>Спойлер</a><br>

<span id=”sub1″ style=”display: none;”>
Содержимое спойлера
</span>

Пробовал оба варианта, работают. Надеюсь кому-то да и пригодится.