Создание FAQ страницы с помощью двух циклов

Как создать FAQ страницы для WordPress

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

Как сделать это за 4 следующих шага:

  • создание темы которая будет дочерней темой «twentyfourteen»
  • регистрация типа поста как FAQs
  • создание шаблона для FAQ странички, основываясь на базовом шаблоне
  • добавление двух циклов к шаблону. Один для вопросов, другой для ответов которые будут соединены между собой

Начнем по порядку!

1. Создание темы

Нужно создать новую тему которая будет дочерней, но вы можете просто добавить файл шаблона для вашей, уже существующей темы. Для новой темы, заходим в «wordpress/wp-content/themes/«, создаем новую папку с названием, а потом в этой папке создаем файл style.css с таким начальным кодом:

/*
Theme Name:     FAQ theme
Theme URI:      http://clubwp.ru/
Description:    Theme for FAQ
Author:         PodGar
Author URI:     http://clubwp.ru/members/podgar.386/
Template:       twentyfourteen
Version:        1.0
*/
@import url("../twentyfourteen/style.css");

Теперь у нас есть дочерняя тема. Которую можно применить из настроек WordPress.

2. Регистрация типа поста

Создадим файл functions.php или если вы работаете, уже в существующей теме, то он у вас должен быть. В него нужно добавить следующие строки:

<?php function wp_create_faq_posts() { register_post_type( 'faq', array( 'label' => 'FAQs',
        'has_archive' => true,
        'public' => true,
        'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail','page-attributes' ),
        'exclude_from_search' => true,
        'capability_type' => 'post'
        )
    );
}
add_action( 'init', 'wp_create_faq_posts' );
?>

Создает новый тип ваших постов, доступ к которым появляется в вашем сайд-баре, в режиме редактирования. Сейчас нужно заполнить содержимым наш FAQ:

Создание FAQ страницы с помощью двух циклов

3. Создание файла шаблона

Нам понадобиться последний файл для нашего шаблона, назовем его archive-faq.php и кидаем его в папку темы. Напишем самый простой шаблон, что-то типа этого:

<?php /* * Template Name: FAQ */ get_header(); ?>

<div id="main-content" class="main-content">

<div id="primary" class="content-area">

<div id="content" class="site-content">
        </div>

   </div>

</div>


<?php get_footer(); ?>

4. Создание циклов

Первый цикл с заголовком и ссылкой мы добавим после тега



<div id="content" class="site-content"> 

и он будет содержать следующие строки:



<h2>Frequently Asked Questions</h2>


<ul class="faq-list">
        <?php while ( have_posts() ) : the_post();?>

<li class="post-<?php the_ID(); ?>" <?php post_class(); ?>><a href="#post-<?php the_ID(); ?>"><?php the_title(); ?></a></li>

    <?php endwhile;?>
</ul>

Этот код отображает наш заголовок h2. Потом идет список, внутри его каждого элемента используется функция the_title(), для вывода нашего вопроса. Также этот вопрос является ссылкой-якорем, который прикреплен к своему посту с помощью

<a href="#post-<?php the_ID(); ?>">

Второй цикл будет выводить заголовок-вопрос с ответом ниже, используя the_title() и the_content(). Его мы добавим сразу после предыдущего кода:

<?php rewind_posts(); ?>
    <?php while ( have_posts() ) : the_post();?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>


<section class="entry-content">
            <?php the_content(); ?>
        </section>

    </article>

<?php endwhile;?>

Этот цикл начинается с перемотки цикла rewind_posts(). Потом каждому тегу article присваивается атрибут

id="post-<?php the_ID(); ?>"

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

Как создать FAQ страницы для WordPress

Понравилась статья? Поделись с друзьями:
Комментариев: 5
  1. Для новичка сделать "самый простой шаблон" — целая наука. Не могли бы Вы предложить несколько вариантов на выбор. Этот как-то не очень… Или подскажите, пожалуйста, где можно взять готовые для этой цели?

  2. Я думаю для того что бы написать такой FAQ надо хотя бы немного разбираться в кодах. Далеко не каждый новичок способен на такое. Нужно иметь базу начальную.

  3. Действительно слишком сложно новичкам разобраться… Можно запутаться в коде или увидеть в результате "неожиданные" ошибки. Наверное лучше что-нибудь готовое поискать или обратиться к специалистам.

  4. Согласна с предыдущими высказываниями, чтобы сделать страницу вопросов-ответов таким способом, просто необходимо знать азы кода HTML. Лучше использовать для этого готовый плагин. Да, он будет больше нагружать систему, чем просто написанный скрипт, но на начальном этапе — это более разумный вариант. Тем более, если человек, например, не захочет в будущем углубляться в вэб-программирование. В качестве примера можно привести  WP DS FAQ.

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

Добавить комментарий
Screenshot.png
Общаясь и проявляя активность в Клубе по WordPress

можно зарабатывать монеты и получить доступ в закрытый раздел