Código do plugin:
<?php
/**
* Plugin Name: Ajax Content Shortcode
* Description: Plugin para carregar conteúdo via Ajax usando um shortcode com ID ou via popup.
* Version: 1.0
* Author: Ivon Filho
*/
// Enqueue o script com jQuery e passe a URL do Ajax
function acs_enqueue_scripts() {
wp_enqueue_script('jquery');
add_action('wp_footer', 'acs_inline_script');
}
add_action('wp_enqueue_scripts', 'acs_enqueue_scripts');
function acs_inline_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
function loadContent(postID, target) {
$.ajax({
url: "<?php echo admin_url('admin-ajax.php'); ?>",
type: 'POST',
data: {
action: 'acs_process_acf_content',
post_id: postID
},
success: function(data) {
$(target).html(data);
},
error: function(error) {
console.error("Erro ao fazer solicitação: ", error);
}
});
}
// Carregar conteúdo em um popup ao clicar no link
$('a[href^="#"], a[id]').on('click', function(e) {
e.preventDefault(); // Impede a ação padrão do link
var postID = $(this).attr('id');
if (!postID) {
postID = $(this).attr('href').substring(1);
}
// Define o alvo onde o conteúdo será inserido
var target = '.conteudo-que-deve-aparecer';
loadContent(postID, target);
});
// Carregar conteúdo diretamente se houver data-id
$('.ajax-content-shortcode').each(function() {
var postID = $(this).data('id');
loadContent(postID, this);
});
});
</script>
<?php
}
// Função para processar o conteúdo do ACF e Elementor
add_action('wp_ajax_acs_process_acf_content', 'acs_process_acf_content');
add_action('wp_ajax_nopriv_acs_process_acf_content', 'acs_process_acf_content');
function acs_process_acf_content() {
$post_id = intval($_POST['post_id']);
$post = get_post($post_id);
if ($post) {
setup_postdata($post);
if ( did_action( 'elementor/loaded' ) && \Elementor\Plugin::$instance->documents->get( $post_id )->is_built_with_elementor() ) {
// Obtenha o conteúdo do Elementor para o post
$content = \Elementor\Plugin::instance()->frontend->get_builder_content_for_display( $post_id );
} else {
// Obtenha o conteúdo padrão do post
$content = apply_filters('the_content', $post->post_content);
}
wp_reset_postdata();
} else {
$content = 'Nenhum conteúdo encontrado';
}
if ($content) {
echo $content;
} else {
echo 'Nenhum conteúdo encontrado';
}
wp_die();
}
// Função para registrar o shortcode
function acs_register_shortcode($atts) {
$atts = shortcode_atts(array(
'id' => ''
), $atts, 'ajax-content');
ob_start();
if (empty($atts['id'])) {
?>
<div class="conteudo-que-deve-aparecer"></div>
<?php
} else {
?>
<div class="ajax-content-shortcode" data-id="<?php echo esc_attr($atts['id']); ?>">
<!-- O conteúdo carregado via Ajax será inserido aqui -->
</div>
<?php
}
return ob_get_clean();
}
add_shortcode('ajax-content', 'acs_register_shortcode');
?>
O objetivo é que o shortcode {ajax-content id="123"}
carregue o conteúdo diretamente na página e que o link com a classe .open-popup
carregue o conteúdo onde o shortcode {ajax-content}
é usado.
Como Usar:
- Instalar o Plugin:
- Coloque a pasta
ajax-content-shortcode
no diretóriowp-content/plugins
. - Ative o plugin no painel de administração do WordPress.
- Coloque a pasta
- Adicionar o Shortcode:
- Para carregar conteúdo diretamente, insira o shortcode
{ajax-content id="123"}
na página ou post onde deseja que o conteúdo carregado via Ajax apareça. Substitua123
pelo ID do post que deseja exibir. - Para carregar conteúdo em um popup, use o shortcode
{ajax-content}
sem o ID e adicione um link com a classe.open-popup
.
- Para carregar conteúdo diretamente, insira o shortcode
- Botão de Ação para Popup:
- Adicione um botão ou link com a classe
.open-popup
e um atributoid
ouhref
correspondente ao ID do post que deseja carregar em um popup.
- Adicione um botão ou link com a classe
Exemplo de HTML para o botão de popup:
<a href="#" id="123" class="open-popup">Abrir Conteúdo</a>
<!-- ou -->
<a href="#123" class="open-popup">Abrir Conteúdo</a>
[ajax-content]
Neste exemplo, o shortcode {ajax-content id=”7128″} carrega o conteúdo diretamente na página, enquanto o link com a classe .open-popup abre um popup criado com elementor e dentro do popup foi inserido o shortcode {ajax-content} que carrega o ID definido no link.