Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

Дивіться також:

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

 Завантажити вихідні

Але є один нюанс. Список запитань і відповідей може бути занадто довгим. Та й відвідувач сайту, швидше за все, не переглядатиме всіх записів і читатиме всі коментарі. Особливо якщо їх багато.

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

З цієї посади ви дізнаєтеся, як це зробити в чотири кроки. А саме:

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

Крок 1. Створення теми

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

Дивіться також:

Ми створимо дочірню тему та розмістимо в ній файл 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(). Варто звернути увагу, що в коді була використана функція 'переписувати' для зміни відображення виду сторінки архіву, де знаходиться відвідувач. Тому замість закінчення URL цієї сторінки на /часто задаються/ воно зміниться на /Часті питання/.

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

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

Крок 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>
  • активування початку циклу
  • відображення заголовка у неупорядкованому списку з використанням назва(), якщо кожен із заголовків FAQ знаходиться в цьому списку
  • перетворення кожного заголовка на посилання на #post-, яка буде служити як ID для кожного посту в другому циклі
  • завершення циклу.

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

Цикл другий: Питання та відповіді

У другому циклі також відображатимуться заголовки, тобто питання вже з відповідями за допомогою назва() и 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- як ID, що забезпечує активування посилання в першому циклі
  • контент сторінки FAQ.

Ось ми створили файл шаблону для записів в архіві. Збережіть його та протестуйте. У вас тепер має бути сторінка за адресою ваш сайт.com/faqs, яка виглядає таким чином:

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

У підсумку

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

Джерело: code.tutsplus.com

 

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 0

Додати коментар або відгук