Как сделать спойлер для сайта (блога)

0
12236

Привет, всем? Если вы на этой странице, значит вы пришли узнать как сделать спойлер для сайта (блога)?

Сначала немного, что это такое- «Spoiler» для вашего сайта.

Это конструкция, которая скрывает текст, код, картинку, видео и все что нужно спрятать. При нажатии на него открывается, спрятанный длинный текст.

Что нужно для этого:

  • подключить библиотеку jQuery к сайту
  • разместить код скрипта в подвале(footer.php)
  • установить еще один код в стили в файл style.css
  • иметь под рукой код вставки спойлера в статью

Вот пожалуй и все.

Теперь давайте пройдемся конкретно по каждому пункту в отдельности.

Подключаем библиотеку.

Для этого идем и проверяем, такие файлы: header.php, function.php, index.php, footer.php на наличие кода.

Как проверить?

Заходите в консоль и выбираете «внешний вид»- «редактор». Появляется куча файлов( с левой стороны). Выбираете искомые и открываете.

Затем в файле набираете комбинацию клавиш «CTRL+F» — откроется поиск. Вбейте словосочетание: «jquery.min.js»

Если тут есть такое слово, тогда оно «подсветится», если нет, проверяете дальше.

Если script такой есть, второй раз не прописывайте. Значит у вас уже все подключено.

Еще очень важное предупреждение.

Прежде чем вставлять коды, делайте всегда резервные копии файлов.

Обычно библиотека подключается в «футере» сайта — footer.php.

Чтобы подключить необходимо вставить скрипт перед закрывающим тегом <body></body>

Вот этот код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

И еще один в тоже место.

<script>// <![CDATA[
// < ![CDATA[ $(".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","#bbbbbb");  else $(this).children(".title_h3").css("background","#dddddd"); });
// ]]></script>
 

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

.spoiler {
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 20px;
    border: 1px solid #dfdfdf;
    border-left: 2px solid #a32503;
    box-shadow: 0 0 9px #dddddd inset;
}
.title_h3 {
    cursor:pointer;
    font-size: 14px;
    background: #dddddd;
    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; }

Двигаемся к финишу.

Этот код скопируйте и вставьте в блокнот. Он должен быть всегда наготове.

<div class="spoiler closed">

<div class="title">

<div class="title_h3"><strong>Здесь заголовок спойлера</strong></div>

</div>
<div>А вот здесь будет текст, видео картинки и все остальное</div>
</div>

Его будете вставлять, всегда, когда понадобится спрятать текст под спойлер.

И запомните, код вставляете в статью в режиме text.

Давайте отредактируем вид нашего спойлера. Для этого откроем опять файл style.css

border: 1px solid #a32503; — это цвет рамки

border-left: 2px solid #a32503; — цвет левой вертикальной линии, а 2px толщина, можете сделать 3px, будет жирнее и так далее.

box-shadow: 0 0 9px #a32503 inset; — это цвет внутреннего свечения рамки

font-size: 14px; — размер шрифта

background: #dddddd; — цвет фона

Вызовите палитру цветов и поставьте другое значение. И вид вашего спойлера изменится.

Предлагаю посмотреть видео, чтобы было все понятно.

Пользуйтесь spoiler и ваша статья покажется читателям более профессиональной и грамотной. От этого вы только выиграете в глазах своих читателей. С удовольствием отвечу на ваши вопросы.Podpis

 

C уважением, Рита Молчанова, автор блога ritabk.ru

 

Плагин WP Spoiler для блога

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

Установка и настройка плагина WPSpoiler

  1. Для начала устанавливаем дополнение по средствам админ – панели. Переходим в раздел «Плагины» и кликаем по кнопке «Добавить новый»;
  2. Далее в строке поиска набираем название: WPSpoiler
    Стоит учитывать регистр букв, так как это гарантирует вывод требуемого плагина в первой позиции результатов поиска!
    Жмём соответствующую кнопку для начала поиска (или клавишу «Enter»);
  3. Под первым вариантом кликаем по ссылке установить и соглашаемся с установкой плагина. Ждём окончания инсталляции файлов дополнения и возвращаемся в раздел «Плагины»;

WPSpoiler не имеет настроек, а для применения его функции при редактировании публикации нужно применить специальные теги –

По умолчанию плагин для скрытия использует слова:

  • View– показать / обзор
  • Hide– скрыть / убрать


Для того чтобы изменить английские теги на русские слова, находим в разделе «Плагины» установленный плагин и кликаем ссылку «Изменить». Переходим к редактированию файла дополнения.
В коде находим слова «Wiew/Hide» и изменяем их на свои, на пример, «Обзор» и «Скрыть».


Жмём «Сохранить», и можем перейти к применению «Добавить запись». Работу плагина Вы можете увидеть внизу страницы. 

 

Для реализации спойлеров на движке WordPress написан замечательный плагин: Advanced Spoiler – он простой, удобный и красивый. Кроме того можно самому дописать стили для него, поэтому вписавать спойлеры в дизайн статей блога не составит никакого труда.

  1. Скачиваем плагин Advanced Spoiler – кликаем по кнопке Download Version x.xx (на данный момент у меня версия 2.02);
  2. Устанавливаем его на блог и активируем;
  3. Проводим минимум настроек: 1. Настройки -> Advanced Spoiler; 2. Вводим “Показать” (слово для раскрытия спойлера); 3. Вводим “Скрыть” (слово для закрытия спойлера).

Спойлер для Worpress при помощи плагина

  1. Добавляем спойлер в пост. Для этого вводим текст (или добавляем картинку если хотите спрятать ее) для содержания спойлера, выделяем его и нажимаем на появившуюся кнопку “включить интерцептор“:

Делаем спойлер для сайта

Выбираем эффект появления и текст при закрытом/открытом спойлере:

Настройка спойлера

На этом вопрос редактирования настроек и применения спойлеров на wordpress при помощи плагина Advanced Spoiler можно закрыть. Но меня немного не удовлетворил результат работы плагина, а именно не совсем непонятно где кончается спойлер и продолжается статья, поэтому я посмотрел какой блок отвечает за стили внутреннего содержания спойлера и дописал их.

Для этого нужно открыть файл стилей style.css (Дизайн -> Редактор) и дописать в самом конце необходимые стили:

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

дополнительные стили для спойлера

Спойлер для сайта без плагинов.

Конечно владельцам сайтов на движке WordPress можно ограничится и плагином, но мне захотелось создать свой спойлер, с уникальными стилями и выводом. Да и не у всех же сайты на WP, поэтому эта статья должна им помочь в реализации таких вставок.

Что бы добавить спойлер в нужное место скопируйте вот этот код:

<div class="spoil">
<br>
 <div
class="smallfont"><input type="button" value="Название спойлера" class="input-button"
onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'Свернуть'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Развернуть';
}"/>
</div>
<div class="alt2">
       <div style="display: none;">

Содержание спойлера
</div>
</div>
<br>
</div>

Замените два участка этого кода, на то что требуется:

  1. Название спойлера;
  2. Содержание спойлера.

Название спойлера выполнено в виде кнопки (type=”button”) с классом: class=”input-button”.

Поэтому для придания своих черт этой кнопке открываем файл стилей (в WP – это style.css) и дописываем то, что хочется:

.input-button {
наши стили
}

Решение возможных проблем со спойлерами.

Я не уверен подключает ли плагин сам библиотеку jquery и будет ли работать спойлер прописанный вручную без нее. Поэтому добавляем данную библиотеку самостоятельно. Чтобы подключить библиотеку jquery необходимо в файл function.php сразу после <?php добавить следующие строки:

// smart jquery inclusion подключаем библиотеку jquery для wordpress
if (!is_admin()) {
 wp_deregister_script('jquery');
 wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
 wp_enqueue_script('jquery');
}

Вообще она должна быть подключена на каждом сайте, ведь с ее помощью реализуются многие “фишки”. К примеру:

  • Эффект прокручивания страницы для кнопки “Наверх” (правый нижний угол сайта).
  • Переключение табов без плагина.

Вы наверно знаете, что html спойлер — это удобная кликабельная кнопка после нажатия на которую выдвигается спрятанная часть. Применять спойлеры очень полезно, как минимум в плане эстетики, когда куча информации раскидана по странице — согласитесь, это не очень красиво и удобно. Я предлагаю вашему вниманию совершенно простой код спойлера для вашего сайта на HTML  Кстати, если вас не устраивает минималистический вид голого HTML-ного спойлера, можно подключить и CSS, я его напишу, сморите ниже.

Собственно вопрос: А зачем вообще нужен спойлер? Лично у меня необходимость в нем появилась после того, как я начал часто выкладывать живое видео и делать текстовые версии этих видео. 

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

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

 

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here