Спойлер в WordPress с помощью плагина Advanced Spoiler

создать спойлер на Wordpress

Реферальные банеры

Всем привет! Иногда возникает необходимость скрыть часть текста, которая находится в статье и является вспомогательной. Для этой цели отлично подходит спойлер. Одним кликом по спойлеру скрытая информация откроется и любой желающий ее сможет прочесть.  В этой статье я расскажу о плагине, который поможет скрыть текст в спойлер в статье. Плагин Advanced Spoiler позволит легко добавить спойлер на WordPress блоге.

Если Вы не знаете что такое спойлер, посмотрите на картинку ниже:

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

Подобный спойлер Вы могли видеть на торрент трекерах.

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

Настройка Advanced Spoiler

Первым делом устанавливайте плагин Advanced Spoiler. Устанавливается он стандартно, как и все плагины. Заходи в раздел "Плагины" и добавляете в строку поиска название. По названию находите в списке результатов поиска нужным Вам и нажимаете на ссылку "установить". После успешной установки активируете.

Далее найдите плагин Advanced Spoiler в меню Параметры и сделайте несколько настроек. Укажите какая надпись будет показаться на закрытом и открытом спойлерах. По умолчанию там надписи "Show" и "Hide". Русифицируем их, вписав "Показать" и "Спрятать". Если хотите, можете поэкспериментировать с эффектами открытия спойлера.

настройки плагина Advanced Spoiler

Больше ничего настраивать не нужно. Сохраняете изменения.

Чтобы добавить спойлер в статью нужно на странице редактора записи выделить текст, который нужно спрятать и нажать на кнопку добавить спойлер:

добавляем спойлер в статью на wordpress

Вот что получилось после публикации статьи:Как сделать спойлер на WordPress с помощью плагина Advanced Spoiler

Плагину явно не хватает цветового оформления, как-то не выразительно он выглядит в тексте статьи.

Установка и настройка данного плагина не должна вызвать трудностей даже у новичка. Все интуитивно понятно. Как Вы могли заметить, что перевод у плагина кривоват, но это не помешает разобраться. Вот собственно и все. Устанавливайте и пользуйтесь на здоровье :)

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

Честно говоря, мне самой не нравился способ вывода спойлера с помощью плагина. Графическое оформление у него отсутствовало, а ссылка "Показать содержимое спойлера", была совсем не привлекательной. Когда я заказывала новый уникальный шаблон для своего блога, я попросила программиста красиво оформить спойлер и задать его вывод без использования каких-либо плагинов. И вот сейчас я хочу поделиться в Вами кодом вывода спойлера в статье.

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

Кликните, чтобы увидеть содержание спойлера
Поздравляю! Вы открыли спойлер :)

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

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

Последовательно работы:

  1. Откройте файлы header.php, footer.php и function.php и проверьте нет ли там кода подключения библиотеки jquery. Нажмите комбинацюи клавиш Ctrl + F и введите в строку поиска jquery.min.js. Если ничего не найдено ни в одном из файлов, тогда в файл header.php до строки </head> добавьте следующий код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  1. Теперь в файл footer.php до тэга добавьте вот этот код, который обеспечивает работоспособность спойлера:
<script type="text/javascript">  $(".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","rgb(253, 253, 253)");   else $(this).children(".title_h3").css("background","rgb(231, 242, 255)");  });  </script>
  1. Стили оформления спойлера прописываем в файле style.css. Вы можете на свое усмотрение поменять цветовую гамму.
.spoiler {   overflow: hidden;   margin-bottom: 20px;   margin-top: 20px;   border: 1px solid #FF9574; /* цвет рамки */   border-left: 2px solid #D02A1B; /* цвет границы слева */   box-shadow: 0 0 9px #dddddd inset;  }     .title_h3 {   cursor:pointer;   font-size: 14px;   background: rgb(231, 242, 255); /* фон заголовка. одновременно нужно изменять и в скрипте */   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: #CBEBFB; /* фон заголовка */}  .contents { padding: 10px; }

Вот неплохой сервис подбора цвета - ссылка.

На этом настройка спойлера завершена. Теперь в режиме "Текст" в админке блога, добавляйте вот этот код:

<div class="spoiler closed">  <div class="title"><div class="title_h3"><strong>Текст заголовка</strong></div></div>  <div class="contents">Текст, скрытый под спойлером</div></div>

Как Вам такая реализация вывода спойлера на любой странице блога? Сложно? Пишите свои отзывы в комментариях.

Понравилась статья? Поделиться с друзьями:
Как заработать деньги в интернете
Комментарии: 4
  1. Антон

    Спасибо за инструкцию. Быстро установил и настроил на своем сайте.

  2. Фидан

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

  3. marinavarvashenia

    Спасибо за статью, все понятно. Буду пробовать устанавливать плагин, а то очень понадобился спойлер)) Если найдете несложную инструкцию о том, как это сделать без плагина, то делитесь)) :smile:

  4. Андрей

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности. Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.