студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: В теме: Без плагинов
студия занимательная МИХАЛИКА

Как сделать на сайте max-спойлер в один клик, и без плагина

Сегодня расскажу как встраивается в блог лёгкий спойлер. А в финале — вживим кнопку SpL в html редактор.

Плагины использовать не станем, ибо — это тяжеловато и может привести к ряду ошибок (коли не грамотно устанавливать), которые выявятся при проверке странички валидатором HTML, — вам они покажутся жутью…

…кстати, все ссылки полезных тестеров будут под рукой, если пользоваться плагином seo-Ultimate или полезным web-мастеру RDS-бар(ом).

Итак, вот всё что нам потребуется для spoiler max:


 

…чтобы инструмент «скрытия текста» получился таким максимально-симпатичным и настраиваемым:

 

 

Тут-Тайна

Продолжим решать вопрос — как встроить на сайт спойлер не используя плагин…

Читайте и подписывайтесь!

 

 

 

 

встраиваем на странички сайта спойлер

 

 

 

 

ПАМЯТКА:

…напоминаю всякий раз: заведите какой-то документ «запоминалку» всех совершаемых эксов с блогом. Копируйте редактируемые файлы. Пригодится!

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

 

 

 

Наш блог призван помочь тем, которые создают сайт своими руками, а значит рассмотрим прописку spoiler подробнее. Но для авторов кулинарных блогов, сердцу которых все эти скрипты до фени, в финале, для скорой настройки спойлера, дам ссылку на скачивание архива — кнопки и файла spoiler.js — чтобы каша не подгорела)

 

 

Ну а мы, подготовимся и приступим:

 

…открывайте файловый менеджер и в нём папку js В большинстве современных шаблонов она присутствует (а коли в вашем её нет, создайте с именем js).

…и в этой папке создайте файл, под псевдонимом spoiler.js. Откройте его и пропишите в его теле следующий скрипт. И… сохраняйте эту работу на сервере.

 

 

jQuery(document).ready(function() {
jQuery('.spoiler-bodys').hide()
jQuery('.spoiler-max-head').click(function(){
jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle()
})
})

 

 

Ну, и, не мешкая длинно, откроем файл функций functions.php… прокрутим фенечку до финала, и, увидев тег ?> пуще включим наше внимание.

 

Установим курсор перед знаком вопроса и «Enter» отступим пару пробелов книзу.

 

Теперь копируем приведённый ниже функциональный код и помещаем в «пробельное» местечко. Сохраните, от греха подальше. Проверьте работоспособность сайта, перезагрузкой страницы F5.

 

 

// max-СПОЙЛЕР
function hyper_spoiler($atts, $content) {
	if (!isset($atts[name])) {$sp_name = 'Спойлер-max';}
	else {$sp_name = $atts[name];}
	return '<div class="spoiler-wraps">
		<div class="spoiler-max-head folded">'.$sp_name.'</div>
		<div class="spoiler-bodys">'.$content.'</div>
	</div>';
}
add_shortcode('spoiler', 'hyper_spoiler');
// ФИН - max-СПОЙЛЕР

 

 

!..что примечательно: если сайт показал то, что и показывал раньше, значит вы ошибки не совершили и можно продолжать.

 

Здесь же, в корневой директории шаблона, открываем файл ститлей style.css.

 

Я предлагаю, не спутаться дабы, также как и в случае с функциями пройтись до финала файла стилей, а там уж и расположить код CSS — строки ниже, опять же ж…

 

CSS

 

.spoiler-wraps{background:none repeat scroll 0 0 #E0DCCC;width:97%;border-radius:5px 5px;border-color:#1675B8;border-style:solid;border-width:1px 1px 1px 2px;margin:6px}
.spoiler-max-head{width:97%;font-size:12px;font-style:italic;line-height:15px;margin-left:6px;cursor:pointer;padding:1px 14px 3px}
.folded{background:url(images/icon_plus_2.gif) no-repeat scroll left center transparent;display:block;padding-left:14px}
.unfolded{background:url(images/icon_minus_2.gif) no-repeat scroll left center transparent;display:block;padding-left:14px}
.spoiler-bodys{background:none repeat scroll 0 0 #F2F2F2;border-top:1px solid #1675B8;line-height:20px;padding:1px 6px 2px}

 

 

Ну, и, так как у меня строчный вариант селекторов CSS, даю небольшие пояснения без комментариев в коде:

1 — строка настроек кнопки спойлера: цвет; скругление… настройка ширины кнопочки в процентах; колор бордюра (окантовки, так сказать).

 

2 — возможно задать шрифт и величину фразы открывающей кнопки; вариант курсора…

 

3 — здесь указываем путь к иконкам плюс и минус.

 

4 — аналогично прописан путь к иконкам… и их положение.

 

5 — цвет открытого поля спойлера и бордюра… и их величины.

Подробнее болтать не буду, ибо вы здесь и без меня разберётесь: какие-то величины удалите, а какие-то добавите. Экспериментируйте!

 

Да! …не забудьте скачать архив, если нужны кнопочки-иконки для spoiler-max, которые и загрузите к себе на сервер: у меня это папка images — здесь строка 3 — 4. В любом случае имейте в виду свой путь.

 

 

 

 

 

Небольшой антрахт и… …давайте откроем файл header.php — внутри которого подключим уже имеющуюся в вашей CMSWordPress библиотеку js (если по странным обстоятельствам она не подключена ранее) — и активируем наш самый верхний код-файл.

 

 

…активируем созданный файл…

 

<script src="http://mihalica.ru/wp-content/themes/ВАШ_ШАБЛОН/js/spoiler.js"></script>

 

 

…подключаем библиотеку…

 

<script src="/wp-includes/js/jquery/jquery.js"></script>

 

 

Поместите эти пару строк где-то ближе к тегу </head> — почему «где-то»?? а потому — что это уж вы сами определите путём рокировок и анализа, ибо скорость загрузки сайта, знаете ли. Хотя этот наш спойлер лёгкий. Не тяжелея самого занятия блоггингом. И предостерёг я только ради приличия и полезного обострения вашего ВНИМАНИЯ.

 

 

к слову:

многие библиотеки js правильнее «отправлять в подвал» (footer.php) — так логичнее в плане скоростей загрузки страничек, но !! если только перемещение не мешает правильной работе сайта!

…конечно же, мера должна быть во всём, и в том числе не забывайте об ошибках в вёрстке…!

 

 

 

Скачать Архив с документацией js, php и кнопочками (css копируйте здесь, ибо всё-ровно придётся править под свою стилистику)

 

 

 

И под занавес:

 

…в виде бонуса за ваше с нами времяпрепровождение покажу вот такую строку, добавив которую у вас получится замечательная кнопочка для молниеносного добавления шорткода spoiler в тело статьи — в один клик, и готово дело (кликнете на фото)) и уведите примерную кнопочку наряду с другими.

 

 

Как сделать на сайте max-спойлер в один клик и без плагина

 

 

QTags.addButton( 'max-spoiler', 'max-spoiler', '{spoiler name="ЧИТАТЬ"}\n', '\n{/spoiler}' );

 

 

…вопрос о добавленных мною тегах <р> и т.п. рассмотрим в комментариях.

 

Но чтобы всё это лихое кнопочное благоудобство текстового редактора HTML заработало и у вас на сайте, — необходимо ознакомиться с этим постиком: Обогащаем своими кнопками текстовый HTML редактор WordPress и тогда у вас будет множество помимо spoiler нужных в функционале кнопочек.
…занавес:

 

Вероятно, не нужно и напоминать, что, для того, чтобы запустить выполнение спойлера в статье, достаточно — нужный текст поместить между тегами (пример ниже)

 

 

{spoiler name="ЧИТАТЬ СКРЫТОЕ"} Спрятанный текст {/spoiler}

 

 

Один нюанс:

как видите здесь в коде (в статье) я использовал фигурные скобки, иначе бы код отработался и показать пример кодо-строки не удалось бы, ибо это шорткод!!

Конечно же, нужно использовать квадратные [ … ]

 

 

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!


!..подписываясь на обновления mihalica.ru
...расстаёмся с невежеством..!


 

 

А спойлер получится такой:

 

 

Откройте - там самое главное!

Засим закругляюсь…

Ну, а остальное и недосказанное в этой статье, вы можете увидеть в моих и моих друзей работах…

Не забудьте подписаться! …и понажимать на всевозможные кнопочки…

 

 

но коли затрудняетесь с пропиской кода или страшитесь, прочтите вот ЭТО

 


Если что-то не ясно, спрашивайте. Помогу… в чём дюжу.
Вместе мы многое сможем! Берегите себя и свой век - mihalica.ru


Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!


меточная навигация:


Комментарии © 0 к статье: Как сделать на сайте max-спойлер в один клик, и без плагина

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Ваш e-mail не будет опубликован. Обязательные поля помечены *