Полезный плагин WordPress для создания спойлера — Advanced Spoiler. Спойлер wordpress
как сделать спойлер в WordPress с помощью Advanced Spoiler
Добрый день! Меня часто посещала мысль про то, как сделать спойлер в WordPress. Вы не знаете, что такое спойлер? Вот они - эти самые заветные спойлеры:
Спойлер в Вордпресс позволяет скрыть некий участок страницы/текста, который можно открыть/развернуть. Очень удобно скрывать некие участки, которые не обязательны к просмотру или на больших страницах.
Да, можно сделать вывод спойлеров самостоятельно (в интернете куча “мануалов” – информации), но так как я не любитель этих всех кодов, да и не очень хорошо в них разбираюсь, для меня куда проще было сделать вывод спойлера через WordPress плагин. Вопрос был другим, а какой именно плагин использовать? Идеальное решение нашлось, встречайте, плагин Advanced Spoiler.
Спойлер в WordPress с помощью плагина Advanced Spoiler
- Сначала, как и всегда Вам нужно скачать и установить плагин Advanced Spoiler.
- Сейчас переведем текст, который по умолчанию стоит Show и Hide. Для этого перейдите в админке WordPress –> Параметры –> Advanced Spoiler и переведите там эти слова:
- Также на этой странице Вы можете выбрать эффект спойлера и т.п. А вывести этот спойлер очень просто. Для этого заходите на страницу редактирования поста/страницы, выделяете необходимый текст (в моем случае это картинки в “Целях”) и нажимаете на кнопку “Включить интерцептор”:
- И уже там выбираете эффект (мне понравился эффект “slide”) и нажимаете на кнопку “okay”:
- Результат проделанной работы, Вы можете видеть на той же странице “Цели”. Также Вы можете скрыть нужный текст в шаблоне (например, в сайдбаре, список целей и т.п.). Для этого используйте используйте следующий шорткод:
Вот и все! Вот такой коротенький урок получился сегодня . Возможно, данная функция кому-то, как и мне, пригодится.
До скорой встречи!
wpnew.ru
Easy Spoiler | WordPress.org
This plugin allows you to easily create spoilers with a shortcode. An attractive, animated container with a hint to its content and a show/hide button are created. Admin control panel allow you to tailor various aspects and colors of the spoiler.
Toolbar buttons are (optionally) added to the HTML editor to make adding spoilers in your posts very easy. Just highlight the HTML you want hidden and click on ‘spoiler’. Or, highlight a series of spoilers and click on ‘spoiler group’ for the grouping effect.
You can put spoilers within
- pages
- posts
- comments
- widgets
Note that if you use it within comments, it is smart enough to not expand embedded shortcodes as this would allow end-users posting comments to invoke any of your site’s shortcodes.
An administrator page allows you to configure various settings.
PHP5 Required.
The shortcode format is:
[spoiler title=»Secret location of the code»]It’s in the dresser[/spoiler]
For a complete example and more detailed documentation, visit the plugin home page. If you do not understand these instructions, please ask questions in the comments section on the plugin home page. We will be more than happy to answer them.
There are a lot of options including colors, controls, and animation behavior.
Go here for up-to-date usage and examples:EasySpoiler Tutorial
A plain spoiler, closed
A spoiler with title hint, opened
A spoiler with custom intro, title hint, and complex contents (in this case, easy chart builder)
A spoiler group
-
Verify that you have PHP5, which is required for this plugin.
-
Upload the easy-spoiler directory to the /wp-content/plugins/ directory
-
Activate the plugin through the ‘Plugins’ menu in WordPress
Now you can insert the shortcodes within your posts and pages.
«Easy Spoiler» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
Участники
ru.wordpress.org
Плагин Advanced Spoiler на WordPress
Давно думал о возможности установления такой функции на WordPres и нашел два способа: установка плагина Advanced Spoiler и размещение кода. Как оказалось и как ни странно, но я решил установить плагин. По трем причинам :
- плагин очень легкий и не будет давать нагрузку на сервер;
- установка кода предполагает немного сложноватую установку и настройку;
- судя по отзывам установка функции под кат с помощью кода не всегда срабатывает в различных браузерах, версиях вордпресс или темах
Посему решил установить плагин и рассказать в строках этого поста о том
как установить плагин Advanced Spoiler на WordPress и как с ним работать
Небольшое вступление: а зачем этот плагин? Причины две: во-первых — для скрытия от индексации ненужного текста в статье; во-вторых — скрыть некоторое дополнения и подробности к статье (вспомните сноски литературных произведений внизу страниц книг), которые возможно понадобятся не каждому читателю, особенно, если его устроит только беглое ее прочтение.
Установка и активация
очень проста, так как плагин Advanced Spoiler находится в админ панели путем поиска плагинов. В поиске появится еще один аналогичный плагин, но я не стал рассматривать его, полагая, что функции обоих — идентичны.
Настройка плагина
Открываем «Параметры», в контексте кликаем Advanced Spoiler и переходим в страницу настроек:
Честно говоря, плагин можно вообще не настраивать и все оставить по умолчанию. Однако, если более детально изучить настройки, можно кое-что изменить. Но я все оставил в исходном состоянии. Но все же внесу некоторые пояснения:
Feed Visibility – видимость эффекта в RSS-ленте;
Позволить вкладки – если дополнительной информации очень много, то внутри одного спойлера можно сделать еще один или несколько спойлеров;
Разбор старых параметров – импорт данных из предыдущей версии плагина, которая называлась Ajax Spoiler
Остальное — еще проще.
Как работает плагин
Текст, который нужно вставить под кат, нужно выделить, — в результате в текстовом редакторе в квадратике плагина появятся значки «плюс» и «минус» — плагин можно подключать, кликнув по квадратику. Откроется окно, где все твориться вашими руками. Собственно, здесь можно выбрать эффекты, вставить собственные тексты вместо «Show» и «Hide» и нажать «okay». Более ничего.
Что и как увидит читатель под катом
Примерно то и так же, как увидите вы сейчас на этой странице, кликнув по строке ниже:
[spoiler show=»показать текст»]Дорогие читатели, я рад что вы пришли на мой блог и надеюсь, что найдете на нем много полезной информации :mail: . Я всегда рад вас видеть :heart: . Не забудьте про кнопки соцсетей, однако 😉 — не то я огорчусь :-([/spoiler]
Под кат можно вставлять ссылки и даже смайлики и прочие символы, используя даже сложные дополнительные от плагинов Simple TinyMCE и Special Text Boxes.Вот и все.
Впрочем, нет не все!
Друзья и читатели, я надеюсь, что встреча новогодних праздников прошла для вас удачно и приятно. Желаю всем вам в новом 2013 году только успехов и исполнения всех ваших желаний. Всего-всего самого доброго вам!
[/spoiler]
prt56.ru
Плагин BBSpoiler для wordpress
В сегодняшнем посте рассмотрим плагин BBSpoiler для wordpress который делает точную копию всем известного скрипта спойлера ВВ. Используется данный спойлер на многих форумах и фотохостингах. Разумеется WordPress это не форум и не фотохостинг но зачастую и на WordPress приходится использовать спойлер для того чтобы скрыть часть текста или изображения.
Плагин BBSpoiler
Установка и настройка плагина BBSpoiler
После скачивания плагина приступаем к его установки и активации.После активации в визуальном редакторе появится иконка
при нажатии на иконку откроется его форма для заполнения
заполняем поля, заголовок и вставляем текст, который будет заключен в спойлере.в результате получим:
в развернутом виде:
Также можно немного поправить css данного спойлера чтобы он лучше вписывался в дизайн сайта. Делаем это следующим способом:заходим в папку плагина plugins/bbspoiler/inc и сохраняем на ПК файл bbspoiler.css (в нем заданны стили и его визуальный вид спойлера).открываем данный файл в программе NotePad как с ней работать смотрим здесь, и копируем данные стили и вставляем в файл css своей темы, перед каждым значениям добавляем !important пригодится в том случаи если плагин обновится ваши значения не пропадут.Итак, поехали, спойлер по умолчанию от автора серый. Мы же его немного видоизменим, ниже представлены мои css:
| .sp-wrap { background:none repeat scroll 0 0 #F7F7F7 !important; border-color:#0078BF !important; border-style:solid !important; border-width:1px 0 0 5px !important; margin:6px !important; } .sp-head { background:url(images/icon_plus_1.gif) no-repeat scroll left center transparent !important; display:block !important; padding-left:14px !important; } .sp-head.unfolded { background:url(images/icon_minus_1.gif) no-repeat scroll left center transparent !important; display:block !important; padding-left:14px !important; } .sp-body { background: none repeat scroll 0 0 #FFFFFF !important; line-height:20px !important; padding:10px 6px 2px !important; } |
.sp-wrap { background:none repeat scroll 0 0 #F7F7F7 !important; border-color:#0078BF !important; border-style:solid !important; border-width:1px 0 0 5px !important; margin:6px !important; } .sp-head { background:url(images/icon_plus_1.gif) no-repeat scroll left center transparent !important; display:block !important; padding-left:14px !important; } .sp-head.unfolded { background:url(images/icon_minus_1.gif) no-repeat scroll left center transparent !important; display:block !important; padding-left:14px !important; } .sp-body { background: none repeat scroll 0 0 #FFFFFF !important; line-height:20px !important; padding:10px 6px 2px !important; }
не забудьте про картинки (плюс и мину) их необходимо переместить в папку images своей темы.В результате у меня получился вот такой спойлер для сайта:
На этом все удачи.
С уважением, Андрей Юрийчук
zarobitok.ru
Полезный плагин WordPress для создания спойлера
Когда я писал статью о CS Yazzle, то возникла необходимость скрыть часть неуникального текста под кат. И я стал думать, как это сделать. Сразу пришел на ум вариант использования сворачивающегося/разворачивающегося спойлера. Такие спойлеры очень удобно использовать в тех случаях, когда есть необходимость разместить большое количество информации, которую нет необходимости показывать с самого начала, либо данная информация является вспомогательной, и для того чтобы статью было удобнее читать, эту информацию лучше будет скрыть, а уже те, кому она понадобится, смогут открыть ее одним кликом.
Вы наверняка уже видели подобные эффекты. Если сразу не врубаетесь о чем речь, то вот пример, взял с рутрекера:
В блоке, который я отметил цифрой 1, спойлеры свернуты, в блоке который отметил цифрой 2, спойлер развернут. То есть, этот разворачивающийся блок и есть спойлер.
Подобные штуки можно реализовать при помощи непосредственно правки шаблона, но мне не захотелось в нем ковыряться, и я пошел по пути наименьшего сопротивления – установил плагин Advanced Spoiler. Как все это работает на практике, можете посмотреть в статье, ссылку на которую я давал в самом начале. А поскольку я нахожу данный плагин очень полезным, то решил написать про него отдельную статью. Быть может, вам это тоже пригодится.
В принципе, установка и настройка элементарные. Я качнул через поиск одну из версий (вроде последняя), она переведена на русский немного кривовато, но все интуитивно понятно, поэтому ничего страшного.
Способ – метод вывода спойлера
Feed Visibility – видимость эффекта в RSS-ленте
Показать текст – это текст спойлера в неразвернутом и в развернутом виде. Кстати, текст спойлера можно делать индивидуальный для каждого отдельно взятого спойлера. Для этого необходимо использовать такой код:
[spoiler show="Развернуть"]содержимое спойлера[ /spoiler]Эффект по-умолчанию – это эффект при разворачивании/сворачивании спойлера. Описывать их нет смысла, проще посмотреть вживую. Мне больше всего понравился appear, его и оставил
Позволить вкладки – если информации очень много, то внутри одного спойлера можно сделать еще один или несколько спойлеров
Разбор старых параметров – импорт данных из предыдущей версии плагина, которая называлась Ajax Spoiler
Установка плагина стандартная – либо закачать через ftp, либо в админке найти и установить через форму поиска. Вот такая вот полезная мелочь. Скачать плагин можно здесь. А у меня на сегодня все, до связи на волнах https://max1net.com/
Вконтакте
Google+
Понравилась запись? Подпишитесь на обновления по почте:
Читайте похожие статьи
max1net.com
Как создать спойлер на Wordpress
Всем привет! Иногда возникает необходимость скрыть часть текста, которая находится в статье и является вспомогательной. Для этой цели отлично подходит спойлер. Одним кликом по спойлеру скрытая информация откроется и любой желающий ее сможет прочесть. В этой статье я расскажу о плагине, который поможет скрыть текст в спойлер в статье. Плагин Advanced Spoiler позволит легко добавить спойлер на WordPress блоге.
Если Вы не знаете что такое спойлер, посмотрите на картинку ниже:
Подобный спойлер Вы могли видеть на торрент трекерах.
Найти несложную инструкцию по добавлению спойлера без плагина мне пока не удалось, поэтому я расскажу как это легко можно реализовать данную возможность с плагином Advanced Spoiler.
Настройка Advanced Spoiler
Первым делом устанавливайте плагин Advanced Spoiler. Устанавливается он стандартно, как и все плагины. Заходи в раздел "Плагины" и добавляете в строку поиска название. По названию находите в списке результатов поиска нужным Вам и нажимаете на ссылку "установить". После успешной установки активируете.
Далее найдите плагин Advanced Spoiler в меню Параметры и сделайте несколько настроек. Укажите какая надпись будет показаться на закрытом и открытом спойлерах. По умолчанию там надписи "Show" и "Hide". Русифицируем их, вписав "Показать" и "Спрятать". Если хотите, можете поэкспериментировать с эффектами открытия спойлера.
Больше ничего настраивать не нужно. Сохраняете изменения.
Чтобы добавить спойлер в статью нужно на странице редактора записи выделить текст, который нужно спрятать и нажать на кнопку добавить спойлер:
Вот что получилось после публикации статьи:
Плагину явно не хватает цветового оформления, как-то не выразительно он выглядит в тексте статьи.
Установка и настройка данного плагина не должна вызвать трудностей даже у новичка. Все интуитивно понятно. Как Вы могли заметить, что перевод у плагина кривоват, но это не помешает разобраться. Вот собственно и все. Устанавливайте и пользуйтесь на здоровье 🙂
Если Вам интересно, как без плагинов реализовать добавление спойлера в текст, почитайте статью по ссылке http://inetsovety.ru/kak-sdelaty-krasivy-spoyler-na-sayte-bez-plagina/ Этот вариант реализации мне кажется даже лучшим и более удобным. Он позволяет настроить цветовое оформление спойлера на ваш вкус и под дизайн сайта.
С уважением, Виктория – блог inetsovety.ru
inetsovety.ru
Создаем шорткод спойлера для WordPress
От автора: рассмотрим пример создания шорткода спойлера для WordPress, через файл functions.php. Cегодня очень многие организации и фрилансеры, занимающиеся созданием сайтов, работают с CMS WordPress. Как правило, все ограничиваются вёрсткой темы и подключением необходимых плагинов, если таковые существуют. Загвоздка состоит в том, что сталкиваясь с задачей, на решение которой исполнитель не может найти необходимого программного обеспечения, он избегает эту задачу ещё при заключении договора.
Это неправильно!
Если есть задача, например создание спойлера для WordPress, решением которой никто ещё не занимался, то в интересах разработчика, решить её первым и применять на подобных проектах в будущем.
В wordpress, если решение довольно ёмкое, то лучше написать плагин и просто устанавливать его в этом и других проектах по необходимости, если же решение элементарно, то достаточно ограничиться файлом функций.
В этом видео уроке, я постараюсь донести, понимание принципа взаимодействия файла functions.php с ядром wordpress, на примере простого шорткода, который будет прятать контент, т.е. создадим спойлер для WordPress.
Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?
Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress
Узнать подробнееВ качестве исходников, я предоставлю сам описываемый файл functions.php, стили, javascript и одну маленькую картинку.
На этом, урок по созданию спойлера WordPress, через файл functions.php закончен, надеюсь он оказался вам полезен, удачи!
Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?
Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”
Получить
webformyself.com
