Как сделать спойлеры в wordpress
Спойлер в WordPress с помощью плагина Advanced Spoiler
Всем привет! Иногда возникает необходимость скрыть часть текста, которая находится в статье и является вспомогательной. Для этой цели отлично подходит спойлер. Одним кликом по спойлеру скрытая информация откроется и любой желающий ее сможет прочесть. В этой статье я расскажу о плагине, который поможет скрыть текст в спойлер в статье. Плагин Advanced Spoiler позволит легко добавить спойлер на WordPress блоге.
Если Вы не знаете что такое спойлер, посмотрите на картинку ниже:
Подобный спойлер Вы могли видеть на торрент трекерах.
Найти несложную инструкцию по добавлению спойлера без плагина мне пока не удалось, поэтому я расскажу как это легко можно реализовать данную возможность с плагином Advanced Spoiler.
Настройка Advanced Spoiler
Первым делом устанавливайте плагин Advanced Spoiler. Устанавливается он стандартно, как и все плагины. Заходи в раздел «Плагины» и добавляете в строку поиска название. По названию находите в списке результатов поиска нужным Вам и нажимаете на ссылку «установить». После успешной установки активируете.
Далее найдите плагин Advanced Spoiler в меню Параметры и сделайте несколько настроек. Укажите какая надпись будет показаться на закрытом и открытом спойлерах. По умолчанию там надписи «Show» и «Hide». Русифицируем их, вписав «Показать» и «Спрятать». Если хотите, можете поэкспериментировать с эффектами открытия спойлера.
Больше ничего настраивать не нужно. Сохраняете изменения.
Чтобы добавить спойлер в статью нужно на странице редактора записи выделить текст, который нужно спрятать и нажать на кнопку добавить спойлер:
Вот что получилось после публикации статьи:
Плагину явно не хватает цветового оформления, как-то не выразительно он выглядит в тексте статьи.
Установка и настройка данного плагина не должна вызвать трудностей даже у новичка. Все интуитивно понятно. Как Вы могли заметить, что перевод у плагина кривоват, но это не помешает разобраться. Вот собственно и все. Устанавливайте и пользуйтесь на здоровье 🙂
Красивый спойлер для WordPress сайта без плагинов
Честно говоря, мне самой не нравился способ вывода спойлера с помощью плагина. Графическое оформление у него отсутствовало, а ссылка «Показать содержимое спойлера», была совсем не привлекательной. Когда я заказывала новый уникальный шаблон для своего блога, я попросила программиста красиво оформить спойлер и задать его вывод без использования каких-либо плагинов. И вот сейчас я хочу поделиться в Вами кодом вывода спойлера в статье.
Для новичков я хочу пояснить, что такое спойлер на сайте и для чего он нужен. Спойлер представляет собой блок, внутри которого спрятан текст или другое содержание. Спойлер содержит заголовок, кликнув по которому открывается, спрятанное ранее содержание, вот наглядный пример работы спойлера не моем блоге:
Для более легкого восприятия информации на странице, особенно там, где ее много и должна быть структурирована удобно использовать спойлер.
Поскольку мы будем настраивать вывод спойлера на сайте без плагина, то Вам придется редактировать файлы темы WordPress блога. Сохраните резервную копию файлов перед редактированием.
На этом настройка спойлера завершена. Теперь в режиме «Текст» в админке блога, добавляйте вот этот код:
Как Вам такая реализация вывода спойлера на любой странице блога? Сложно? Пишите свои отзывы в комментариях.
WordPress — самый простой спойлер без шорткодов
Задача: настроить спойлер для движка WordPress с минимальным вмешательством в код и удобным для редактора Gutenberg.
Без шорткодов, ибо они портят всю идеологию редактора текста и без HTML обертки, которую нужно создавать в существующих вариациях.
Решение: получилось реализовать продвинутый спойлер, в котором нужно прописать всего два CSS класса в меню «дополнительно» для блока редактора Gutenberg.
WordPress спойлер раскрыт
WordPress Spoiler в редакторе Gutenberg
Если вы еще не поняли всех преимуществ данного редактора, крайне рекомендую оформить в нем хотя бы 10 статей. За это время все странности и неудобства пройдут и откроется простота и легкость работы с текстом по отношению к стандартному редактору.
WordPress Spoiler в редакторе Gutenberg
Выше показана стандартная визуальная разметка текста в редакторе Gutenberg. По умолчанию каждая новая строка оборачивается абзацем P. Каждый абзац можно редактировать на HTML индивидуально. Предусмотрен интерфейс для указания CSS класса без использования HTML. Ниже пример:
HTML разметка для спойлера
Данные классы имеют display: none; и не будут отображаться на странице. Дабы блоки не удалялись, прописать им любой текст (на скриншоте просто spoiler).
Предусмотрено автоматическое создание заголовка спойлера, текст для котрого будет подставляться по умолчанию. Если нужен индивидуальный текст, он создается также, как и блоки, окружающие спойлер.
Подробнее о коде
HTML разметка спойлера
Итоговый код спойлера должен строго соответствовать иерархии т.к. он перебирается на jQuery и не будет работать, если что-то будет не на своих местах. Иерархия очень проста.
Пояснение
CSS стилизация
Ниже обязательные стили, остальное по желанию
jQuery
Хотел сделать простой и маленький скрипт, а получился полноценный плагин. В коде почти 100 строк и его лучше подключать отдельным файлом. Расписывать, как это сделать не буду т.к. в сети полно информации на тему, «как подключить свой скрипт в WordPress».
Спойлер WordPress — что это для чего нужен и как его создать?
Спойлер WordPress удобный инструмент — плагин Advanced Spoiler
Здравствуйте, уважаемые друзья и гости блога! Сегодняшний материал не будет длинным и утомительным, за то он будет информативным и полезным для Вас — блоггеров работающих с движком WordPress. Это потому, что я Вам сейчас расскажу об одном очень практичном, легком и удивительно полезном плагине, который создает спойлер WordpRess.
Для чего нужен сполейр WordPress и что вообще такое спойлер?
Спойлер — это специальный инструмент, который позволит вам на своем ресурсе скрыть некий кусок текста, картинки или и того и другого вместе, а по нажатию на кнопку раскрыть его. Это довольно удобная вещь, когда страницы сайта имеют очень много информации и на них как раз будет уместным расположение данного спойлера.
В интернете существует очень много материалов по созданию спойлера WordPress — это разнообразные плагины и скрипты. Но я ввам сегодня расскажу только об одном плагине для создания спойлера в WordPress. Это плагин, который очень легок в установке, настройке и его использовании, а еще он не будет тормозить ваш движок Вордпресс. Вот этот плагин — Спойлер WordPress …
Плагин для создания спойлера WordPress — Advanced Spoiler
Для того, чтобы использовать плагин Advanced Spoiler и создать спойлер — нужно его вначале скачать с официального сайта WordPress. Или Вы просто сможете установить его из своей админки, как и все остальные плагины. Выбор за вами!
После установки и активации плагина Advanced Spoiler им уже можно пользоваться, но есть некоторые нюансы …
Чтобы ваш созданный спойлер WordPress адекватно отображался на вашем сайте, нужно сделать несколько действий:
Исправьте английские названия на русские, как на скриншоте и ваш спойлер будет отображаться в ваших записях корректно и понятно для всех.
Все, теперь можно создавать свои спойлеры в записях и страницах сайта. Как это делается Вы сможете узнать, если посмотрите небольшое видео или сами разберетесь. Ни чего сложного в этом нет.
Вот видео, которое вам поможет быстро понять, как создать свой первый спойлер WordPress:
Мой спойлер, который Вы сейчас видите сделан немного по другому, не с помощью плагина Advanced Spoiler, а вообще без плагина. Как это реализовано, Вы можете узнать вот здесь, я уже писал в своей статье о том, как создать спойлер в WordPress без применения плагинов.
На этом позвольте закончить. Всем удачи! До новых встреч!
Как сделать спойлеры в wordpress
При наполнении сайта контентом особую роль отводят его качеству – это и понятно, ведь именно качественные статьи представляют ценность как для посетителей, так и для поисковых систем. Но если уделять внимание только этому, то велика вероятность, что статью никто не оценит! Как такое может быть?
Представьте, что на сайте публикуется очень длинная статья, как их еще любят называть в интернете – портянка. В ней нет ничего кроме текста: ни картинок, ни заголовков, ни выделений и т.д. Даже если это именно то, что Вам нужно, наверняка статья не будет прочитана до конца.
Теперь представьте такую же статью, только с соблюдением должного оформления:
Вопрос скрытия/открытия контента довольно актуальный. Мы уже рассматривали как в одном и том же месте, на том же пространстве страницы сайта, можно вывести куда больше материала, чем это кажется на первый взгляд: статья про табы (своеобразные вкладки для вывода различной информации в одном и том же месте). В этой же статье речь пойдет о спойлерах для сайта wordpress.
Чтобы не вдаваться в определение спойлера сразу приведу пример:
Текст спойлера. Открывается/закрывается при клике.
Данный вид спойлера реализован при помощи плагина для wordpress, который будет рассмотрен ниже. Но прежде чем это сделать хочу показать Вам еще один вид спойлера: его можно наблюдать в нижней части шапки на этом блоге:
Кликните по нему и Вы увидите содержание данного спойлера. Он реализован без плагинов, этот вариант мы так же рассмотрим ниже.
Для чего нужны спойлеры на сайте?
Пара примеров применения спойлеров:
Поисковые системы без проблем индексируют содержание спойлеров, так что за это переживать ни в коем случае не нужно.
Спойлер на WordPress – как сделать с помощью плагина.
Для реализации спойлеров на движке WordPress написан замечательный плагин: Advanced Spoiler – он простой, удобный и красивый. Кроме того можно самому дописать стили для него, поэтому вписавать спойлеры в дизайн статей блога не составит никакого труда.
Выбираем эффект появления и текст при закрытом/открытом спойлере:
На этом вопрос редактирования настроек и применения спойлеров на wordpress при помощи плагина Advanced Spoiler можно закрыть. Но меня немного не удовлетворил результат работы плагина, а именно не совсем непонятно где кончается спойлер и продолжается статья, поэтому я посмотрел какой блок отвечает за стили внутреннего содержания спойлера и дописал их.
Я например для себя написал следующее:
Спойлер для сайта без плагинов.
Конечно владельцам сайтов на движке WordPress можно ограничится и плагином, но мне захотелось создать свой спойлер, с уникальными стилями и выводом. Да и не у всех же сайты на WP, поэтому эта статья должна им помочь в реализации таких вставок.
Что бы добавить спойлер в нужное место скопируйте вот этот код:
Замените два участка этого кода, на то что требуется:
Название спойлера выполнено в виде кнопки ( type=”button” ) с классом: class=”input-button”.
Как создать спойлер «выпадающую запись» на блог wordpress без плагина?
Делаем спойлер без плагина на сайт!
Здравствуйте уважаемые читатели моего блога pribylwm.ru! Рад Вас видеть на ресурсе «Блог Валерия Бородина»! Сегодня хочу Вам рассказать, как можно не используя плагин в WordPress на своем сайте или блоге, без лишних усилий и не нагружая базу данных WordPress, что для ускорения загрузки блога очень важно, создать очень даже привлекательный и аккуратный спойлер или по другому «выпадающую запись». Вот пример, как будет выглядеть Ваш сделанный спойлер:
До нажатия:
Пример спойлер
И так приступим к созданию спойлера…
Вот рабочий пример нашего спойлера:
Вы наверное спросите меня… Ну а зачем и для чего собственно он этот спойлер нужен на моем блоге или сайте? Все очень просто! Например Вы ведете свой блог и пишите, пишите и еще и еще. А где располагается вся Ваша информация, на странице в которой уже не хватает места, а Вы и половины не выложили всей нужной информации! А как все это выглядит? Да как сплошная стена, испещренная буквами и всевозможными знаками препинания! Вот здесь и спасает наш спойлер. Вы всю важную информацию пишите заголовком, который очень прекрасно индексируется поисковыми системами, а менее важную укладываете в «выпадающую запись», т. е. спойлер. Прекрасно! И смотрится привлекательно, и для SEO очень полезно, а главное много остается свободного места для внесения важной информации, и база данных блога не загружена лишним плагином. Ну я наверное Вас все таки уговорил! Начнем создавать «выпадающую запись» или по-другому спойлер…
Как создать спойлер «выпадающую запись» на блог wordpress без плагина?
Во-первых, схематично, что будем делать:
1. Подключаем jQuery библиотеку на блог в файле footer.php
2. Подключаем сам скрипт нашего спойлера в файле footer.php
3. Добавляем стили css нашего спойлера в файл style.css
4. Добавляем основной код нашего спойлера в запись или на страницу блога
Теперь все четыре шага подробнее:
Первый шаг. Подключаем jQuery библиотеку на блог. Вот код, который нужно добавить в файл footer.php Вашей темы блога. Его нужно вставить перед закрывающимся тегом /body (wp-content/themes/ваша тема/footer.php):
Но перед добавлением этого кода посмотрите, может у Вас уже он подключен! Проверьте как файл footer.php, так и header.php, он может быть там!
Второй шаг. Для корректной работы спойлера необходимо добавить вот этот код в footer.php Вашей темы блога, так же перед закрывающимся тегом /body (wp-content/themes/ваша тема/footer.php):
Третий шаг. Добавляем стили css спойлера в файл style.css нашей темы блога. Вот код, который нужно вставить:
Прекрасно! Почти закончили, осталось совсем немного!
Четвертый шаг. Он же последний! Берем код, который расположен ниже и вставляем его в нашу «выпадающую запись», где должен располагаться спойлер. Уточнение! Вставляйте код в режиме «Текст», но не в режиме «Визуально». Это важно!
Вот и все! Наш спойлер готов к использованию. Теперь в «выпадающую запись» в коде пишите Ваш заголовок и вставляете необходимый текст самой записи.
Вот Вы и узнали: Как создать спойлер «выпадающую запись» на блог wordpress без плагина?
Друзья! У Вас точно у всех есть своя бытовая техника, которой Вы ежедневно пользуетесь и естественно она не вечна и выходит из строя, но это не беда. Так как я знаю, где вам ее могут быстро и дешево, а главное с гарантией отремонтировать! Посетите вот этот ресурс https://best-servis.com.ua/ и Вы не пожалеете, что узнали о нем!
Спасибо за Ваше внимание! Очень признателен, если был Вам полезен.
Возникли вопросы? Пишите, комментируйте! Отвечу всем без исключения! Ваш Валерий Бородин.