ЗАВАНТАЖИТИ ВИХІДНІ ФАЙЛИ | ПОДИВИТИСЯ ДЕМО

Це те, що ми будемо створювати

На створення 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
    Версія: 1.0
    */
    @import url(«../twentyfourteen/style.css»);

    Тепер у мене є робоча дочірня тема.

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

    Наступним кроком є створення нового типу поста FAQ. Створіть файл functions.php в папці своєї дочірньої теми і додайте в нього наступний код. Якщо ви працюєте з вже існуючої темою, яка вже має файл з функціями, то просто додайте в нього наступний код:

    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:

    Як створити FAQ-сторінку, використовуючи два циклу WordPress

    3. Створюємо файл шаблону архіву

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

    Отже, ми отримали основний файл, в який будемо додавати свої цикли.

    4. Створюємо два циклу для сторінки поширених питань

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

    Перший Цикл: назви і посилання FAQ

    Створіть цикл для виводу назви кожного питання. Додайте наступний код під відкривається тегом
    :

    Frequently Asked Questions — click for answers

    Цей код виконує наступні дії:

    • • відображає заголовок в елементі

      ;

    • • відкриває початок циклу;
    • • всередині неупорядкованого списку виводить назву, якщо кожен із заголовків FAQ в списку використовує the_title();
    • • обертає кожна назва посилання #post-, яка буде ідентифікатором для кожного поста у вашому другому циклі;
    • • завершує цикл.

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

    Другий цикл: Назви і відповіді FAQ

    Другий цикл знову виведе питання з відповідями, використовуючи the_title() і the_content().

    Під першим циклом додайте наступний код:

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

    • Елементів статті, щоб вкласти в кожне запитання-відповідь FAQ;
    • Назви FAQ в елементі

      з #post — в якості ідентифікатора, який забезпечує зв’язок з першим циклом;

    • Змісту сторінки FAQ.

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

    Як створити FAQ-сторінку, використовуючи два циклу WordPress

    Резюмуючи…

    Ось як ви можете створити FAQ сторінку зі своїми питаннями і відповідями, розділеними на два цикли. Зручність цього методу в тому, що ви просто використовуйте стандартний цикл WordPress, і поки ви налаштовуєте його, вам не доводиться створювати користувальницькі запити.

    Переклад статті «Creating an FAQ Page Using Two Loops» був підготовлений дружною командою проекту Сайтостроение від А до Я.

    ОСТАВЬТЕ ОТВЕТ

    Please enter your comment!
    Please enter your name here