Как создать FAQ-страницу, используя два цикла WordPress

2020-10-20

СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ | ПОСМОТРЕТЬ ДЕМО

Это то, что мы будем создавать

Создаем тему

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

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

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

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

Что вам понадобится

Установленный WordPress;
рабочая тема (вы можете работать с вашей собственной темой или можете использовать родительскую тему, как это сделала я);
редактор кода.

1. Создаем тему

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

Сначала создаем стилевой файл нашей темы, который называется style.css и добавляю в него следующий код:

/*
Theme Name:     WPTutsPlus Creating an FAQ Archive Using Two Loops
Theme URI:      http://rachelmccollin.co.uk/wptutsplus-faq-archive-two-loops/
Description:    Theme to support WPTutsPlus tutorial on creating a custom faq archive. Child theme for the Twenty Fourteen theme.
Author:         Rachel McCollin
Author URI:     http://rachelmccollin.co.uk/
Template:       twentyfourteen
Version:        1.0
*/

@import url("../twentyfourteen/style.css");

Теперь у меня есть рабочая дочерняя тема.

2. Регистрируем новый тип поста

Следующим шагом является создание нового типа поста 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' );
?>

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

Следующим шагом является создание некоторых данных для моих часто задаваемых вопросов (FAQs). Вы можете увидеть их в разделе FAQs:

3. Создаем файл шаблона архива

Создайте новый файл под названием 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();

Итак, мы получили основной файл, в который будем добавлять свои циклы.

4. Создаем два цикла для страницы часто задаваемых вопросов

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

Цикл первый: названия и ссылки FAQ

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

<?php // первый цикл - названия с ссылкой на подробные ответы ?>

<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; /* конец цикла*/ ?>

</ul>

Этот код выполняет следующие действия:

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

Примечание. В приведенном выше примере, я не проверила, есть ли в моем запросе сообщения. Но вы можете реализовать проверку с помощью if(have_posts()). Благодаря этому ваш шаблон не будет выводить пустые заголовки.

Второй цикл: Названия и ответы FAQ

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

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

<?php // второй цикл – перемотка на начало и повторный запуск ?>

<?php rewind_posts() ; ?>

<?php while ( have_posts() ) : the_post(); /* старт цикла */ ?>

<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; /* Конец цикла */ ?>

Все начинается с повторения цикла, а затем запускается еще один цикл для вывода:

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

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

Резюмируя…

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