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

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

  • Скрывает текст
  • Уменьшает размер страницы

Но сегодня, специально для любителей залезть в код, напишу урок, как создать спойлер в WordPress без плагинов.

Как вы знаете, плагины создают нагрузку на блог — все по-разному. Но плагины для скрытия текста сильной нагрузки не создают, зато как и все остальные оставляют след в бд блога, удалить которые можно лишь вручную

Выглядит она симпатично, в виде разворачивающегося списка:

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

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

Итак, на скриншоте вы можете увидеть варианты вида спойлера. При нажатии на + раскрывается текст, а при нажатии на — текст обратно скрывается. Красивый спойлер, правда? Намного приличнее чем плагин. Давайте приступим к установке кода.

Чтобы не искать файлы я уже выложил их в архиве, как исходники, так и изображения скачать тут.

Идем из админки WordPress в Внешний вид -> Редактор и там открываем файл functions.php. Добавим в него функцию, отвечающую за вывод спойлера, а также добавим шорткод.

shortcode – с английского переводится как короткий код. Это WordPress код, построенный на API, с ним можно использовать макросы в постах. То есть реализация кода будет осуществляться с помощью небольшого кода, тега.

Вставляем в файл данный код:

  1. function hyper_spoiler($atts, $content) {
  2. if (!isset($atts[name])) {$sp_name = ‘Спойлер’;}
  3. else {$sp_name = $atts[name];}
  4. return ‘<div class=»spoiler-wrap»>
  5. <div class=»spoiler-head folded»>’.$sp_name.'</div>
  6. <div class=»spoiler-body»>’.$content.'</div>
  7. </div>’;}
  8. add_shortcode(‘spoiler’, ‘hyper_spoiler’);

В данном случае название спойлера находится во второй строке — «Спойлер» его можно поменять, оставив кавычки — ‘ ‘.

Подключаем javascript

Теперь надо добавить 2 скрипта, которые подключат к спойлеру jQuery. Вставляем в файл темы header.php код до закрывающего тега </head>:

  1. <script src=»/wp-includes/js/jquery/jquery.js» type=»text/javascript»></script>

Переходим к следующему коду. Для этого понадобится создать в текстовом редакторе новый файл с расширением .js и впишите в него этот код:

  1. jQuery(document).ready(function(){
  2. jQuery(‘.spoiler-body’).hide()
  3. jQuery(‘.spoiler-head’).click(function(){
  4. jQuery(this).toggleClass(«folded»).toggleClass(«unfolded»).next().toggle()
  5. })
  6. })

Назовите файл spoiler.js и загрузите на сервер через FTP соединение. Далее пропишите код в header.php для подключения этого скрипта:

  1. <script src=»/spoiler.js» type=»text/javascript»></script>

Не забудьте, в данном случае файл должен быть загружен в корневой каталог. Чтобы изменить путь допишите перед название папки например, /wp-includes/spoiler.js.

Настройка внешнего вида спойлера, добавляем css стили

Остается придать нашему спойлеру достойный вид. Для этого в теме сайта открываем файл style.css и добавляем в него код:

  1. .spoiler-wrap {
  2. background:none repeat scroll 0 0 #e9ffd0;
  3. width:100%;
  4. border-color:#29755f;
  5. border-style:solid;
  6. border-width:1px 1px 1px 2px;
  7. margin:6px;
  8. }
  9. .spoiler-head {
  10. font-size:11px;
  11. line-height:15px;
  12. margin-left:6px;
  13. cursor:pointer;
  14. width:97%;
  15. padding:1px 14px 3px;
  16. }
  17. .folded {
  18. background:url(images/icon_plus_1.gif) no-repeat scroll left center transparent;
  19. display:block;
  20. padding-left:14px;
  21. }
  22. .unfolded {
  23. background:url(images/icon_minus_1.gif) no-repeat scroll left center transparent;
  24. display:block;
  25. padding-left:14px;
  26. }
  27. .spoiler-body {
  28. background:none repeat scroll 0 0 #F4FEF3;
  29. border-top:1px solid #29755f;
  30. line-height:20px;
  31. padding:1px 6px 2px;
  32. }

Советую не изменять путей и названия файлов ( в архиве предложены изображения кнопок), чтобы лишний раз не лезть в код.

Кстати на счет архива ( предложен выше) изображения кнопко необходимо загрузить в папку /images, которая находится по этому пути: /wp-includes/images.

Вывод спойлера в тексте, код для вставки спойлера

Остается вывести наш спойлер в тексте, для этого используем shortcode.

В первом примере спойлер будет вставлен по умолчанию, где его название будет «Спойлер»:

Во втором случае название дается вами для каждого спойлера свое. Благодаря тегу name, который и дает имя спойлеру:

Вот с помощью этого и можно вставить спойлер в WrodPress без плагинов.


Похожие записи:

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

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

Похожие записи: