Выпадающий список в сайдбаре WordPress

17 марта, 2014 admin

Выпадающий список WordPressСуществует несколько плагинов, реализующих спойлер в сайтах на WordPress. Плагины достаточно просты в использовании и замечательно работают в тексте страниц сайта. Однако явным минусом данной реализации выпадающего списка, является то, что он, скорее всего, не будет работать в сайдбаре.

.Данный нюанс обусловлен тем, что вывод спойлера осуществляется с помощью шорткодов, которые большинством шаблонов не поддерживаются. Их необходимо подключать отдельно в файле functions.php. При этом, универсального решения в принципе не существует. Это значит, что рабочий код для одной темы, совсем не обязательно будет являться рабочим для другой.

Нажмите, чтобы прочесть
Универсальным решением, в данном случае, я считаю подключение спойлера с помощью специального скрипта. Выпадающий список, реализованный таким способом, будет работать в большинстве шаблонов. Кроме того, внешний вид спойлера можно легко изменить под свои нужды с помощью правки таблицы стилей style.css.

Для начала необходимо вставить в файл functions.php вашей темы следующий код:

function hyper_spoiler($atts, $content) {
if (!isset($atts[name])) {$sp_name = 'Спойлер';}
else {$sp_name = $atts[name];}
return '<div>
<div>'.$sp_name.'</div>
<div class="spoiler-body">'.$content.'</div>
</div>';}
add_shortcode('spoiler', 'hyper_spoiler');

Его нужно внести в самый конец файла, перед закрывающим тегом ?>. После этого обязательно сохранить произведенные изменения.

Теперь нужно установить новый код в файл header.php:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>

Его следует внести между тегами <head></head>.

После этого нужно создать файл spoiler.js(файл будет предоставлен в архиве ниже). Для этого откройте программу Notepad++ и введите туда следующий код:

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

Сохраните все как файл  spoiler.js.

Теперь необходимо загрузить spoiler.js на ваш сайт. Сделать это можно с помощью FTP. Можете положить файл в папку uploads вашего сайта, тогда практически не придется менять следующий код, его нужно прописать следом за предыдущим между тегами <head></head>:

<script type="text/javascript" src="http://ВАШ-САЙТ.РУ/wp-content/uploads/spoiler.js"></script>

Далее необходимо подключить стили к нашему спойлеру. В самый конец файла style.css вносим код:

.spoiler-wrap {
background:none repeat scroll 0 0 #E2DFE0;
width:100%;
border-color:#FF0000;
border-style:solid;
border-width:0px 0px 0px 1px;
margin:0px 10px 10px -6px;
}
 
.spoiler-head {
font-size:15px;
color: #FF0000;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
line-height:15px;
margin-left:6px;
cursor:pointer;
width:97%;
padding:1px 14px 3px;
cursor:pointer;
text-decoration: underline;
}
 
.folded {
background:url(images/icon_plus_1.gif) no-repeat scroll left center transparent;
display:block;
padding-left:19px;
}
 
.unfolded {
background:url(images/icon_minus_1.png) no-repeat scroll left center transparent;
display:block;
padding-left:19px;
}
 
.spoiler-body {
background:none repeat scroll 0 0 #E2DFE0;
border-top:1px solid #29755f;
line-height:20px;
padding:1px 6px 2px;
}

Не забывайте каждый раз сохранять изменения!

Теперь осталось лишь добавить значки + и -. Их вы можете получить, скачав ДАННЫЙ АРХИВ, кстати в нем уже присутствует файл spoiler.js. Распакуйте архив и поместите изображения в папку images вашего шаблона. Если есть желание, картинки вы можете заменить на свои.

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

[spoiler][/spoiler]

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

[spoiler name="Имя спойлера"][/spoiler]

Если спойлер в сайдбаре все-таки не заработал, добавьте в functions.php еще один короткий код сразу под вышеприведенным первым кодом:

add_filter('widget_text', 'do_shortcode');

Работу спойлера вы можете наблюдать в сайдбаре и тексте данной статьи! [warning]Если у вас остались вопросы - задавайте их в комментариях. Также интересен ваш опыт применения выпадающего списка на WordPress сайте.[/warning]

Это полезно знать:

Опубликовано в рубрике Обучающие статьи Метки:
«
»
Вы можете оставить комментарий, или ссылку на Ваш сайт.

2 комментария к записи “Выпадающий список в сайдбаре WordPress”

  1. Дэн:
    13.01.2016 в 2:00 дп

    у меня шаблон после всего этого ломается почему то?

    Ответить
  2. Дмитрий:
    30.01.2016 в 11:35 дп

    <script TYPE="text/javascript" src="/script.js»> Подскажите пожалуйста, что должна подключать данная строка? У меня нет в шаблоне файла script.js

    Застопорился. Выдает имя спойлера и содержимое. А вот функционала спойлра нет нет.

    Ответить

Оставить комментарий

  • Нажмите, чтобы прочесть

    Оставляйте любые свои комментарии по данной теме!!!

Яндекс.Метрика