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

As FAQs (Perguntas Frequentes) são uma ótima maneira de organizar informações importantes para os usuários. Com o Advanced Custom Fields (ACF), você pode criar uma página de FAQ totalmente dinâmica, onde o administrador do site pode adicionar, editar ou excluir perguntas e respostas diretamente pelo painel do WordPress.

1. Criando a Página de FAQ no WordPress

Opção 1: Criar Manualmente no Back-End

1. Acesse Páginas > Adicionar Nova.
2. Nomeie a página como FAQ.
3. Publique a página.

Opção 2: Criar Automaticamente com um Template Personalizado

Se preferir, você pode criar a página automaticamente sem precisar adicioná-la no back-end. Para isso, use o seguinte código no 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');

view raw 01-functions.php hosted with ❤ by GitHub

Registre o endpoint e crie o arquivo page-faq.php no diretório do tema ativo.

2. Configurando os Campos Personalizados no ACF

Primeiro, crie um grupo de campos no ACF para as perguntas e respostas.

Passos para Criar o Grupo de Campos

1. No painel do WordPress, acesse Custom Fields > Add New.
2. Nomeie o grupo como FAQ.
3. Adicione um campo do tipo Repeater com as seguintes configurações:
   • Label: FAQ Items
   • Field Name: faq_items
4. Dentro do repeater, adicione dois campos:
   • Pergunta:
     • Tipo: Text
     • Field Name: faq_question
   • Resposta:
     • Tipo: Text Area
     • Field Name: faq_answer
5. Configure o grupo de campos para aparecer em uma página específica:
   • Regras: Show this field group if Page is equal to FAQ.
6. Salve o grupo de campos.

3. Criando o Template de FAQ

No arquivo page-faq.php, insira o seguinte código para exibir as perguntas e respostas:

	<?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();

view raw 02-page-faq.php hosted with ❤ by GitHub

Como Funciona?

• O template utiliza o Bootstrap 5.3 para criar uma interface de FAQ com acordeão.
• As perguntas e respostas são carregadas dinamicamente com base nos dados inseridos no repeater do ACF.
• O primeiro item do acordeão é exibido expandido por padrão.

4. Estilizando o FAQ

Adicione os estilos no arquivo CSS do seu tema ou crie um arquivo CSS separado, como faq.css. Aqui está um exemplo:

	.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;
	}

view raw 03-faq.css hosted with ❤ by GitHub

Certifique-se de carregar o CSS no arquivo 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');

view raw 04-functions.php hosted with ❤ by GitHub

5. Testando a Página de FAQ

1. Acesse o painel do WordPress e edite a página FAQ (se criada manualmente).
2. Adicione algumas perguntas e respostas no repeater do ACF.
3. Visualize a página no front-end para verificar se tudo está funcionando corretamente.

Conclusão

Com o ACF, você pode criar páginas dinâmicas de FAQ que são fáceis de gerenciar e incrivelmente úteis para os visitantes do seu site. Ao combinar o poder do ACF com o Bootstrap, você cria uma experiência responsiva e amigável tanto para o administrador quanto para o usuário final.

Se tiver dúvidas ou precisar de ajuda, deixe um comentário!