Como Criar um Popup Ajax com Conteúdo Dinâmico no WordPress

Picture of Ivon Filho

Ivon Filho

Procurando desenvolvedor freelancer para seu projeto?

Explicação

  • Enfileiramento do Script: Utilizamos a função wp_enqueue_script para enfileirar o jQuery e, em seguida, adicionamos o JavaScript no rodapé da página com wp_footer.
  • Script JavaScript: O script jQuery captura o clique no botão com a classe open-popup, impede a ação padrão do link e faz uma solicitação Ajax para admin-ajax.php, passando o ID do post.
  • Processamento do Conteúdo: A função PHP process_acf_content captura o ID do post enviado pela solicitação Ajax, obtém o campo personalizado do ACF associado e retorna o conteúdo. Se não houver conteúdo, uma mensagem de erro é exibida.

Como Utilizar

  1. Adicione o código PHP no arquivo functions.php do seu tema.
  2. Certifique-se de que você tem um campo ACF chamado tipo_de_servicos_autorizados associado aos seus posts.
  3. Adicione botões com a classe open-popup e o ID do post correspondente nos locais onde deseja que o popup seja acionado.
  4. Crie uma div com a classe conteudo-que-deve-aparecer onde o conteúdo dinâmico será exibido.

Pronto! Agora você tem um popup Ajax que carrega conteúdo dinâmico usando ACF no seu site WordPress.

// POPUP AJAX CONTENT 

// Função para enfileirar e adicionar o script inline
function meu_script_enqueue() {
// Enfileirar o jQuery
wp_enqueue_script('jquery');

// Adiciona o JavaScript no rodapé
add_action('wp_footer', 'meu_script_inline');
}
add_action('wp_enqueue_scripts', 'meu_script_enqueue');

function meu_script_inline() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.open-popup').on('click', function(e) {
e.preventDefault(); // Impede a ação padrão do link

// Pega o ID do botão
var postID = $(this).attr('id');

// Faz uma solicitação Ajax passando o ID do post
$.ajax({
url: "<?php echo admin_url('admin-ajax.php'); ?>",
type: 'POST',
data: {
action: 'process_acf_content',
post_id: postID
},
success: function(data) {
// Coloca o conteúdo retornado dentro da div .conteudo-que-deve-aparecer
$('.conteudo-que-deve-aparecer').html(data);
},
error: function(error) {
console.error("Erro ao fazer solicitação: ", error);
}
});
});
});
</script>
<?php
}

// Função para processar o conteúdo do ACF
add_action('wp_ajax_process_acf_content', 'process_acf_content');
add_action('wp_ajax_nopriv_process_acf_content', 'process_acf_content');

function process_acf_content() {
$post_id = intval($_POST['post_id']);
// Obtenha o conteúdo do ACF usando o post_id
$content = get_field('tipo_de_servicos_autorizados', $post_id);
if ($content) {
echo $content;
} else {
echo 'Nenhum conteúdo encontrado';
}
wp_die();
}
Rolar para cima