Представляю вашему внимание простой FAQ для вордпресс, который создается на странице с помощью простых шорткодов.
Я пробовала много FAQ плагинов, но не один не соответствовал моим требованиям. Поэтому пришлось создать свой собственный FAQ.
Представляю вашему внимание простой FAQ для вордпресс, который создается на странице с помощью простых шорткодов.Выглядит он так:
Особенности FAQ для WordPress без плагина
- Эффект аккордеона. Этот эффект сделан с помощью плавного спойлера для сайта.
- Пять цветовых решений, который легко изменить: серый, голубой, красный, зеленый, желтый. Смотрите Demo.
- Индивидуальная, специальная ссылка для каждого вопроса, с помощью которой можно привлечь внимание посетителя к нужному ответу. Подробности смотрите в видеоинструкции ниже.
Установка FAQ для WordPress
Что установить такой FAQ на ваш сайт нужно сделать несколько простых шагов.
function.php
Скопируйте код и вставьте его в файл function.php своей темы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
//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 своей темы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/* My Faq */ .faq_links {cursor:pointer; display: block; color: white!important; font-weight: 800!important; 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.
- Первый шорткод это
123[dofaq][/dofaq]
Он может быть на странице ТОЛЬКО ОДИН раз. Все шорткоды вопросов будут располагаться внутри. Этим шорткодом можно регулировать цветовую схему. По умолчанию цветовая схема вопросов — серая.
Чтобы изменить цвет нужно добавить атрибут color. Например для голубой цветовой схемы:
1234[dofaq color="blue"][/dofaq]
Также доступны еще следующие цвета: red, green и yellow. Все цвета можно увидит в Demo - Второй шорткод отвечает за вопросы с ответами.
12345[myfaqname="imacros"question="Вопрос 1"]Ответ 1[/myfaq]- name — метка вопроса (с помощью нее создастся индивидуальная ссылка для вопроса). В метке ни в коем случае НЕ может быть пробелов.
- question — тут пишите сам вопрос
- внутри шорткода пишите ответ, с применением любых html тегов и других шорткодов.
Сколько вопросов -столько и блоков с шоркодами myfaq. Все они обязательно помещаются внутри шорткода dofaq.
Ниже пример кода FAQ, который размещен вначале статьи:
123456789101112131415161718192021[dofaq color="blue"][myfaqname="imacros"question="Вопрос 1"]Ответ 1[/myfaq][myfaqname="how_to_inastall_imacros"question="Вопрос 2"]Ответ 2[/myfaq][myfaqname="imacros_folder"question="Вопрос 3"]Ответ 3[/myfaq][/dofaq] - Для того, чтобы получить индивидуальную ссылку на вопрос (например, для дальнейшей перелинковки) наведите курсор на нужный вопрос — щелкните правой кнопкой мышки — нажмите «Копировать адрес ссылки». Теперь вставляйте эту ссылку по назначению. При щелчке на нее, пльзователь сразу увидит в FAQ нужный ответ. Попробуйте нажать на эту ссылку: https://stepfor.top/faq-wordpress/#imacros
Как видите, теперь создавать и редактировать FAQ стало намного проще. А вот как это работает на моем сайте: FAQ
Видеоинструкция
После установки кода почему-то вопрос-ответ в развернутом виде отображается на странице. А если нажать на вопрос, тогда ответ прячется..
Добрый день! Надо видеть полную картину.
не отображается цвет самого блока
Сложно сказать, что именно не так, по Вашему комментарию
Благодарю за удобное решение! Нахожусь в процессе настройки своего сайта. Искала удобное решение без плагина. Попробую ваш вариант.
Остается только вопрос: при обновлении wp до новой версии старые настройки слетают. Как это отследить и вернуть то, что мной будет создано?
Можно пользоваться плагином Shortcodes, Actions and Filters. Тогда настройки будут сохранятся.
Добрый день! Спасибо за отличный FAQ) У меня возникла небольшая трудность: при добавлении иконки через в поле «Вопрос» всё ломается, вопрос не отображается, как будто там ничего не написано. Посмотрела в коде — между тегами <a> ничего нет. Помогите, пожалуйста…
Анастасия, напишите сам код, что именно и как Вы делаете?
В первых двух полях вопрос не отображается… Третий работает нормально. Возможно, это из-за кавычек…
Проблема решилась заменой двойных кавычек на одинарные. спасибо)
Это конечно хорошее решение ..
Надо применять ..
Но есть минус если тема обновляется … то придется все что добавлялось в файлы темы еще раз.Вероятно есть решение как сохранить пользовательский код (как вот этот например) при обновлениях тем и самого пресса.(вариант сделать еще один конфиг— как его сопрягнуть с темой)..
Александр, можно установить плагин Add Shortcodes Actions And Filters. И тогда все фильтры будут в отельном файле.