Como Criar uma Página de FAQ Dinâmica com Advanced Custom Fields (ACF)

01-functions.php

<?php
  function adicionar_endpoint_faq() {
      add_rewrite_rule(
          '^faq/?$',
          'index.php?is_faq=1',
          'top'
      );
      add_rewrite_tag('%is_faq%', '([0-9]+)');
  }
  add_action('init', 'adicionar_endpoint_faq');

  function carregar_template_faq($template) {
      if (get_query_var('is_faq')) {
          return get_template_directory() . '/page-faq.php';
      }
      return $template;
  }
  add_filter('template_include', 'carregar_template_faq');

  function flush_rewrite_rules_on_activation() {
      adicionar_endpoint_faq();
      flush_rewrite_rules();
  }
  add_action('after_switch_theme', 'flush_rewrite_rules_on_activation');

02-page-faq.php

<?php
/*
 * Template Name: FAQ
 */

get_header();
?>

<div class="container my-5">
    <h1 class="text-center mb-4">Perguntas Frequentes</h1>

    <div class="accordion" id="faqAccordion">
        <?php if (have_rows('faq_items')): ?>
            <?php $i = 0; ?>
            <?php while (have_rows('faq_items')): the_row(); ?>
                <?php
                $question = get_sub_field('faq_question');
                $answer = get_sub_field('faq_answer');
                ?>

                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading-<?php echo $i; ?>">
                        <button class="accordion-button <?php echo $i > 0 ? 'collapsed' : ''; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-<?php echo $i; ?>" aria-expanded="<?php echo $i === 0 ? 'true' : 'false'; ?>" aria-controls="collapse-<?php echo $i; ?>">
                            <?php echo esc_html($question); ?>
                        </button>
                    </h2>
                    <div id="collapse-<?php echo $i; ?>" class="accordion-collapse collapse <?php echo $i === 0 ? 'show' : ''; ?>" aria-labelledby="heading-<?php echo $i; ?>" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            <?php echo esc_html($answer); ?>
                        </div>
                    </div>
                </div>

                <?php $i++; ?>
            <?php endwhile; ?>
        <?php else: ?>
            <p>Nenhuma FAQ encontrada.</p>
        <?php endif; ?>
    </div>
</div>

<?php
get_footer();

03-faq.css

.accordion-button {
    background-color: #f8f9fa;
    color: #333;
    font-weight: bold;
}

.accordion-button:not(.collapsed) {
    background-color: #007bff;
    color: #fff;
}

.accordion-body {
    background-color: #fff;
    color: #555;
}

04-functions.php

<?php
  function carregar_estilos_faq() {
      wp_enqueue_style('faq-css', get_template_directory_uri() . '/assets/css/faq.css', [], '1.0.0');
      wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
      wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', [], null, true);
  }
  add_action('wp_enqueue_scripts', 'carregar_estilos_faq');