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

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

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

Вопрос 1

Ответ 1

Вопрос 2

Ответ 2

Вопрос 3

Ответ 3

✪ DEMO

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

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

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

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

function.php

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

style.css

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

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

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

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

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

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

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

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

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

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

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

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

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



Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

8 комментария

  1. Благодарю за удобное решение! Нахожусь в процессе настройки своего сайта. Искала удобное решение без плагина. Попробую ваш вариант.
    Остается только вопрос: при обновлении wp до новой версии старые настройки слетают. Как это отследить и вернуть то, что мной будет создано?

  2. Добрый день! Спасибо за отличный FAQ) У меня возникла небольшая трудность: при добавлении иконки через в поле «Вопрос» всё ломается, вопрос не отображается, как будто там ничего не написано. Посмотрела в коде — между тегами <a> ничего нет. Помогите, пожалуйста…

    • Анастасия, напишите сам код, что именно и как Вы делаете?

      • В первых двух полях вопрос не отображается… Третий работает нормально. Возможно, это из-за кавычек…

  3. Это конечно хорошее решение ..
    Надо применять ..
    Но есть минус если тема обновляется … то придется все что добавлялось в файлы темы еще раз.Вероятно есть решение как сохранить пользовательский код (как вот этот например) при обновлениях тем и самого пресса.(вариант сделать еще один конфиг— как его сопрягнуть с темой)..

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

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