Спойлер (от англ. spoiler — «прерыватель потока») — это такая удобная штучка для скрытия больших объёмов текста или другого контента на сайте. Например, на вашем сайте может быть опубликован фильм. Вы можете сделать к нему краткое описание и скриншоты, но не всем будет интересна эта информация — её лучше скрыть в спойлер. Или список песен опубликованного музыкального альбома можно спрятать в спойлер... Ну, вы поняли. В этой статье я приведу кусок кода для реализации спойлера без плагинов на любом движке. А для WP будет дополнительная примочка.
Чтобы ваш объёмный текст или другой материал (давайте, я дальше буду его называть «скрытый контент») уютно поместился в спойлер, его надо будет оформить таким макаром:
Ваша статья.. Это скрытый контент Продолжение вашей статьи.
«Скрытый текст (нажмите, чтобы развернуть)» — это заголовок спойлера, в закрытом состоянии будет виден только он. Конечно, такой HTML каждый раз писать влом. К тому же, это ещё только начало, а не весь код. Подождите немного — будет веселей.
Нам было бы куда удобней пользоваться вот таким кодом:
Это скрытый контент
И это возможно. Если у вас не WordPress, то, надеюсь, вы хорошо знаете свой движок и основы программирования, иначе интеграция моего кода вызовет у вас затруднения.
А счастливые пользователи WP могут смело дописывать в файл темы function.php следующий код (надеюсь, вы учтёте по редактированию файлов WP):
Function сайт_spoiler ($atts, $content) { if (!isset($atts["title"])) $sp_title = "Скрытый текст (нажмите, чтобы развернуть)"; else $sp_title = $atts["title"]; return " ".$sp_title." ".$content." "; } add_shortcode("spoiler", "сайт_spoiler");
Вот теперь в ваших постах можно использовать шоткод . Если у вас не WP , но вы хотите использовать шоткод, вам поможет вот этот PHP-код:
$content = str_replace ("", " Скрытый текст (нажмите, чтобы развернуть) ", $content); $content = str_replace ("", "", $content);
Но, догадывайтесь сами, что такое $content и куда это вставлять, ведь я не знаю, что у вас за движок.
И это ещё не всё. В шаблон отображения страниц вашего сайта (для WP подойдёт, например, header.php ) необходимо вставить этот JS код:
(function($){ var SBobj = ""; $(".spoiler-body").hide(); $(".spoiler-head").click(function(){ $(this).toggleClass("unfolded"); SBobj = $(this).next(); if ($(SBobj).css("display") == "none") $(SBobj).show(300); else $(SBobj).hide(300); }) })(jQuery);
Это движитель нашего спойлера. Как видите, он для работы требует JS-фреймворк jQuery (в WP он подключается автоматически). Тем не менее, если вы видите сразу скрытый контент, а при клике на заголовок спойлера ничего не происходит, значит, возможно, у вас jQuery не подключена. Тогда спросите у поисковой системы «как подключить jquery» или добавьте перед описанным выше кодом ещё и этот код:
И заключительный штрих — прописываем стили спойлера. Пользователи WP редактируют файл темы style.css , дописывая в него следующие строки:
Spoiler-wrap { background: #eee; border: 1px solid #aaa; border-radius: 5px; margin: 12px 6px; } .spoiler-head { padding: 2px 18px; cursor: pointer; background: url("images/spoiler-icon1.png") no-repeat 3px 9px } .unfolded { background: url("images/spoiler-icon2.png") no-repeat 3px 9px } .spoiler-body { margin: 5px; display: none; }
Вы конечно же видели на некоторых сайтах запрет на использование правой кнопки мыши. Эта функция прежде всего борется с теми, кто хочет украсть ваш контент. Полностью от воровства вас не защитит эта мера, но от ручного копирования вполне. Другие варианты .
Не рекомендую отключать правую кнопку мыши, если вы выкладываете в своем блоге материалы, предназначенные для копирования. Это могут быть коды, скрипты, кулинарные рецепты, справочные материалы и другое. Запрет на копирование в данном случае отвернет от вас посетителей, и ваш блог станет менее полезным для посетителей. Если вам важна защита от плагиата, то тогда лучше используйте добавление вашего url в конце копии. Тогда вы будете уверены, что если кто-то захочет опубликовать в другом месте в интернете, скопированное у вас, то копипастер с большей вероятностью поделится ссылкой на ваш блог.
Этот рецепт подходит для любого веб-сайта. Вам нужно лишь вставить код на все страницы вашего блога:
Приближается праздник - Международный женский день. Подготовимся заранее к нему. Вы можете оригинально поздравить девушек и женщин, воспользовавшись сервисами открыток, о которых пойдет речь ниже.
Создать открытку 8 марта онлайн
Воспользуйтесь следующими сервисами, чтобы создать открытку практически с нуля.
Я надеюсь, что воспользовавшись одним из этих генераторов, вы сможете достойно поздравить своих дам с 8 марта!
Содержание статьи:
Google Plus закрывается Платформа Google Plus не оправдала надежд разработчиков и будет удалена полностью уже 2 апреля 2019 года. Вместе с ней исчезнут связанные с ней альбомы в Google Фото, станут недоступными авторизации на сайтах с аккаунтом Google Plus. Уже с 4 февраля стала недоступной функция создания профилей Google Plus, каналов и страниц. Если на вашем аккаунте хранился ценный контент, то вы можете скачать резервную копию .
Подтвердите переход на и задайте свое имя или никнейм.
Не забудьте загрузить аватар в вашем профиле Blogger.
Как удалить профиль гугл плюс Если вы решили раз и навсегда избавиться от профиля Г+, то перейдите на свою страницу гугл плюс –> Настройки –> прокрутите страницу до конца вниз –> удалить аккаунт гугл плюс:
Сегодня расскажу что такоеCSS3, с чем его едят, где его искать, как правильно его прописывать. Предупреждаю, буду рассказывать от себя, упрощенно для широкой публики, как я это вижу + примеры. Итак, начнем издалека.
CSS – это стили, в которых прописываются свойства объекта. Значит, они есть во всех существующих движках, если вы их не можете найти, значит либо не там смотрите, либо их действительно нет (кривой сайт
). Где же они обычно найти? Обычно это корень сайта, название файла style.css, хотя, в принципе, название не так важно, как расширение.css, если файл с таким расширением – это файл стилей.
Смотрите также на моём блоге.
