FAQ для WordPress без плагина с помощью простых шорткодов + видео.

Представляю вашему внимание простой FAQ для вордпресс, который создается на странице с помощью простых шорткодов.
Я пробовала много FAQ плагинов, но не один не соответствовал моим требованиям. Поэтому пришлось создать свой собственный FAQ.

Выглядит он так:

✪ DEMO

Особенности FAQ для WordPress без плагина

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

Установка FAQ для WordPress

Что установить такой FAQ на ваш сайт нужно сделать несколько простых шагов.

function.php

Скопируйте код и вставьте его в файл function.php своей темы.

//FAQ
function dofaq_shortcode ( $atts, $content = null ) {
 extract(shortcode_atts(array(
  "color" => 'grey',
      ), $atts));
return do_shortcode('<div class="myfaq faq_'.$color.'">'.$content.'</div>
<script type="text/javascript"> 
if(location.hash) {
questnum = location.hash.replace(/#/g, "");
document.getElementById(questnum).style.display = "block";   
}
jQuery(document).ready(function($) {    
$(document).ready(function(){    
 $(".faq_links").click(function(){    
 $(this).parent().children("div.faq_body").toggle("normal"); 
 return false;    
 });    
});    
});
</script>

');}

add_shortcode('dofaq', 'dofaq_shortcode');

function myfaq_shortcode ( $atts, $content = null ) {
 extract(shortcode_atts(array(
     "name" => ' ',
  "question" => ' ',
   ), $atts));
return do_shortcode('<div><a href="#'.$name.'" class="faq_links">'.$question.'</a><div class="faq_body" id="'.$name.'" name="'.$name.'">'.$content.'<p><br /></p></div></div>');
}
add_shortcode('myfaq', 'myfaq_shortcode');

style.css

Скопируйте код и вставьте его в файл style.css своей темы.

/* My Faq */.faq_links {cursor:pointer;
display: block;
color: white;
font-weight: 800;
padding: 5px 5px 5px 10px;
margin-bottom: 10px;
text-decoration: none;
border-radius: 3px;
 -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; }

.faq_body {display:none;
margin: 5px 5px 5px 30px;
}

/* Faq Colors*/.faq_grey div a.faq_links{background-color: #aaa; border-left: 5px solid #aaa;}
.faq_grey div a.faq_links:hover {background-color: #dddddd; border-left: 5px solid #aaa;}

.faq_blue div a.faq_links {background-color: #1ec8bb; border-left: 5px solid #1ec8bb;}
.faq_blue div a.faq_links:hover {background-color: #91d6d1; border-left: 5px solid #1ec8bb;}

.faq_red div a.faq_links {background-color: red; border-left: 5px solid red;}
.faq_red div a.faq_links:hover {background-color: pink; border-left: 5px solid red;}

.faq_green div a.faq_links {background-color: #4da54d; border-left: 5px solid #4da54d;}
.faq_green div a.faq_links:hover {background-color: #89c189; border-left: 5px solid #4da54d;}

.faq_yellow div a.faq_links {background-color: Gold; border-left: 5px solid Gold;}
.faq_yellow div a.faq_links:hover {background-color: #EEDD82; border-left: 5px solid Gold;}

/* END My Faq */

Установка FAQ на страницу WordPress с помощью шорткодов

Для того чтобы шорткоды работали, их на странице нужно расположить правильно.
Всего будет два шорткода: dofaq и myfaq.

• Первый шорткод это

  Он может быть на странице ТОЛЬКО ОДИН раз. Все шорткоды вопросов будут располагаться внутри. Этим шорткодом можно регулировать цветовую схему. По умолчанию цветовая схема вопросов – серая.
  Чтобы изменить цвет нужно добавить атрибут color. Например для голубой цветовой схемы:

  Также доступны еще следующие цвета: red, green и yellow. Все цвета можно увидит в Demo

• Второй шорткод отвечает за вопросы с ответами.

  Вопрос 1
  
  Ответ 1
  
   

  • name – метка вопроса (с помощью нее создастся индивидуальная ссылка для вопроса). В метке ни в коем случае НЕ может быть пробелов.
  • question – тут пишите сам вопрос
  • внутри шорткода пишите ответ, с применением любых html тегов и других шорткодов.

  Сколько вопросов -столько и блоков с шоркодами myfaq. Все они обязательно помещаются внутри шорткода dofaq.

  Ниже пример кода FAQ, который размещен вначале статьи:

  
  
  Вопрос 1
  
  Ответ 1
  
   
  Вопрос 2
   Ответ 2 
  
   
  Вопрос 3
   Ответ 3 
  
   

• Для того, чтобы получить индивидуальную ссылку на вопрос (например, для дальнейшей перелинковки) наведите курсор на нужный вопрос – щелкните правой кнопкой мышки – нажмите “Копировать адрес ссылки”. Теперь вставляйте эту ссылку по назначению. При щелчке на нее, пльзователь сразу увидит в FAQ нужный ответ. Попробуйте нажать на эту ссылку: https://stepfor.top/faq-wordpress/#imacros

Как видите, теперь создавать и редактировать FAQ стало намного проще. А вот как это работает на моем сайте: FAQ

 

Видеоинструкция