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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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