Criando acordeão sem plugin no WordPress com Elementor

Neste tutorial, vou ensinar a como criar acordeão (accordion) de perguntas frequentes usando o ACF PRO + WordPress + Elementor, sem usar plugin adicional (ADDONS).

Por se tratar de um recurso avançando, este tutorial vai tentar resumir ao máximo para não ficar tão extenso.

Instalando temas e plugins

Instale o tema “Hello Elementor” e instale o plugin “Elementor“, depois disso, precisamos instalar o plugin “Child Theme Configurator” para poder fazer uma cópia segura do tema “Hello Elementor”, e poder modificar o arquivo functions.php com segurança.

Instale também o plugin ACF PRO para poder criar os campos personalizados.

Copiando e criando tema filho

Agora que tudo esta instalado, acesse o plugin Child Theme Configurator em Ferramentas > Child themes.

Selecione o tema “Hello Elementor” e faça uma copia dele (a cópia é fácil e o plugin é auto explicativo).

Assim que copiar o tema, ative ele para que seu site comece a usar ele, no lugar do original.

Editando functions.php

Acesse o arquivo functions.php do tema filho Hello Elementor, via editor de códigos ou pelo editor do WordPress (Provavelmente vai estar com o nome “Hello Elementor Child“).

Vamos adicionar agora, os códigos PHP que vão nos ajudar nessa implementação.

Primeiro adicione o código para criar a pagina de opções do ACF

if( function_exists('acf_add_options_page') ) {

	$slug_acf = "configuracoes-adicionais-tema";
	$botao_atualizar = __('Atualizar', 'acf');

	acf_add_options_page(array(
		'page_title' 	=> 'Configurações do tema',
		'menu_title'	=> 'Opções do tema',
		'icon_url' => 'dashicons-superhero',
		'menu_slug' 	=> $slug_acf,
		'capability'	=> 'edit_posts',
		'update_button' => $botao_atualizar,
		'redirect'		=> false
	));


  acf_add_options_sub_page(array(
		'page_title' 	=> 'Perguntas e respostas',
		'menu_title'	=> 'Perguntas e respostas',
		'update_button' => $botao_atualizar,
		'parent_slug'	=> $slug_acf,
	));

}

O código acima cria duas paginas customizadas no menu do seu site WordPress, uma chamada “Configurações do tema” e outra “Perguntas e respostas“.

A pagina Configurações do tema vou deixar como principal, e no momento vai ficar vazia, apenas para se eu quiser colocar alguns campos globais padrões como logotipo, etc. Assim posso chamar em todo site.

A pagina Perguntas e respostas é a que vamos usar para este exemplo, vou usar ela apenas para adicionar o repetidor do ACF para meu acordeão de perguntas.

Agora vou adicionar esse código customizado para trazer o acordeão que vamos criar.

Ainda no arquivo functions.php, adicione logo abaixo, este código:

// RETURNAR ARQUIVOS PARA SHORTCODE
function brnn_theme_return_file($file) {
	ob_start();
	$html;
	$html .= include($file.".php");
	$html = ob_get_clean();
	return $html;
}
// ---
function brnn_theme_accordion_acf($attrs) {
	return brnn_theme_return_file("custom_shortcode/accordion_acf");
}
add_shortcode("brnn_theme_accordion_acf", "brnn_theme_accordion_acf");

// RETURNAR ARQUIVOS PARA SHORTCODE

A função brnn_theme_return_file é responsável por trazer um arquivo PHP de dentro do seu tema, e a função brnn_theme_accordion_acf é a função que criei onde vou declarar o arquivo que eu quero buscar e transformar em um shortcode no wordpress.

Criando pasta e arquivo do shortcode personalizado

Ainda dentro do editor de código (eu indico o Atom que é o que uso, nele você pode instalar a extensão ftp-remote-edit para acessar arquivos via FTP direto pelo editor, mas pode ser qualquer cliente FTP que quiser), você vai criar uma pasta chamada custom_shortcode na raiz do tema Hello Elementor Child, e dentro desta pasta, crie o arquivo accordion_acf.php

Editando arquivo accordion_acf.php

Dentro do arquivo accordion_acf.php, adicione o código abaixo:

<style>
.brnn-accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  white-space: break-spaces;
}

.brnn-active, .brnn-accordion:hover, .brnn-accordion:focus {
  background-color: #ccc;
}

.brnn-panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>


<div class="brnn-box-custom-accordion">
  <?php foreach (get_field("perguntas_frequentes", "options") as $brnn_accordion) { ?>
    <button class="brnn-accordion"><?= $brnn_accordion['titulo_pergunta'] ?></button>
    <div class="brnn-panel">
      <p><?= $brnn_accordion['resposta_pergunta'] ?></p>
    </div>
  <?php } ?>
</div>


<script>
var acc = document.getElementsByClassName("brnn-accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("brnn-active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

Depois disso, salve o arquivo!

Configurar repetidor no ACF

Para isso, eu criei uma pagina de opções customizadas para trazer minhas perguntas e respostas em qualquer pagina de forma global, as paginas de opções globais do ACF somente funcionam na versão PRO, caso não saiba como criar clique aqui.

Caso não tenha a versão PRO do ACF, entre em contato comigo que posso ajudar.

Como mostra a imagem abaixo, eu criei um campo personalizado com o titulo “Perguntas frequentes”, e no “Tipo do campo”, deixei como Repetidor.

Logo abaixo, na seção “Sub campos”, adicione os seguintes campos abaixo, como mostra na imagem:

Na seção “Localização“, deixe as opções como abaixo:

Criando algumas perguntas

Agora vou criar algumas perguntas de teste, apenas para serem exibidas no frontend do site, mas nesse caso, você cria suas próprias perguntas e respostas.

Após isso, clique em atualizar para salvar.

Adicionando shortcode personalizado na pagina Elementor

Agora que tudo esta configurado, acesse ou crie uma pagina elementor.

No campo “Pesquisar widget“, busque por “shortcode“, arraste o bloco do shortcode até a pagina, na seção que quiser.

Cole o código [brnn_theme_accordion_acf] no campo onde esta escrito “Digite o shortcode“.

Após isso, ele vai carregar em sua pagina de forma automática as perguntas e respostas que criamos de forma dinâmica, como mostra abaixo:

OBS: Caso não carregue automaticamente, salve a pagina e atualize.

PRONTO! Sua seção de perguntas e respostas dinâmicas com acordeão customizado esta pronta!

Agora, caso queira, é só personalizar com CSS customizado.