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

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

Сначала немного, что это такое-  "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

  • Олег

    😀 Спасибо, Рита!!! Надо будет у себя что-нибудь подобное соорудить

    [Ответить]

    Рита Молчанова Reply:

    Давай, сооружай. Я у тебя тоже всякие полезности смотрю. И внедряю.Вот так друг другу и помогаем.

    [Ответить]

  • Алла

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

    [Ответить]

  • Алексей Щукин

    Рита, а без помощи друг другу не получается. Где-то ты поможешь, где-то — тебе.

    Так и живут блоги и блоггеры. 🙂 И это очень приятно, что есть еще люди, которые хотят помогать.

    [Ответить]

  • Ольга

    Рита, классный спойлер. Обязательно применю у себя на страницах блога. 😉

    [Ответить]

  • Попробуйте. Я пользуюсь этим методом.

    [Ответить]

  • Anna

    Рита, спасибо, что рассказала об этой новинке...Но я пока не вижу особого смысла это делать...Когда я вставляю в запись «специальный текст», то там есть такая функция, «свернуть или развернуть данный выделенный текст»...Он автоматически вставляется сам...У меня в старых статьях это есть...Другими словами, не надо париться, можно обойтись проще...С уважением, Анна.

    [Ответить]

    Рита Молчанова Reply:

    Анна, как раз это не есть новинка. Используется он уже давно. Сейчас версии wordpress постоянно усовершенствуются. И я довольна, что такая функция появилась. У меня на сайте много статей и всяких штучек. Многие уже выходят из «моды», если так выразиться. Пользователь для себя сам выбирает, пользоваться ему такой функцией или нет. Это для информации по большому счету.

    [Ответить]

Остались вопросы? Напишите на E-mail: rita.mol4anova@yandex.ru или позвоните Skype: margo19596