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

Share on Pinterest
Share with your friends










Отправить
5
Всего

Как создать 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

Share on Pinterest
Share with your friends










Отправить
5
Всего


Похожие записи

Комментарии к “Создание FAQ страницы с помощью двух циклов”
  1. alery 06.10.2016
  2. Nikolai 06.10.2016
  3. vivat 06.10.2016
  4. Svetka_13 06.10.2016
  5. Sena 06.10.2016

Напишите ответ