Спойлер в WordPress без използване на плъгин

Здравейте, приятели! В днешната статия ще се опитаме да добавим спойлер (spoiler) във WordPress без да използваме разширение, което както знаем може допълнително да натовари нашия блог.

За тези които нямат представа какво е спойлер, това е поле със текст или друго съдържание, което се показва след като кликнете върху самия спойлер. Спойлерите са подходящи за скриване на някакви големи списъци или например на информация която може да не е интересна за всички, а само за малка част от читателите. Може да видите на снимката как ще изглежда крайния резултат:

spoiler-1

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

Преди да променяте нещо във темата ЗАДЪЛЖИТЕЛНО направете бекъп на вашата активна тема, за да може ако нещо се обърка да възстановите оригиналните файлове!

Отваряте functions.php на активната ви тема и поставяте веднага след отварящия таг: <?php този код:

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

spoiler-2

Включваме javascript

След това е необходимо да включим javascript скрипта. Те са два. Единия вече се съдържа в WordPress и само трябва да го включим. Затова отворете файл header.php на вашата активна тема и поставете този код пред затварящия таг: </header>:

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

spoiler-3

Втория скрипт е за самия спойлер. Създайте текстов файл с име spoiler и го запазете със разширение .js и в него поставете този код:

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

Качете създадения файл spoiler.js на вашия сървър. След това добавете този ред преди затварящия таг: </header> във файл header.php, който включва файла spoiler.js:

<script src="/wp-content/themes/вашата_тема/spoiler.js"></script>

spoiler-4

Променете само надпис – вашата_тема със името на вашата активна тема.

Свалете от този линк иконките (icon_minus и icon_plus) със + и – които ще се показват при отворен и затворен спойлер. Качете двете икони във папка images на вашата тема. В папката има готов файл spoiler.js и кодовете които трябва да се поставят в style.css и header.php.

Настройваме външния вид на спойлера

Остана само да зададем настройките на външния вид на спойлера. Отворете файл style.css на вашата тема и добавете на нов ред този код:.spoiler-wrap {

.spoiler-wrap {
background:none repeat scroll 0 0 #e9ffd0;
width:100%;
border-color:#29755f;
border-style:solid;
border-width:1px 1px 1px 2px;
margin:6px;
}
.spoiler-head {
font-size:11px;
line-height:15px;
margin-left:6px;
cursor:pointer;
width:97%;
padding:1px 14px 3px;
}
.folded {
background:url(images/icon_plus.gif) no-repeat scroll left center transparent;
display:block;
padding-left:14px;
}
.unfolded {
background:url(images/icon_minus.gif) no-repeat scroll left center transparent;
display:block;
padding-left:14px;
}
.spoiler-body {
background:none repeat scroll 0 0 #F4FEF3;
border-top:1px solid #29755f;
line-height:20px;
padding:1px 6px 2px;
}

Може да промените цветовете на спойлера на тези места в кода:

spoiler-5

Код (shortcode) който се поставя в страница където искате да се показва спойлера

shortcode – това код който позволява да се използват макроси във постовете. Тоест задава се функция, реализацията на която ще се осъществява от малък код (таг). Дословно shortcode може да се преведе като кратък код.

Остана само да поставите краткия код (shortcode) там където искате да се показва самия спойлер:

[spoiler name="Спойлер в WordPress"] Скрито съдържание [/spoiler]

Може да промените заглавието на спойлера в: Спойлер в WordPress за вашите нужди, а на мястото на надпис: Скрито съдържание, поставете вашия текст който ще се показва при отваряне на спойлера.

Със това завършвам днешната статия. Надявам се информацията да е полезна за вас и да ви помогне успешно да поставите спойлер във вашия сайт. Успех.

С уважение, Николай Томов.

Хареса ли ви статията? Споделете я с приятелите:

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *