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

FAQ-страницы с вопросами и ответами довольно часто встречаются на сайтах. Особенно это касается сектора e-commerce и сайтов, предлагающих продукты или услуги, которые могут вызвать дополнительные вопросы у потенциальных покупателей.

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

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

Смотрите также:

• Создаем секцию FAQ на вашем WordPress сайте с помощью плагина
• Как добавить FAQ-секцию с ответами на вопросы в WordPress
• Добавляем в WordPress FAQ в виде «гармошки» на jQuery

 Скачать исходники

Но есть один нюанс. Список с вопросами и ответами может быть слишком длинным. Да и посетитель сайта, скорее всего, не будет просматривать все записи и читать все комментарии. Особенно, если их много.

Но эту проблему легко решить, разделив страницу на две части: вопросы вверху, а ответы — внизу. Таким образом, посетитель сможет нажать на вопрос, и откроется лента с ответами. К счастью, на WordPress это очень просто сделать. Для этого нужно добавить второй цикл к странице с архивом записей archive.php.

Из этого поста вы узнаете, как это сделать в четыре шага. А именно:

1. Создание дочерней темы для темы оформления TwentyFourteen.
2. Создание нового типа постов FAQ и добавление в него необходимой информации.
3. Создание шаблона архивов записей для типа поста FAQ на основе шаблона index.php в родительской теме.
4. Добавление в этот шаблон двух циклов: один для вопросов, второй — для ответов, с ссылками с одного на другой.

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

Так как этот обучающий материал включает в себя создание шаблона для архивных записей, нужно будет добавить его в тему. Можно создать новую дочернюю тему для уже существующей родительской TwentyFourteen или же добавить шаблон к той, которую вы используете на данный момент.

Смотрите также:

• Настройка тем WordPress с использованием дочерней темы

Мы создадим дочернюю тему и разместим в ней файл style.css со следующим содержимым:

/*
Theme Name:     WPTutsPlus Creating an FAQ Archive Using Two Loops
Theme URI:      
Description:    Theme to support WPTutsPlus tutorial on creating a custom faq archive. Child theme for the Twenty Fourteen theme.
Author:         Rachel McCollin
Author URI:     
Template:       twentyfourteen
Version:        1.0
*/
 
@import url("../twentyfourteen/style.css");

Таким образом мы создали новую дочернюю тему от TwentyFourteen.

Шаг 2. Создание нового типа поста FAQ

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

<?php
// functions file for a theme with a custom faqs archive. Supports tutorial for wptutsplus.
//************************** register custom post types and taxonomies ************//
function wptp_create_faq_post_type() {
         
    // faq custom post type
    register_post_type( 'faq', array(
        'labels' => array(
        'name' => 'FAQs',
        'singular_name' => 'FAQ'
    ),
        'has_archive' => true,
        'public' => true,
        'hierarchical' => true,
        'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail','page-attributes' ),
        'exclude_from_search' => true,
        'capability_type' => 'post',
        'rewrite' => array ('slug' => 'faqs' ),
        )
    );
 
}
add_action( 'init', 'wptp_create_faq_post_type' );
?>

Так создается новый тип поста FAQ с использованием функции register_post_type(). Стоит обратить внимание на то, что в коде была использована функция 'rewrite' для изменения отображения вида страницы архива, на которой находится посетитель. Поэтому вместо окончания URL данной страницы на /faq/ оно изменится на /faqs/.

Далее нам нужно внести данные (т.е. сами вопросы) для страницы FAQ, которые будут на ней отображаться. Пример показан на картинке ниже:

Шаг 3. Создание шаблона архива

Вам нужно создать шаблон, который и будет отображать страницу FAQ. Для этого в папке используемой темы создаем новый файл под названием archive-faq.php.

Если выбранная вами новая тема является дочерней от темы TwentyFourteen, то нужно добавить код в шаблон из файла index.php родительской темы, как показано ниже. Если вы используете собственную тему, то добавьте собственный код.

<?php
/**
 * The template for displaying the FAQ archive.
 *
 */
 
get_header(); ?>
 
<div id="main-content" class="main-content">
 
    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">
 
 
        </div><!-- #content -->
    </div><!-- #primary -->
    <?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
 
<?php
get_sidebar();
get_footer();

Мы создали базовый шаблон, в который теперь нужно включить два цикла для работы нашей FAQ-страницы.

Шаг 4. Создание двух циклов для страницы FAQ

Файл archive-faq.php вашего шаблона будет включать два цикла: первый — с заголовком каждого вопроса со ссылкой на ответ, который, в свою очередь, будет отображаться с помощью второго цикла.

Это можно сделать, если использовать и редактировать стандартный цикл WordPress. Но необходимо использовать rewind_posts() после первого цикла и, таким образом, начнется второй.

Цикл первый: заголовки и ссылки

Сначала создайте цикл для отображения заголовка каждого вопроса. Добавьте следующий код под открывающимся тэгом <div id="content">:

<?php // first loop - titles with link to detailed answers ?>
 
<h2>Frequently Asked Questions - click for answers</h2>
<ul class="faq-list">
 
    <?php while ( have_posts() ) : the_post(); /* start the loop */ ?>
        <li class="post-<?php the_ID(); ?>" <?php post_class(); ?>><a href="#post-<?php the_ID(); ?>" title="<?php printf( esc_attr__( 'Link to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></li>
         
    <?php endwhile; /* end the loop*/ ?>
 
</ul>

Это даст вам следующее:

• отображение вопроса с помощью заголовка <h2>
• активирование начала цикла
• отображение заголовка в неупорядоченном списке с использованием the_title(), если каждый из заголовков FAQ находится в этом списке
• преобразование каждого заголовка в ссылку на #post-<?php the_ID(); ?>, которая будет служить в качестве ID для каждого поста во втором цикле
• завершение цикла.

Примечание: в примере выше не было проверки if( have_posts() ), но вам, наверняка, захочется убедиться, чтобы шаблон архива ваших записей не выводил заголовок вопроса без отображения ответа на него.

Цикл второй: вопросы и ответы

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

Под кодом первого цикла добавьте следующее:

<?php // second loop - rewind and run again ?>
 
<?php rewind_posts() ; ?>
 
<?php while ( have_posts() ) : the_post(); /* start the loop */ ?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <h3><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
 
 
    <section class="entry-content">
        <?php the_content(); ?>
    </section><!-- .entry-content -->
</article>
 
<?php endwhile; /* end the loop*/ ?>

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

• элементы статьи, связанные с каждым вопросом-ответом
• вопрос с помощью заголовка <h3> с приставкой #post-<?php the_ID(); ?> в качестве ID, что обеспечивает активирование ссылки в первом цикле
• контент страницы FAQ.

Вот мы и создали файл шаблона для записей в архиве. Сохраните его и протестируйте. У вас должна теперь быть страница под адресу вашсайт.com/faqs, которая выглядит подобным образом:

В итоге

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

Источник: code.tutsplus.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/